JS如何优雅的写判断语句(二)

1.多重判断时使用 Array.includes
2.更少的嵌套，尽早 return
3.使用默认参数和解构
4.倾向于遍历对象而不是 Switch 语句
5.对 所有/部分 判断使用 Array.every & Array.some

1.多重判断时使用 Array.includes

例子:

function test(fruit) {
  if (fruit == 'apple' || fruit == 'strawberry') {
    console.log('red');
  }
}

用 Array.includes (Array.includes)重写条件语句

function test(fruit) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (redFruits.includes(fruit)) {
    console.log('red');
  }
}

把条件放入数组,利用includes判断,这样一来，代码看起来更整洁

2.更少的嵌套，尽早 Return

例子:

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  // 条件 1: fruit 必须有值
  if (fruit) {

    // 条件 2: 必须是red的
    if (redFruits.includes(fruit)) {
      console.log('red');

      // 条件 3: quantity大于10
      if (quantity > 10) {
        console.log('big quantity');
      }
    }
  } else {
    throw new Error('No fruit!');
  }
}

// 测试结果
test(null); // error: No fruits
test('apple'); // print: red
test('apple', 20); // print: red, big quantity

当发现无效语句时，尽早Return,少嵌套

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  // 条件 1: 尽早抛出错误
  if (!fruit) throw new Error('No fruit!');

  // 条件 2: 当水果不是红色时停止继续执行
  if (!redFruits.includes(fruit)) return; 
  console.log('red');

  // 条件 3: 必须是大质量的
  if (quantity > 10) {
    console.log('big quantity');
  }
}

3.使用默认参数和解构

需要检查 null / undefined的值和指定默认值,例子:

// fruit是一个对象{name: 'xx'} , quantity数量设置默认值为 1
function test(fruit, quantity) {
  // 如果 quantity 参数没有传入，设置默认值为 1
  const q = quantity || 1;
  // 当值存在时打印 fruit 的值
  if (fruit && fruit.name){
      console.log(`We have ${quantity} ${fruit.name}!`);
  }else {
    console.log('unknown');
  }
}

使用默认参数和解构 代替

// fruit是一个对象{name: 'xx'} , quantity数量
function test({name} = {}, quantity = 1) {
  console.log (name || 'unknown');
}

4.倾向于对象遍历而不是if/else Switch语句

利用对象代替,可以参考上一篇文章

const fruitColor = {
  red: ['apple', 'strawberry'],
  yellow: ['banana', 'pineapple'],
  purple: ['grape', 'plum']
};
function test(color) {
  return fruitColor[color] || [];
}

5.对 所有/部分 判断使用Array.every & Array.some

es6中every,当数组中的数据必须每个满足条件返回true

var computers = [
    {name:"Apple",ram:8},
    {name:"IBM",ram:4},
    {name:"Acer",ram:32},
];
computers.every(computer => computer.ram > 3) // true
computers.every(computer => computer.ram > 10) // false

some,当数组中只要一条数据满足条件,就返回true

var computers = [
    {name:"Apple",ram:8},
    {name:"IBM",ram:4},
    {name:"Acer",ram:32},
];
computers.some(computer => computer.ram > 8) // true
computers.some(computer => computer.ram > 32) // false