七种 JS 代码优化方式（译）

dinglin
137 阅读3分钟

每种语言都有其独特之处，而 JavaScript 作为最广泛使用的编程语言也不例外。本篇博客文章将讨论一些 JavaScript 通用优化技巧，帮助你编写更好的代码，确保你在遇到它们时不会只有以下方式编写：

1. 回退值

回退值用于显示一些调整。

如果值为 [] 或 0，则使用逻辑 OR || 无法得到预期的结果。

更好的解决方案是：如果定义的值为 null 或 undefined，则只使用回退值。

// 较长
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}

// 较短
const name = user?.name ?? "Anonymous";

2. 简洁 Switch 语句

长的 switch 语句通常可以通过使用一个以键作为切换开关、以值作为返回值的对象来进行最大化。

const dayNumber = new Date().getDay();
// Lengthy
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";
}
// Shortly
const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];
// Or
const days = `Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday`.split(
    ","
);
const day = days[dateNumber];

译注：设计模式中的策略模式在 JS 中的一种应用

3. 函数调用

你也可以使用二元操作符根据条件决定调用哪个函数。

函数的调用模式必须相同，否则你将面临错误。

// 较长
function f1() {
  // ...
}
function f2() {
  // ...
}

// 较短
condition ? f1() : f2();

4. 多个字符串检查

经常需要检查一个字符串是否等于多个值之一，这可能会很烦人。

幸运的是，JavaScript 有一种方法可以帮助你解决这个问题。

// 较长
const isVowel = (letter) => {
  return (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  );
};

// 较短
const isVowel = letter => /[aeiou]/i.test(letter);

译注：也可以使用上一个议题的方式，用策略模式

const vowel = ['a', 'e', 'i', 'o', 'u']
const isVowel = letter => vowel.includes(letter);

5. 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];
  // ...
}

6. 错误校验

如果你想检查一个变量是否为 null、undefined、0、false、NaN 或空字符串，你可以使用逻辑非 (!) 运算符来进行检查，而无需使用多个效果。

这使得验证变量是否包含有效数据变得简单。

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

// 较短
const isFalsey = (value) => !value;

译注：同策略模式，如果有更多的错误值可以统一写到策略内部，如只是如上几个特殊值，该方式会更优雅

7. 三元操作符

作为一名 JavaScript 开发者，你一定了解三元操作符。

它是编写简洁的 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";

译注：这种写法仁者见仁智者见智，三元确实可以减少代码量，但是在阅读代码体验上个人感觉不如 if-else 更直接

这就是所有的内容了，朋友们！感谢你抽出时间阅读本文。

原文地址：7 JavaScript Powerful Optimization Tricks You Need To Know

avatar
文章
阅读
粉丝