优雅干净写JS系列1:常用小技巧整理

写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'})