详解写好JS条件语句的5条守则

在用 JavaScript 工作时，我们经常和条件语句打交道，这里有5条让你写出更好/干净的条件语句的建议。

目录：

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

2.更少的嵌套，尽早 return

3.使用默认参数和解构

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

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

6.总结

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

让我们看一下下面这个例子:

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

第一眼，上面这个例子看起来没问题。如果我们有更多名字叫 cherry 和 cranberries 的红色水果呢？我们准备用更多的 || 来拓展条件语句吗？

我们可以用 Array.includes (Array.includes)重写条件语句。

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

我们把红色的水果(red fruits)这一判断条件提取到一个数组。这样一来，代码看起来更整洁。

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 fruitstest('apple'); // print: redtest('apple', 20); // print: red, big quantity

在上面的代码, 我们有:

我个人遵循的规则一般是在发现无效条件时，尽早Return。

/_ 当发现无效语句时，尽早Return _/function test(fruit, quantity) { const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; // 条件 1: 尽早抛出错误 if (!fruit) throw new Error('No fruit!'); // 条件 2: 必须是红色的 if (redFruits.includes(fruit)) {  console.log('red');  // 条件 3: 必须是大质量的  if (quantity > 10) {   console.log('big quantity');  } }}

这样一来，我们少了一层嵌套语句。这种编码风格非常好，尤其是当你有很长的if语句的时候(想象你需要滚动到最底层才知道还有else语句，这并不酷)

我们可以通过 倒置判断条件 & 尽早return 进一步减少if嵌套。看下面我们是怎么处理判断 条件2 的:

/_ 当发现无效语句时，尽早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'); }}