2条在 JavaScript 中写好条件控制的建议

条件控制是我们每天都要写的东西,怎么写出更好、更清晰易读的条件控制呢?这里有两条建议。
1. 在多项匹配中,使用Array.includes
2. 少嵌套,尽早返回

具体说来:

1. 在多项匹配中,使用Array.includes

来看看下面的语句:

function 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');
  }
}

下次要扩展红色水果的匹配,只要往数组里面添加就好了。

2. 少嵌套,尽早返回

我们把上面的需求再扩展一下,多添加两个判断:
– 如果没有传递水果进来,抛出错误
– 接收水果后,如果数量超过10个,就打印出来。
可能一开始的代码是这样的

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

  // 第一次判定: 必须传递进了水果
  if (fruit) {
    // 第二次判定: 必须是红色水果
    if (redFruits.includes(fruit)) {
      console.log('red');

      // 第三次判定:数量必须大于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

来总结一下上面的代码, 我们有:
– 一个 if/else 语句来过滤不合法条件
– 3层 if 嵌套
其实可以修改成下面这种更为清晰的形式:

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

先判定不符合的情况,不符合就立刻返回,代码简略了不少。其实还能更进一步:


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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.