ES11引入了两个新的操作符，包括可选操作链运算符和空值合并运算符。这两个操作符的引入简化了在 JavaScript 中进行空值处理的难度。本文将探讨这两个操作符的区别，以及如何使用它们来提高我们的前端开发效率。
什么是可选操作链？
可选操作链 ?. 是一种新的操作符，它可以减少在 JavaScript 中处理空值所需的代码量。在操作过程中，如果遇到空值，它会自动停止执行，而不会抛出错误。
举个例子，假设我们有一个对象，它有可能包含一个可选的属性，如下所示：
const user = {
name: 'Alice',
address: {
city: 'Shanghai'
}
}如果我们想访问用户的城市属性，我们通常会写这样的代码：
const city = user.address && user.address.city;
这段代码虽然简单，但是需要多次判断用户对象中的每个嵌套属性是否存在。使用可选操作链运算符，我们可以改写上述代码：
const city = user.address?.city;
如果 user.address 对象为空值，那么整个表达式将返回 undefined，而不会抛出错误。
什么是空值合并运算符？
空值合并运算符 ?? 是另一种新的操作符，它可以在左侧的值为 null 或 undefined 时返回右侧的默认值。
假设我们有一个变量 value，如果它的值为空值，那么我们希望使用一个默认值来代替它。在 ES11 之前，通常会使用三元运算符来实现这一功能：
const result = value !== null && value !== undefined ? value : defaultValue;
使用空值合并运算符，我们可以将上述代码改写为：
const result = value ?? defaultValue;
如果 value 的值为 null 或 undefined，那么表达式将返回 defaultValue，否则将返回 value 的值。
可选操作链和空值合并运算符的区别
可选操作链和空值合并运算符看起来很相似，但它们有一些重要的区别：
- 可选操作链只会在属性或函数存在的情况下执行，而空值合并运算符会在左侧值为 null 或 undefined 时执行。
- 使用空值合并运算符时，默认值可以是任何类型值，而使用可选操作链时默认值必须是属性或函数。
- 可选操作链可以由多个可选属性组合而成，如
user?.address?.city，而空值合并运算符只能处理一个值。
如何使用可选操作链和空值合并运算符
使用可选操作链和空值合并运算符可以让我们在处理空值时更加简洁明了。例如：
// 旧版本中的写法 const city = user && user.address && user.address.city ? user.address.city : 'Shanghai'; // 新版本中的写法 const city = user?.address?.city ?? 'Shanghai';
对于复杂的对象访问，可以使用可选操作链来编写更简洁的代码。例如：
const street = user?.address?.city?.street ?? 'N/A';
这个例子中，我们使用可选操作链来访问用户对象的 address.city.street 属性。如果该属性不存在或为空值，整个表达式将返回 'N/A' 字符串。
在处理函数时，我们可以使用可选操作链来处理可选参数：
function log(message) {
console.log(message ?? 'Default message');
}
log(); // 输出 "Default message"
log('Hello, World!'); // 输出 "Hello, World!"在上面的例子中，我们使用空值合并运算符来设置可选参数的默认值。
结论
ES11 引入了可选操作链和空值合并运算符，这使得在 JavaScript 中处理空值变得更加简洁明了。可选操作链运算符可以让我们在访问嵌套属性和调用嵌套函数时减少空值判断的数量，而空值合并运算符可以在左侧值为空值时提供默认值。在实际开发中，我们可以利用这两个操作符来提高我们的代码效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f24370a44b36ee5765323b