OTT 前端技术

每个JavaScript开发人员都应该知道的小技巧

众所周知JavaScript拥有很多怪癖。本文将介绍大量JavaScript优化小技巧，它们可以帮助我们编写更好的代码

多个字符串检查

假设我们需要检查一个字符串是否等于多个值之一，多个if判断会让人崩溃。幸运的是，JavaScript有一个内置方法可以帮我们解决

  // 普通
  const isExist = (letter) => {
    if (
      letter === "a" ||
      letter === "b" ||
      letter === "c" 
    ) {
      return true;
    }
    return false;
  };

  // 简写
  const isExist = (letter) =>["a", "b", "c"].includes(letter);

For-of 和 For-in 循环

For-of和For-in循环是迭代数组或对象的好方法，而不必手动跟踪键或者索引

• For-of

    const arr = [1, 2, 3, 4, 5];
  
    // 普通
    for (let i = 0; i < arr.length; i++) {
      const element = arr[i];
      // ...
    }
    // 简写
    for (const element of arr) {
      // ...
    }
  

• For-in

    const obj = { a: 1, b: 2, c: 3 };
  
    // 普通
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      const value = obj[key];
      // ...
    }
    // 简写
    for (const key in obj) {
      const value = obj[key];
      // ...
    }
  

空值判断

如果要检查变量是null、undefined、0、""、false、NaN，可以使用逻辑非运算符一次检查所有变量，而无需编写多个条件

  // 普通
  const isFalsey = (value) => { 
    if ( 
      value === null || 
      value === undefined || 
      value === 0 || 
      value === false || 
      value === NaN | |
      value === "" 
    ) {
      return true
    }
    return false
  };

  // 简写 
  const isFalsey = (value) => !value;

三元运算符

这是编写简洁if-else语句的好方法。可以使用它来简洁代码

  // 普通
  let info;
  if (value < minValue) {
    info = "Value is too small";
  } else if (value > maxValue) {
    info = "Value is too large";
  } else {
    info = "Value is in range";
  }

  // 简写
  const info = value < minValue ? "Value is too small" : value >  maxValue ? "Value is too large" : "Value is in range";

条件调用函数

三元运算符,还可以根据条件确定调用哪个函数

  function f1() { }
  function f2() { }
  // 普通
  if (condition) {
    f1();
  } else {
    f2();
  }

  // 简写
  (condition ? f1 : f2)();

Switch

Switch通常可以使用以键作为开关、值作为返回值的对象进行优化

  const dayNumber = new Date().getDay();
  // 普通
  let day;
  switch (dayNumber) {
    case 0:
      day = "Sunday";
      break;
    case 1:
      day = "Monday";
      break;
    case 2:
      day = "Tuesday";
      break;
    case 3:
      day = "Wednesday";
      break;
    case 4:
      day = "Thursday";
      break;
    case 5:
      day = "Friday";
      break;
    case 6:
      day = "Saturday";
  }

  // 简写
  const days = {
    0: "Sunday",
    1: "Monday",
    2: "Tuesday",
    3: "Wednesday",
    4: "Thursday",
    5: "Friday",
    6: "Saturday",
  };
  const day = days[dayNumber];

默认值

"||"操作可以为变量设置默认值

  // 普通
  let name;
  if (user?.name) {
    name = user.name;
  } else {
    name = "Anonymous";
  }
  // 简写
  const name = user?.name || "Anonymous";

用 && 替换 if true 语句

  // 普通
  if (callback) { callback() }

  // 简写
  callback && callback()

使用数组解构交换值

交换值从未如此简单

  let a = 5, b = 8;
  // 普通
  let c = a, a = b, b = c;

  // 简写
  [a, b] = [b, a]

消除小数点

使用“~~”来消除值的小数，有助于提高性能

  // 普通
  math.round(math.random * 100)

  // 简单
  ~~ (math.random * 100)

逗号运算符

逗号运算符 (,) 从左到右并返回最后一个操作数的值

  for(let i = 0, j = 0; i < 10, j < 6; i++, j++) {
    console.log(i + j) 
  }

合并数组

Array.concat() 函数会在创建单独的新数组时消耗大量内存

  var array1 = [1, 2, 3],
      array2 = [4, 5, 6];

  // 普通
  array1.concat(array2)

  // 更优
  Array.push.apply(arr1, arr2)

使用splice删除数组元素

使用 splice 而不是 delete, 它会删除对象属性，但不会重新索引数组或更新其长度

  let myArray = ["a", "b", "c", "d"] 
  // 错误
  delete myArray[2]

  // 更优
  myArray.splice(0, 2) ["a", "b"]

获取数组中的最后一项

slice是跟聪明的选择

  let  array = [1, 2, 3, 4, 5, 6]; 

  // 普通
   array[array.length - 1]

  // 简写
  array.slice(-1)

删除重复值

忘记for循环

  const array  = [5,4,7,8,9,2,7,5];
  // 普通
  array.filter((item,idx,arr) => arr.indexOf(item) === idx);

  // 简写
  const nonUnique = [...new Set(array)];

数组进行排序

内置的方法sort()是个不错的解决方案

• 排序字符串数组

    const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
    stringArr.sort();
    // log: ["Joe", "Kapil", "Musk", "Steve"]
  

• 排序数字数组

    const array  = [40, 100, 1, 5, 25, 10];
    array.sort((a,b) => a-b);
    // log: [1, 5, 10, 25, 40, 100]
  
    array.sort((a,b) => b-a);
    // log: [100, 40, 25, 10, 5, 1]
  

• 排序对象数组

    const objectArr = [ 
      { first_name: 'Lazslo', last_name: 'Jamf'     },
      { first_name: 'Pig',    last_name: 'Bodine'   },
      { first_name: 'Pirate', last_name: 'Prentice' }
    ];
    objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
  
    // log: [{…}, {…}, {…}]
    0: {first_name: "Pig", last_name: "Bodine"}
    1: {first_name: "Lazslo", last_name: "Jamf"}
    2: {first_name: "Pirate", last_name: "Prentice"}
    length: 3