【譯】寫好JavaScript條件語句的5個技巧

譯文
當咱們寫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）。

四、支持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
}

總結

讓咱們一塊兒生成更多可讀代碼。 我但願你能在本文中學到一些新東西。
就這樣。 寫代碼快樂！
(完)

後記

以上譯文僅用於學習交流，水平有限，不免有錯誤之處，敬請指正。

更多閱讀

解構賦值
Map
倔金

原文連接

原文