在前端开发中，JavaScript 是一种非常流行的语言。它是一种强类型语言，这意味着它具有非常严格的类型检查和类型转换。在开发过程中，我们经常需要检查一个值是否为 null 或 undefined，以避免运行时错误。ES2021 给出了一个新的解决方案：空值合并操作符。
1. 什么是空值合并操作符？
空值合并操作符（??）是一个新的 JavaScript 操作符，用于从两个值中选择一个非空值。如果第一个值是 null 或 undefined，则选择第二个值。如果第一个值不是 null 或 undefined，则返回第一个值。
2. 空值合并操作符的使用
下面是空值合并操作符的使用示例：
const a = null; const b = 5; const c = a ?? b; console.log(c); // 输出 5
在上面的示例中，我们定义了三个变量：a、b 和 c。变量 a 被赋值为 null，变量 b 被赋值为 5。使用空值合并操作符，我们将变量 a 和变量 b 组合起来，计算出变量 c 的值。由于变量 a 为 null，因此变量 c 的值为变量 b 的值（即 5）。
在这个示例中，空值合并操作符非常简单。但是在实际开发中，可能会遇到更复杂的情况。下面是一些更复杂的使用示例：
// javascriptcn.com 代码示例
const a = { name: "张三" };
const b = null;
const c = undefined;
const d = 0;
const name = a.name ?? "无姓名";
const age = b ?? c ?? d ?? 18;
console.log(name); // 输出 "张三"
console.log(age); // 输出 18在上面的示例中，我们定义了四个变量：a、b、c 和 d。变量 a 被赋值为一个对象，变量 b 被赋值为 null，变量 c 被赋值为 undefined，变量 d 被赋值为 0。我们使用空值合并操作符从这些变量中选择一个非空值。
在第一个示例中，我们选择了变量 a 的 name 属性作为非空值。由于变量 a 的 name 属性存在，并且不为 null 或 undefined，因此变量 name 的值为 "张三"。
在第二个示例中，我们选择了变量 b、c、d 作为备选值。由于变量 b 为 null，变量 c 为 undefined，变量 d 不为 null 或 undefined。因此，变量 age 的值为 18。
3. 空值合并操作符的指导意义
空值合并操作符可以大大简化 JavaScript 开发中的逻辑。它可以使我们在一行代码中解决许多问题。在实际开发中，我们经常需要检查一个值是否为 null 或 undefined。使用空值合并操作符，我们可以获得更简单、更易于维护的代码。
此外，空值合并操作符可以帮助我们避免一些常见的错误。在 JavaScript 中，当我们尝试从一个空对象中访问属性时，会发生运行时错误。使用空值合并操作符，我们可以轻松地检查对象是否为空，并设置默认值以避免这种错误的发生。
4. 总结
空值合并操作符是 ES2021 新增的一个 JavaScript 操作符，用于选择两个值中的非空值。在实际开发中，它可以大大简化代码，提高开发效率。在新的 JavaScript 版本中，我们应该积极地使用空值合并操作符，并将它作为一种优秀的开发实践。
例子就这样了，可以根据需要再进行修改。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6534cfc77d4982a6eba16c5f