写JS代码一开始仅仅停留在实现上，经常会写一些初级又长的代码。后面开始慢慢转移到简洁代码的追求上。现在开始想慢慢整理一些优雅干净的JS写法，今天先小小整理一篇常用的小技巧使用：
1、处理多重条件
function test(a) {
if (a === 'apple' || b === 'orange' || c === 'strawbery') {
console.log('lalalala')
}
}
在想要匹配更多数据的情况下，一直使用||来扩展，明显很冗长。使用数组的includes方法来重写：
function test(a) {
let fruits = ['apple', 'orange', 'strawbery']
if (fruits.includes(a)) {
console.log('lalalala')
}
}
2、少写嵌套，尽早返回
以下函数实现：如果没有提供水果，返回错误。
如果水果颜色为红色，打印出颜色。如果水果为红色且数量大于10，就打印出“good”
function test (fruit, quantity) {
const redfruits = ['apple', 'orange', 'strawbery']
if (fruit) {
if (redfruits.includes(fruit)) {
console.log('red')
if (quantity > 10) {
console.log('good')
}
}
} else {
throw new Error ('No fruit')
}
}
以上这种写法if嵌套很多层，我们可以确定一个原则就是，一但发现无效条件，就尽早返回,不要太多嵌套，还要找半天else在哪
function test (fruit, quantity) {
const redfruits = ['apple', 'orange', 'strawbery']
if (!fruit) throw new Error ('No fruit')
if (!redfruits.includes(fruit)) return
console.log('red')
if (quantity > 10) {
console.log('good')
}
}
可以优化如上写法，尽早返回，设置条件反转，即当某个条件不满足时就不再执行后续逻辑。当然也不是要始终都追求最少嵌套，太精简对阅读代码的人会增加思考时间。
以上可以再写一个可读性更好的：
function test (fruit, quantity) {
const redfruits = ['apple', 'orange', 'strawbery']
if (!fruit) throw new Error ('No fruit')
if (redfruits.includes(fruit)) {
console.log('red')
if (quantity > 10) {
console.log('good')
}
}
}
3、使用数组every/some方法来处理全部/部分满足条件逻辑
例子：检查所有的水果是否都是红色，不是就返回
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]
function test () {
let isAllRed = true
for (let f of fruits) {
if (!isAllRed) break
isAllRed = (f.color === 'red')
}
console.log(isAllRed) // false
}
以上写法可以改写：
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]
function test () {
const isAllRed = fruits.every(f => f.color === 'red')
console.log(isAllRed) // false
}
如果想检查至少有一个水果是满足红色的，就使用some方法：
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]
function test () {
const isAllRed = fruits.some(f => f.color === 'red')
console.log(isAllRed) // false
}
4、筛选不同颜色的水果
下面会用四种写法来实现，可以直观比较写法的简洁程度：
switch写法：
function test (color) {
switch (color) {
case 'red':
return ['apple', 'strawberry']
case 'yellow':
return ['banana', 'pineapple']
case 'purple':
return ['grape', 'plum']
default:
return []
}
}
对象方法：
const fruitColor = {
red: ['apple', 'strawberry']
yellow: ['banana', 'pineapple']
purple: ['grape', 'plum']
}
function test (color) {
return fruitColor[color] || []
}
使用Map方法：
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum'])
function test (color) {
return fruitColor.get(color) || []
}
使用数组的filter方法：
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'strawberry', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'pineapple', color: 'yellow' },
{ name: 'grape', color: 'purple' },
{ name: 'plum', color: 'purple' }
]
function test (color) {
return fruits.filter(f => f.color === color)
}
5 、使用函数的默认参数来赋予默认值
function test (fruit, quantity) {
if (!fruit) return
const q = quantity || 1
console.log(`we have ${q}${fruit}`)
}
test('banana') // we have 1 banana
test('apple', 2) // we have 2 apple
以下我们可以通过改写，去除对q的定义，可以通过默认参数，不用特意写||来实现如果没有传quantity就取1
function test (fruit, quantity = 1) {
if(!fruit) return
console.log(`we have ${quantity}${fruit}`)
}
test('banana')
test('apple', 2)
同理，fruit也可以定义默认值：function test(fruit = 'unknown', test=1)
6、if(fruit & fruit.name)的替换写法
if(fruit & fruit.name)判断对象是否存在，存在情况下取name属性的写法，是常用的写法。现在我们使用解构赋值的方式来替换：
function test(fruit) {
// 如果有值，则打印出来
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log('unknown');
}
}
//测试结果
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
替换写法：
// 解构fruit对象，只得到name属性,并为其赋予一个{}空值，用于传入undefined的情况
function test({name} = {}) {
console.log(name || 'unknown')
}
test(undefined) // unknown
test({}) //unknown
test({name: 'apple', color: 'red'})
