前端应该掌握的6个JavaScript代码优化技巧

今天说的这6个技巧可以帮助我们写出更好，更简洁，更优雅的前端JavaScript代码。

01. 字符串自动匹配

当需要检查一个值是否满足我们要求的值的时候，常用的方法是使用||和===来判断和匹配。但是如果大量使用这种判断方式，我们的代码肯定会变得非常臃肿，写起来非常累。

其实我们可以用Array.includes来帮助我们自动匹配，代码就是简洁很多。

优化前后代码如下：

// 优化前
const isConform = (letter) => {  
if (  
  letter === "a" ||  
  letter === "b" ||  
  letter === "c" ||  
  letter === "d" ||  
  letter === "e"  
) {  
  return true;  
}  
  return false;  
};

// 优化后
const isConform = (letter) =>
  ["a", "b", "c", "d", "e"].includes(letter);

02. 数据遍历

前端遍历一个数组或者对象，通常我们使用for-of和for-in会使代码看起来更简洁。而不是采用长度去遍历。

直接看代码怎么操作

一、遍历数组

优化前后代码如下：

const arr = ['a', ' b', 'c'];
// 优化前
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  console.log(element);
}

// 优化后
for (const element of arr) {
  console.log(element);
}

二、遍历对象

优化前后代码如下：

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];
  console.log(value);
}

// 优化后
for (const key in obj) {
  const value = obj[key];
  console.log(value);
}

03. 错误判断

如果要判断一个变量是否为null、undefined、0、false、NaN、''，可以使用逻辑NOT( !) 来取反来帮助我们判断，而不是用每个值===来判断。

优化前后代码如下：

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

// 优化后
const isFalsey = (value) => !value;

04. 函数调用选择

可以考虑三元运算符。

优化前后代码如下：

function f1() {}
function f2() {}

// 优化前
if (condition) {
  f1();
} else {
  f2();
}

// 优化后
(condition ? f1 : f2)();

05. 对象代替 switch/case

switch/case通常有一个case值对应一个返回值。这个结构和我们的对象类似，一个key对应一个value。其实我们可以用我们的对象替换我们的选择结构，使代码看起来更加简洁。

优化前后代码如下：

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];

06. 存在性判断

如果我们想要获取一个不确定是否存在的值，我们经常使用if判断，先判断该值是否存在，然后获取。如果它不存在，我们返回另一个值。我们可以利用||逻辑OR()的特性来优化我们的代码。

优化前后代码如下：

// 优化前
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}

// 优化后
const name = user?.name || "Anonymous";