ECMAScript 2020 (ES11) 中引入了两个新的操作符：Optional Chaining（可选链）和 Nullish Coalescing（空值合并），它们都是为了更好地处理 JavaScript 中的 null 和 undefined 值。
可选链操作符
在 JavaScript 中，我们经常需要访问对象的属性或方法，但是当对象不存在或属性不存在时，会抛出错误。这时候我们需要进行一些判断，以避免出现错误。
在 ES11 中，我们可以使用可选链操作符 ?. 来简化这个过程。例如：
// javascriptcn.com 代码示例
let obj = {
a: {
b: {
c: 1
}
}
};
console.log(obj.a?.b?.c); // 输出 1
obj = null;
console.log(obj?.a?.b?.c); // 输出 undefined，不会抛出错误在上面的例子中，当 obj.a 或 obj.a.b 不存在时，不会抛出错误，而是返回 undefined。这样我们就不需要再进行一些额外的判断了。
可选链操作符也可以用在函数调用中。例如：
// javascriptcn.com 代码示例
let obj = {
a: {
b: {
c: function() {
return 1;
}
}
}
};
console.log(obj.a?.b?.c?.()); // 输出 1
obj = null;
console.log(obj?.a?.b?.c?.()); // 输出 undefined，不会抛出错误在上面的例子中，当 obj.a 或 obj.a.b 或 obj.a.b.c 不存在时，不会抛出错误，而是返回 undefined。
空值合并操作符
在 JavaScript 中，当一个值为 null 或 undefined 时，我们经常需要给它一个默认值。在 ES11 中，我们可以使用空值合并操作符 ?? 来简化这个过程。例如：
let a = null; let b = undefined; let c = 0; console.log(a ?? 1); // 输出 1 console.log(b ?? 2); // 输出 2 console.log(c ?? 3); // 输出 0，因为 0 不是空值
在上面的例子中，当 a 或 b 为 null 或 undefined 时，返回默认值 1 或 2。而当 c 为 0 时，不会返回默认值。
我们也可以使用空值合并操作符来设置默认值。例如：
// javascriptcn.com 代码示例
let obj = {
a: null,
b: undefined,
c: 0
};
console.log(obj.a ?? 1); // 输出 1
console.log(obj.b ?? 2); // 输出 2
console.log(obj.c ?? 3); // 输出 0
obj.a ??= 1;
obj.b ??= 2;
obj.c ??= 3;
console.log(obj.a); // 输出 1
console.log(obj.b); // 输出 2
console.log(obj.c); // 输出 0在上面的例子中，我们使用空值合并操作符来为对象的属性设置默认值。而 obj.a ??= 1 的意思是，如果 obj.a 为 null 或 undefined，则将其设置为 1。
总结
可选链操作符和空值合并操作符是 ES11 中引入的两个新的操作符，它们都是为了更好地处理 JavaScript 中的 null 和 undefined 值。使用它们可以简化代码、避免错误，并提高代码的可读性。
在使用可选链操作符时，我们需要注意它只能用于访问对象的属性或方法，不能用于访问变量或数组元素。而在使用空值合并操作符时，我们需要注意它只能用于判断 null 或 undefined 值，不能用于判断其他 falsy 值（如 false、0、'' 等）。
最后，我们可以使用这两个操作符来写出更加简洁、优雅的代码，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655ef754d2f5e1655d91a4e9