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;
}, [[], []]);