JavaScript 的幾個小技巧

arashicage 發(fā)布于2019-08-23 18:38 / 3161人閱讀

摘要：的幾個小技巧盡早將無效的用例盡早返回，避免意外和不必要的代碼處理。要添加一種新的就需要再添加一個分支判斷多重判斷時使用或者，避免過長邏輯判斷改進后一次循環(huán)兩個數(shù)組

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

分支語句的處理方式導(dǎo)致函數(shù)代碼量大，要覆蓋所有的邏輯分支。

要添加一種新的 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. 一次循環(huán)兩個數(shù)組

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