写好JavaScript条件语句的5个技巧

一、使用Array.includes处理多种条件

让咱们来看一下的例子：

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

一眼看去，以上的例子貌似没有什么问题。可是，若是咱们加入更多的红色水果，好比车厘子（cherry）和蔓越橘（cranberries）？那就要使用||写更多的条件判断了。
为了解决以上问题，咱们可使用Array.includes来重写以上的条件判断。看如下例子：

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

将这些“红色水果”（条件）提取到数组里面，这样写就会看起来很简洁了。

二、减小嵌套，尽早return

下面咱们增长两个条件判断来扩展下上一个例子：

• 若是没有水果则抛出异常
• 若是数量超出10则输出水果数量

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  // condition 1: fruit must has value
  if (fruit) {
    // condition 2: must be red
    if (redFruits.includes(fruit)) {
      console.log('red');
      // condition 3: must be big quantity
      if (quantity > 10) {
        console.log('big quantity');
      }
    }
  } else {
    throw new Error('No fruit!');
  }
}
// test results
test(null); // error: No fruits
test('apple'); // print: red
test('apple', 20); // print: red, big quantity

看着以上的代码，发现如下的问题：

• 一个过滤无效条件的if/else语句
• 嵌套三级 if条件语句
  我我的遵循的通常规则：在处理无效条件时尽早return

/_ return early when invalid conditions found _/
function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  // condition 1: throw error early
  if (!fruit) throw new Error('No fruit!');
  // condition 2: must be red
  if (redFruits.includes(fruit)) {
    console.log('red');
    // condition 3: must be big quantity
    if (quantity > 10) {
      console.log('big quantity');
    }
  }
}

经过这种写法，能够减小一层嵌套。当if语句很长的时候，这种写法就比较好。（试想一下，你须要滚动到很底部才能看到else语言，这样不酷）。
咱们也能够用相反的条件判断和尽早返回来减小if语句嵌套，看如下第二个条件是如何处理的。

/_ return early when invalid conditions found _/

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (!fruit) throw new Error('No fruit!'); // condition 1: throw error early
  if (!redFruits.includes(fruit)) return; // condition 2: stop when fruit is not red
  console.log('red');
  // condition 3: must be big quantity
  if (quantity > 10) {
    console.log('big quantity');
  }
}

经过在第二个条件里取反的条件来判断，如今的代码释放了一个嵌套。当咱们要写很长的逻辑以及想中止更一步的过程时，这种方法很凑效。
可是，这样写并非硬性的，要看具体的场景。有时候，你要问下本身，这样的写法（没有嵌套）是否比以前那种（在条件2嵌套）更好或者更具可读性。

对我来讲，我只会远离以前的那种写法（在条件2嵌套），注意有如下两个缘由：

• 对比嵌套if语句，这种写法更短，更简洁
• 取反的条件判断可能招致更多的思考过程（增长认知负荷）

所以，始终旨在减小嵌套和及时及早返回（return），可是不要过分去这样作。若是感兴趣能够查看如下的一篇相关文章和在StackOverflow的关于这主题的更多讨论：

• 避免else，尽早return
• StackOverflow关于if/else代码风格的讨论

三、使用函数默认参数和解构

我猜如下的代码你看起来应该很熟悉了，咱们仍然须要在执行JavaScript时检查空值（undefined或null）。

function test(fruit, quantity) {
  if (!fruit) return;
  const q = quantity || 1; // if quantity not provided, default to one
  console.log(`We have ${q} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

事实上，咱们能够消除变量p来分配函数默认参数。看如下例子：

function test(fruit, quantity = 1) { // if quantity not provided, default to one
  if (!fruit) return;
  console.log(`We have ${quantity} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

是否是看起来很简单，很直观？请记住，每一个参数都有本身的默认函数参数。例如，咱们也能够为fruit分配默认值（即以上代码的第一个参数）:

function test(fruit = 'unknown', quantity = 1)

另一个问题来了：若是fruit参数是Object类型怎么办？咱们能够指定默认值吗？

function test(fruit) { 
  // printing fruit name if value provided
  if (fruit && fruit.name)  {
    console.log (fruit.name);
  } else {
    console.log('unknown');
  }
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

看看上面的例子，咱们想要打印出fruit的名称若是值存在的话，不然打印出“unknow”。咱们能够经过检查默认函数参数和对象解构来避免fruit&&fruit.name这个条件。看看如下例子：

// destructing - get name property only
// assign default empty object {}
function test({name} = {}) {
  console.log (name || 'unknown');
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

因为咱们只须要fruit对象的name属性，可使用{name}来解构对象，而后咱们能够在代码中使用name做为变量代替fruit.name。
咱们还将分配空对象{}做为默认参数。若是不这样作的话，在执行test(undefined)这行代码时就会报错：没法解析’undefined’或’null’的属性name，由于undefined没有name这个属性。
若是你不介意使用第三方库，有几个方法能够减小空值检查。

• 使用Lodash get方法
• 使用Facebook 开源的idx库（和Bablejs）

如下是使用Lodash的例子：

// Include lodash library, you will get _
function test(fruit) {
  console.log(__.get(fruit, 'name', 'unknown'); // get property name, if not available, assign default value 'unknown'
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

你能够在这里执行这个demo。另外，若是你热衷于使用函数式编程(FP)，你可能会选择用Lodash fp，Lodash的函数式版本（方法改成get或getOr）。Java架构交流学习圈：874811168 面向1-3年经验 Java开发人员 帮助突破瓶颈 提高思惟能力

四、支持Map或对象字面量而不是switch声明

咱们来看看如下例子：

function test(color) {
  // use switch case to find fruits in color
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}
//test results
test(null); // []
test('yellow'); // ['banana', 'pineapple']

以上的代码看起来貌似没什么错误，可是我发现代码十分杂乱。其实能够用字面量对象更清晰的语法来实现相同的结果。例如：

// use object literal to find fruits in color
  const fruitColor = {
    red: ['apple', 'strawberry'],
    yellow: ['banana', 'pineapple'],
    purple: ['grape', 'plum']
  };
function test(color) {
  return fruitColor[color] || [];
}

或者，你也能够用Map来实现一样的结果，例如：

// use Map to find fruits in color
  const fruitColor = new Map()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum']);
function test(color) {
  return fruitColor.get(color) || [];
}

Map是自ES6开始才可用的对象类型，能够用来存储键值对。

五、对全部或部分规则使用Array.every和Array.some

最后一个技巧是关于利用新的（其实不是很新了）JavaScript数组方法来减小代码函数。看看下面的代码，咱们想全部的水果是否都是红色的。

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];
function test() {
  let isAllRed = true;
  // condition: all fruits must be red
  for (let f of fruits) {
    if (!isAllRed) break;
    isAllRed = (f.color == 'red');
  }
  console.log(isAllRed); // false
}

上面的代码真的好冗长！咱们能够用Array.every来减小代码行数。来看看：

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];
function test() {
  // condition: short way, all fruits must be red
  const isAllRed = fruits.every(f => f.color == 'red');
  console.log(isAllRed); // false
}

如今是否是简洁不少了？一样相似的方法，若是你想测试是否全部的水果都是红色，能够用Array.some一行代码便可实现。

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
];
function test() {
  // condition: if any fruit is red
  const isAnyRed = fruits.some(f => f.color == 'red');
  console.log(isAnyRed); // true
}

 

总结

让咱们一块儿生成更多可读代码。 我但愿你能在本文中学到一些新东西。 就这样。 写代码快乐！ (完)