你需要知道的 6 个强大的 JavaScript 优化技巧

每种语言都有其独特性,使用最广泛的编程语言 JavaScript 也不例外。

这篇博文将讨论一些 JavaScript 通用优化技巧,这些技巧将帮助您编写更好的代码,并确保当您遍历它们时,以下内容不是您的回应:

1. Fallback Values

当需要使用一个回退值(fallback value)时,使用逻辑或(logical OR)运算符(||)可能无法达到预期的结果。

如果值为 或 0,则使用逻辑或 || 没有给你预期的结果。

bullish symbiosis 是一种更可靠的解决方案。它指的是只在定义的值为nullundefined时才使用回退值,避免了对空数组和零值的错误处理。

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

// Shortly
const name = user?.name ?? "Anonymous";

2. 简短的 Switch 方式

当遇到较长的switch语句时,一种常见的优化方法是使用一个对象,其中对象的键(keys)充当不同的条件或开关(switches),而值(values)则对应于与每个条件或开关相关的期望返回值或操作。通过使用这种方法,可以最大程度地减少长switch语句的复杂性和冗长,提高代码的可读性和维护性。

举个例子来说明这种方法的应用。假设我们有一个函数,根据不同的条件返回不同的结果:

js
function getResult(condition) {
  switch (condition) {
    case 'A':
      return 'Result A';
    case 'B':
      return 'Result B';
    case 'C':
      return 'Result C';
    // 处理更多的条件...
    default:
      return 'Default Result';
  }
}

以上是使用传统的switch语句实现的。但如果有很多条件,代码会变得冗长。为了简化代码,可以使用对象来优化:

js
function getResult(condition) {
  const results = {
    'A': 'Result A',
    'B': 'Result B',
    'C': 'Result C',
    // 更多的条件和结果...
  };

  return results[condition] || 'Default Result';
}

通过使用对象,我们可以将条件和对应的结果以键值对的形式组织起来。在函数中,我们直接使用条件作为对象的键来获取对应的结果值。如果找不到匹配的结果,就返回默认的结果。

这种使用对象代替长switch语句的方法可以使代码更加简洁、易于扩展和维护。

3. 函数调用

你可以使用二元运算符(binary operator)根据条件来决定调用哪个函数。

这里提到的函数调用模式必须相同,否则你可能会遇到错误。

具体来说,使用二元运算符可以根据条件选择调用不同的函数。例如,可以使用三元条件运算符(ternary conditional operator)来在条件满足时调用一个函数,否则调用另一个函数。示例代码如下:

js
condition ? function1() : function2();

上述代码中,当条件满足时,会调用function1();否则,会调用function2()。

然而,需要注意的是,这两个函数的调用模式必须相同。也就是说,它们的参数类型、个数以及返回值类型应该保持一致。如果两个函数的调用模式不一致,就会导致错误。

举个例子来说明这个问题。假设我们有两个函数,一个用于计算两个数字的和,另一个用于打印字符串:

js
function sum(a, b) {
  return a + b;
}

function printString(str) {
  console.log(str);
}

这两个函数的调用模式是不同的:sum函数接受两个数字参数并返回它们的和,而printString函数接受一个字符串参数并打印它。如果尝试使用二元运算符在不同的条件下调用这两个函数,就会导致错误:

js
condition ? sum(2, 3) : printString("Hello"); // 错误!调用模式不一致

因此,使用二元运算符在不同的条件下调用函数时,需要确保这些函数的调用模式是相同的,以避免错误发生。

4. 多个字符串检查

在开发中经常需要检查一个字符串是否等于多个值之一的情况,而这可能会变得繁琐。

幸运的是,JavaScript提供了一种简化这种操作的方法。

在编程中,我们经常需要检查一个字符串是否等于多个预定义的值之一。例如,我们可能需要检查一个变量status是否等于"success"、"failed"或"pending"中的任意一个。

如果使用传统的if语句来实现,代码可能会变得冗长而令人沮丧:

js
if (status === "success" || status === "failed" || status === "pending") {
  // 执行相应的操作
}

为了简化这个过程,JavaScript提供了一种简洁的方法,即使用逻辑或(logical OR)运算符与数组的includes方法结合使用:

js
if (["success", "failed", "pending"].includes(status)) {
  // 执行相应的操作
}

上述代码使用了数组["success", "failed", "pending"]includes方法,它会检查数组中是否包含指定的值status。如果status等于数组中的任意一个值,条件表达式就会为真,从而执行相应的操作。

通过使用逻辑或运算符与数组的includes方法,我们可以更简洁地检查一个字符串是否等于多个值之一,避免了冗长的if语句。

因此,这段文字的意思是,当需要检查一个字符串是否等于多个预定义的值之一时,JavaScript提供了一种简洁的方式来处理这个问题。

5. 逻辑非运算符进行判断

如何检查一个变量是否为null、undefined、0、false、NaN或空字符串。使用逻辑非(Logical Not)运算符(!)可以简单地实现这一点,而无需多个判断条件。

在编程中,经常需要检查一个变量是否具有有效的数据。在这种情况下,可以使用逻辑非运算符来判断变量是否为null、undefined、0、false、NaN或空字符串。逻辑非运算符用于将一个表达式的逻辑值取反,即将真(true)变为假(false),将假变为真。

例如,如果我们想要检查变量value是否为null、undefined、0、false、NaN或空字符串,可以使用逻辑非运算符进行判断:

js
// 传统的
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};

// 优雅的
const isFalsey = (value) => !value;

6. 三元运算符

三元运算符(ternary operator)作为JavaScript开发者经常会遇到的一种运算符。

三元运算符是编写简洁的if-else语句的一种优秀方法。

除了可以用于编写简洁的代码外,你还可以使用它来链式地检查多个条件。

三元运算符是一种可以在一行代码中实现条件判断和返回结果的运算符。它的语法形式是:条件 ? 结果1 : 结果2。如果条件为真,就返回结果1,否则返回结果2。

举个例子来说明:

js
// 传统的
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";

另外,你还可以使用三元运算符进行多个条件的链式判断。例如:

js
const num = 10;
const result = num > 0 ? "Positive" : num < 0 ? "Negative" : "Zero";

上述代码首先判断num是否大于0,如果是,则返回字符串"Positive";否则,再判断num是否小于0,如果是,则返回字符串"Negative";否则,返回字符串"Zero"。

通过链式使用三元运算符,可以根据多个条件快速地确定要返回的结果。

因此,最后一段的意思是,作为JavaScript开发者,你可能已经遇到过三元运算符。它是一种编写简洁的if-else语句的优秀方法。你可以使用三元运算符编写简洁的代码,甚至可以链式地使用它来检查多个条件。

以上就是小哥收集整理的关于javascript的一些小技巧,以后再有更牛的技巧,我再随时补充。

最后更新:2024-05-08