js集合es6判斷條件使用技巧技巧

1. 多重判斷中使用Array.includes

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

如果添加更多的紅色的水果，比如cherry和cranberries，那會怎樣呢？你會使用更多的||來擴展條件語句嗎？

我們可以通過Array.includes(params)來重寫上面的條件語句。如下：

function test(fruit) {
  // extract conditions to array
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  if (redFruits.includes(fruit)) {
    console.log('red');
  }
}

我們提取red fruits（條件判斷）到一個數組中。通過這樣做，代碼看起來更加整潔了。

2. 少嵌套，早返回

我們擴展上面的例子，讓它包含多兩個條件：

• 如果沒有傳入fruit參數，拋出錯誤
• 接受quantity參數並在其超出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

看下上面的代碼，我們捋下：

• 1個if/else語句篩出無效的條件語句
• 3層嵌套的語句（條件1，2和3）

我個人遵守的准則是發現無效的條件時，及早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');
    }
  }
}

通過及早return，我們減少了一層嵌套語句。這種編碼風格很贊，尤其是當你有很長的if語句（可以想象下你需要滾動很長才知道有else語句，一點都不酷）。

（針對上面例子）我們可以通過倒置判斷條件和及早return來進一步減少if嵌套。看下面我們是怎么處理條件2的：

/_ 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，我們避免了嵌套語句。這個技巧很有用：當我們處理很長的邏輯，並且希望能夠在條件不滿足時能夠停下來進行處理。

而且，這樣做並不難。問下自己，這個版本（沒有條件嵌套）是不是比之前版本（兩層嵌套）更好/可讀性更高呢？

但是，對於我來說，我會保留先前的版本（包含兩層嵌套）。因為：

• 代碼較短且直接，嵌套if更加清晰
• 倒置判斷條件可能增加思考負擔（增加認知負荷）

因此，應當盡量減少嵌套和及早return，但是不要過度。如果你感興趣，你可以看下面的一篇文章和StackOverflow上的討論，進一步了解：