javascript-判斷(if…else…)優化

---

1、使用Array.includes

function test(fruit){
    if(fruit == 'apple' || fruit == 'watermelon') {
        console.log('red')
    }
}

從上面的例子看，在判斷的條件較少的時候，這種寫法是沒什麼問題的，但是如果我們需要判斷更多的紅色水果，那麼就需要更多的||操作符來擴充語句。

這時候可以使用Array.includes重寫條件語句。

function test(fruit) {
  // 條件提取到陣列中
  const redFruits = ['apple','strawberry','cherry','watermelon']
  if(redFruits.includes(fruit)){
    console.log('red')
  }
}
test('apple')

2、使用return語句減少if巢狀

• 如果沒有水果，丟擲錯誤
• 水果quantity引數，如果超過10，則列印資訊

function test(fruit, quantity){
  const redFruits = ['apple','strawberry','cherry','watermelon']
  // 條件1，fruit必須有值
  if(fruit){
    // 條件2，必須為紅色
    if(redFruits.includes(fruit)){
      console.log('red')
    }
    // 條件3，數量必須大於10
    if(quantity>10){
      console.log('big quantity')
    }
  }else {
    throw new Error('No fruit!')
  }
}
test(null) // No fruit
test('apple') // red
test('apple', 20) // red, big quantity

從上面的程式碼來看，首先一個if/else過濾無效條件，3層if語句巢狀。

用return改造，將無效的條件提前篩選出來。

function test(fruit, quantity){
  const redFruits = ['apple', 'watermelon','cherry','strawberry']
  if(!fruit) throw new Error('No fruit')
  if(redFruits.includes(fruit)){
    console.log('red')
  }
  if(quantity>10){ console.log('big quantity') }
  
}

或者

function test(fruit, quantity){
  const redFruits = ['apple','strawberry','cherry','watermelon']
  if(!fruit) throw new Error('No fruit!')
  if(!redFruits.includes(fruit)) return
  console.log('red')
  if(quantity>10){
    console.log('big quantity')
  }
}

3、函式的預設引數和解構

在函式中，我們經常要對null和undefined作出預設值的處理。

function test(fruit,quantity){
    if(!fruit) return;
    const q = quantity || 1;
    console.log(`We have ${q} ${fruit}!`)
}
test('banana') // We have 1 banana
test('apple', 2) // We have 2 apple

用es6的預設引數方式來改寫，直接給函式引數分配一個預設值：

function test(fruit,quantity=1){
    if(!fruit) return;
    console.log(`We have ${q} ${fruit}!`)
}
test('banana') // We have 1 banana
test('apple', 2) // We have 2 apple

如果傳入的引數為物件，是否可以指定預設引數呢？

function test(fruit){
    if(fruit && fruit.name) {
        console.log(fruit.name);
    } else {
        console.log('unknown')
    }
}
test(undefined) // unknown
test({}) //unknown
test({name:'apple',color:'red'}) // apple

我們想要的是如果 fruit.name 存在則列印水果名稱，否則將列印 unknown 。我們可以使用預設函式引數和解構(destructing) 來避免 fruit && fruit.name 這樣的檢查。

// 只獲得name屬性
// 引數預設分配空物件
function test({name}={}){
   console.log(name || 'unknown')
}
test(undefined) // unknown
test({}) //unknown
test({name:'apple',color:'red'}) // apple

由於我們只需要來自 fruit 的 name 屬性，我們可以使用 {name} 來解構引數，然後我們可以在程式碼中使用 name 作為變數來取代fruit.name。

我們還將空物件 {} 指定為預設值。 如果我們不這樣做，你將在執行行測試時遇到test(undefined) – Cannot destructure property name of ‘undefined’ or ‘null’.(無法解析’undefined’或’null’的屬性名稱)。 因為 undefined中 沒有 name 屬性

4、Map/Object替代switch

function test(color) {
// 使用 switch case 語句，根據顏色找出對應的水果
    switch (color) {
        case 'red':
            return ['apple', 'strawberry'];
        case 'yellow':
            return ['banana', 'pineapple'];
        case 'purple':
            return ['grape', 'plum'];
        default:
            return [];
    }
}
//測試結果
test(null); // []
test('yellow'); // ['banana', 'pineapple']

用object字面量可以實現相同的結果，減少程式碼量。

const fruitColor = {
    red: ['apple','strawberry'],
    yellow: ['banana','pineapple'],
    purple: ['grape', 'plum']
 }
 function test(color){
    return fruitColor[color] || []
 }
}

用Map的實現方式：

const fruitColor = new Map()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum']);
function test(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 test(color) {
    // 使用 Array filter  ，根據顏色找出對應的水果
    return fruits.filter(f => f.color == color); // 返回的是一個陣列
}

5、Array.every 和 Array.some 來處理全部/部分滿足條件

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
];
function test() {
    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 test() {
    // 條件：簡短方式，所有的水果都必須是紅色
    const isAnyRed = fruits.some(f => f.color == 'red');
    console.log(isAnyRed); // true
}