引言
随着 JavaScript 生态圈的日益壮大，前端开发技术也在不断发展。ES10（ES2019）是一个很重要的版本，其中引入了两个新的操作符：Optional Chaining 和 Nullish Coalescing。这两个操作符都是用来处理 JavaScript 中 undefined 和 null 的情况，非常实用。本文将介绍 Optional Chaining 和 Nullish Coalescing 的用法和使用场景。
Optional Chaining（可选链式调用）
可选链式调用是一种优雅地处理对象属性中可能不存在的值的方法。在 JavaScript 中访问一个对象属性时，如果该属性不存在，会抛出一个 TypeError 错误。在某些情况下，我们需要处理这种情况，以免代码中断运行。
在 ES10 中，我们可以使用可选链式调用来处理这种情况。可选链式调用使用问号运算符 ?.，用来判断对象属性是否存在。如果属性存在，则返回该属性的值。如果属性不存在，则返回 undefined，而不会抛出错误。
示例代码：
// javascriptcn.com 代码示例
const obj = {
name: 'Alice',
age: 18,
address: {
city: 'Shanghai'
}
};
console.log(obj.address.city); // Shanghai
console.log(obj.phone.number); // TypeError: Cannot read property 'number' of undefined
console.log(obj.address?.city); // Shanghai
console.log(obj.phone?.number); // undefined可以看到，使用可选链式调用可以很好地处理对象属性不存在的情况，避免了代码中断运行。
可选链式调用不仅仅可以用来访问对象属性，还可以用来调用对象的方法。如果方法不存在，则返回 undefined，而不会抛出错误。
示例代码：
// javascriptcn.com 代码示例
const obj = {
sayHello: function(name) {
console.log(`Hello, ${name}!`);
}
};
obj.sayHello('Bob'); // Hello, Bob!
obj.sayGoodbye('Alice'); // TypeError: obj.sayGoodbye is not a function
obj.sayGoodbye?.('Alice'); // undefined可以看到，当我们使用可选链式调用来调用 sayGoodbye 方法时，返回值为 undefined，而不会抛出错误。
Nullish Coalescing（空值合并）
空值合并操作符是一种用来处理变量为空值（null 或 undefined）的情况的方法。在 JavaScript 中，当我们需要判断一个变量是否为空值时，通常情况下会使用逻辑运算符 ||（或）来进行判断。例如：
const defaultValue = 'hello';
let value;
if (value || value === '') {
console.log(value);
} else {
console.log(defaultValue);
}在上面的代码中，我们使用逻辑运算符 || 来判断 value 是否为空值。如果为空值，则使用 defaultValue 的值。但是，逻辑运算符 || 的判断条件是“有值则为真”，这就有可能出现不符合预期的情况，例如当 value 为 0 或 false 时，也会被认为为空值。
在 ES10 中，我们可以使用空值合并操作符 ?? 来处理这种情况。空值合并操作符的判断条件是“为空值则为真”，即只有当变量为 null 或 undefined 时，才会使用默认值。例如：
const defaultValue = 'hello'; let value; console.log(value ?? defaultValue); // hello value = ''; console.log(value ?? defaultValue); // (空字符串)
使用空值合并操作符不仅可以避免不符合预期的情况，还可以简化代码的书写，使得代码更加清晰易懂。
总结
在本文中，我们介绍了 ES10 中引入的两个操作符：可选链式调用和空值合并操作符。这两个操作符都是用来处理 JavaScript 中 undefined 和 null 的情况，非常实用。使用这些操作符可以使我们的代码更加优雅、简洁、健壮。在编写代码时，我们应该根据实际情况选择合适的操作符，并避免滥用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6545f6d47d4982a6ebfb0ddf