JavaScript 的幾個小技巧

JavaScript 的幾個小技巧

1. 儘早 return

function transformData(rawData) {
  // check if no data
  if (!rawData) {
    return [];
  }

  // actual function code goes here
  return rawData.map((item) => item);
}

將無效的用例儘早返回，避免意外和沒必要要的代碼處理。

2. 用對象映射方式替代分支語句

function getDrink (type) {
  if (type === 'coke') {
    type = 'Coke';
  } else if (type === 'pepsi') {
    type = 'Pepsi';
  } else if (type === 'lemonade') {
    type = 'Lemonade';
  } else if (type === 'fanta') {
    type = 'Fanta';
  } else {
    // acts as our "default"
    type = 'Unknown drink!';
  }
  return 'You\'ve picked a ' + type;
}

// Object literal
function getDrink (type) {
  var drinks = {
    'coke': 'Coke',
    'pepsi': 'Pepsi',
    'lemonade': 'Lemonade',
    'default': 'Default item'
  };
  return 'The drink I chose was ' + (drinks[type] || drinks['default']);
}

• 分支語句的處理方式致使函數代碼量大，要覆蓋全部的邏輯分支。
• 要添加一種新的 type 就須要再添加一個分支判斷

3. 多重判斷時使用 Array.includes 或者 !~Array.indexOf()，避免過長邏輯判斷

function testFun(fruit) {
  if (fruit == 'apple' || fruit == 'strawberry' || fruit === 'cherry') {
    console.log('red');
  }
}

// ----- 改進後 ------
function testFun(fruit) {
  const fruits = ['apple', 'strawberry', 'cherry'];
  if (redFruits.includes(fruit)) {
    console.log('red');
  }
   
  // if (!~redFruits.indexOf(fruit)) {
  //   console.log('red');
  // }
}

4. 一次循環兩個數組

const exampleValues = [2, 15, 8, 23, 1, 32];
const [truthyValues, falseyValues] = exampleValues.reduce((arrays, exampleValue) => {
  if (exampleValue > 10) {
    arrays[0].push(exampleValue);
    return arrays;
  }

  arrays[1].push(exampleValue);
  return arrays;
}, [[], []]);