juejin_編寫高質量可維護的代碼之優化邏輯判斷(轉載)

Posted on | In | |

編寫高質量可維護的代碼之優化邏輯判斷

這篇主要是看不同寫法，不一定真的好

學習自(純紀錄自己學了甚麼，非營利)

https://juejin.im/post/6859125809655840776

嵌套優化

製造一個函數當他是紅色水果時打印出紅色水果，如果他是紅色水果數量又大於10打印數量大於10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function supply(fruit, quantity) {
    const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
    // 条件 1: 水果存在
    if(fruit) {
        // 条件 2: 属于红色水果
        if(redFruits.includes(fruit)) {
            console.log('红色水果');
            // 条件 3: 水果数量大于 10 个
            if (quantity > 10) {
                console.log('数量大于 10 个');
            }
        }
    } else {
        throw new Error('没有水果啦!');
    }
}

由於嵌套層級有三層，維護可能會很困難且不直觀，我們可以想辦法把嵌套變成一級

附註: 個人覺得這個指示在提供想法

1
2
3
4
5
6
7
8
9
10
11
12
function supply(fruit, quantity) {
    const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
    if(!fruit) throw new Error('没有水果啦'); // 条件 1: 当 fruit 无效时，提前处理错误
    if(!redFruits.includes(fruit)) return; // 条件 2: 当不是红色水果时，提前 return
    
    console.log('红色水果');
    
    // 条件 3: 水果数量大于 10 个
    if (quantity > 10) {
        console.log('数量大于 10 个');
    }
}

多條件分支的優化處理

多種條件判斷

  1. 最直覺且最冗的寫法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function pick(color) {
      // 根据颜色选择水果
      if(color === 'red') {
          return ['apple', 'strawberry']; 
      } else if (color === 'yellow') {
          return ['banana', 'pineapple'];
      } else if (color === 'purple') {
          return ['grape', 'plum'];
      } else {
          return [];
      }
    }

  2. 用switch優化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function pick(color) {
        switch (color) {
          case 'red':
    		return ['apple', 'strawberry'];
          case 'yellow':
    		return ['banana', 'pineapple'];
          case 'purple':
    		return ['grape', 'plum'];
          default: 
          	return []  
        }
    }

可讀性

這裡利用 return fruitObj[color] || [] 創造else

  1. 透過Object key

    1
    2
    3
    4
    5
    6
    7
    8
    function pick(color) {
      const fruitObj = {
        red: ['apple', 'strawberry'],
        yellow: ['banana', 'pineapple'],
        purple: ['grape', 'plum']
      }
      return fruitObj[color] || []
    }

  2. 透過Map

    使用Map 數據結構，真正的(key, value) 鍵值對結構；

    1
    2
    3
    4
    5
    6
    7
    function pick(color) {
      const fruitColor = new Map()
        .set('red', ['apple', 'strawberry'])
        .set('yellow', ['banana', 'pineapple'])
        .set('purple', ['grape', 'plum'])
      return fruitColor.get(color) || []
    }

  3. 甚至可以透過filter

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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 pick(color) {
      return fruits.filter(f => f.color == color);
    }

判斷數組所有元素是否都符合某個條件

如果沒看這篇文章我可能會用filter

全部的水果都要是紅色

  1. 透過外人監視

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const fruits = [
        { name: 'apple', color: 'red' },
        { name: 'banana', color: 'yellow' },
        { name: 'grape', color: 'purple' }
      ];

    function match() {
      let isAllRed = true; // 外人

      // 判断条件：所有的水果都必须是红色
      for (let f of fruits) {
        if (!isAllRed) break;
        isAllRed = (f.color === 'red');
      }

      console.log(isAllRed); // false
    }

  2. 使用數組新特性every

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const fruits = [
        { name: 'apple', color: 'red' },
        { name: 'banana', color: 'yellow' },
        { name: 'grape', color: 'purple' }
      ];

    function match() {
      // 条件：所有水果都必须是红色
      const isAllRed = fruits.every(f => f.color == 'red');

      console.log(isAllRed); // false
    }

判斷數組是否有某一項滿足條件

只需一種水果紅色

使用some

1
2
3
4
5
6
7
8
const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];

// 条件：是否有红色水果 
const isAnyRed = fruits.some(f => f.color == 'red');

函數默認參數

  1. 不知道有默認參數的設定

    1
    2
    3
    4
    5
    6
    7
    const buyFruit = (fruit,amount) => {
        if(!fruit){
            return
      }
      amount = amount || 1;
      console.log(amount)
    }

  2. 使用默認

    1
    2
    3
    4
    5
    6
    const buyFruit = (fruit,amount = 1) => {
        if(!fruit){
            return
      }
      console.log(amount,'amount')
    }

    注意!! :

    兩種方式不一樣，使用第二種只有undefined才是1

    1
    2
    3
    4
    5
    6
    7
    buyFruit1('apple', '');  // 1
    buyFruit1('apple', null);  // 1
    buyFruit1('apple');  // 1

    buyFruit2('apple', '');  // ''
    buyFruit2('apple', null);  //null 
    buyFruit2('apple');  // 1