ES9 中的空值合并运算符是一个非常实用的新特性，它可以帮助我们更方便地处理 undefined 和 null 值。在本文中，我们将介绍空值合并运算符的基本用法，并通过一些示例代码来说明如何使用它来避免一些常见的错误。
什么是空值合并运算符？
空值合并运算符（??）是一个二元运算符，它返回第一个非空值的操作数。如果第一个操作数的值为 null 或 undefined，则返回第二个操作数的值。空值合并运算符是一个相对较新的特性，它在 ECMAScript 2019 中被引入。
简单示例：
下面是一个简单的示例，它演示了空值合并运算符的基本用法：
// 如果 a 是 null 或 undefined，则返回默认值 1 const result = a ?? 1;
在这个例子中，如果 a 的值为 null 或 undefined，则 result 的值将为 1。
为什么需要空值合并运算符？
在 JavaScript 中，null 和 undefined 都代表着“空值”。当我们使用这些值时，有时会遇到一些问题。
下面是一个简单的例子，它演示了当我们尝试访问一个不存在的属性时会发生什么：
const myObject = {};
// 引用一个不存在的属性
const result = myObject.myProperty;
console.log(result); // undefined
// 访问一个 undefined 值的属性
const length = result.length;
console.log(length); // TypeError: Cannot read property 'length' of undefined在这个例子中，我们使 result 变量成为一个 undefined 值。当我们尝试访问它的 length 属性时，会得到一个 TypeError 错误。这是因为 undefined 值没有 length 属性。为了避免出现这种类型的错误，我们可以使用空值合并运算符：
const length = result?.length;
在这个例子中，如果 result 的值为 null 或 undefined，则 length 的值将为 null，不会引发 TypeError 错误。这意味着我们不需要在代码中手动检查 result 的值，就可以安全地访问它的属性。
其他示例
下面是另一个示例，它演示了当我们尝试从一个不存在的对象中获取属性时会发生什么：
const myObject = {};
// 引用一个不存在的对象
const otherObject = myObject.myProperty;
// 访问一个不存在的属性
const result = otherObject?.myOtherProperty;
console.log(result); // undefined在这个例子中，我们将 otherObject 变量设置为一个 undefined 值。当我们尝试访问它的 myOtherProperty 属性时，会得到一个 undefined 值。使用空值合并运算符，我们可以避免这个问题：
const result = otherObject?.myOtherProperty ?? 'default'; console.log(result); // 'default'
在这个例子中，如果 otherObject 的值为 null 或 undefined，则 result 的值将为 'default'。
总结
空值合并运算符是一个非常实用的新特性，它可以帮助我们更轻松地处理 null 和 undefined 值。我们可以使用空值合并运算符避免访问不存在的属性或变量时出现 TypeError 错误。希望本文对你有所帮助，也希望你能够在自己的项目中充分利用这个新特性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a9919eadd4f0e0ff2ef761