JS 優化條件語句的5個技巧

前言

在使用 JavaScript 的時候，有時我們會處理大量條件語句，這里有5個技巧幫助我們編寫更簡潔的條件語句。

 

一、對多個條件使用 Array.includes

例子：

function condition(fruit) {
  if (fruit == 'apple' || fruit == 'banana') {
    console.log(fruit);
  }
}

上面的例子看起來不錯，但如果有更多水果需要判斷呢，比如桃子、草莓、橙子等等，我們要用更多的 || 來擴展這個表述嗎？

我們可以使用 Array.includes 重寫上面的條件

function condition(fruit){
    const allFruit = ['apple','banana','peach'，'Strawberry','orange'];
    if(allFruit.includes(fruit)){
        console.log(fruit)
    }
}

這樣做之后，代碼看起來更簡潔。

 

二、更少的嵌套，盡早返回

例子：

// 盡早返回不存在的條件

function condition(fruit, quantity) {
    const allFruits = ['apple','banana','peach'，'Strawberry','orange'];
 
    if (!fruit) throw new Error('No fruit!');

    if (allFruits.includes(fruit)) { 
        console.log(fruit); 

        if (quantity > 10) { 
            console.log(quantity); 
        }

    } 
}     

通過反轉條件和提早返回，我們可以進一步減少嵌套：

function condition(fruit, quantity) {
    const allFruits = ['apple','banana','peach'，'Strawberry','orange'];
 
    if (!fruit) throw new Error('No fruit!');

    if (!allFruits.includes(fruit)) return ;

    console.log(fruit)

    if (quantity > 10) { 
        console.log(quantity); 
    }
}  

 

三、使用默認的函數參數和解構

例子：

function condition(fruit, quantity) {
  if (!fruit) return;
  const q = quantity || 1; 

  console.log(`We have ${q} ${fruit}!`);
}

condition('banana'); // We have 1 banana!
condition('apple', 2); // We have 2 apple!

使用默認參數和解構：

function condition({name} = {}, quantity = 1) {
  console.log (name || 'unknown');
}

condition(undefined); // unknown
condition({ }); // unknown
condition({ name: 'apple', color: 'red' }); // apple

 

四、選擇 Map 或對象字面量，而不是 Switch 語句

例子：

function condition(color) {
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

condition(null); // []
condition('yellow'); // ['banana', 'pineapple']

上面的代碼似乎沒有什么問題，但我發現它相當冗長。同樣的結果可以通過對象字面量和更簡潔的語法來實現：

對象字面量：

const fruitColor = {
   red: ['apple', 'strawberry'],
   yellow: ['banana', 'pineapple'],
   purple: ['grape', 'plum']
};

function condition(color) {
  return fruitColor[color] || [];
}

 

使用 Map 實現相同效果：

const fruitColor = new Map()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum']);

function condition(color) {
  return fruitColor.get(color) || [];
}

 

使用 Array.filter 

const fruits = [
   { name: 'apple', color: 'red' },
   { name: 'strawberry', color: 'red' },
   { name: 'banana', color: 'yellow' },
   { name: 'pineapple', color: 'yellow' },
   { name: 'grape', color: 'purple' },
   { name: 'plum', color: 'purple' }
];

function condition(color) {
 return fruits.filter(f => f.color == color);
}

 

五、所有或部分使用 Array.every & Array.some 的條件 

例子：

檢查所有水果都為紅色：

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];

function condition() {
  let isAllRed = true;

  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() {

  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 condition() {

  const isAnyRed = fruits.some(f => f.color == 'red');

  console.log(isAnyRed); // true
}

 

 

 

隨筆整理自

　　http://blog.jobbole.com/114671/

感謝博主分享！