随着前端技术的不断发展，JavaScript 也在不断更新和完善。ES2020 是 ECMAScript 的最新版本，其中包含了一些非常有用的新特性。本文将介绍其中两个新特性：nullish coalescing operator 和 optional chaining，以及它们的用法和指导意义。
nullish coalescing operator
在 JavaScript 中，有时候我们需要使用默认值来避免出现 undefined 或 null 的情况。通常情况下，我们可以使用 || 运算符来实现这个功能，例如：
const foo = null || 'default value'; console.log(foo); // 输出 'default value'
但是，当变量的值为 falsy 值时，|| 运算符并不能正确地处理。例如：
const foo = '' || 'default value'; console.log(foo); // 输出 ''
在这种情况下，我们需要使用 nullish coalescing operator（?? 运算符）来实现正确的默认值处理。例如：
const foo = '' ?? 'default value'; console.log(foo); // 输出 'default value'
nullish coalescing operator 只有在变量的值为 null 或 undefined 时才会返回默认值，否则返回变量的值。这样可以避免出现 falsy 值的情况。
optional chaining
在 JavaScript 中，我们经常需要访问对象的属性或方法。但是，如果对象的某个属性不存在，我们就会遇到 undefined 的情况。例如：
const foo = {
bar: {
baz: 'value'
}
};
console.log(foo.bar.baz); // 输出 'value'
console.log(foo.bar.qux); // 抛出异常在这种情况下，我们需要使用 if 语句或三元运算符来判断属性是否存在。例如：
-- -------------------- ---- -------
----- --- - -
---- -
---- -------
-
--
-- -------- -- ------------ -
-------------------------
- ---- -
-------------------- --------
-ES2020 中新增了 optional chaining（?. 运算符），可以方便地处理这种情况。例如：
const foo = {
bar: {
baz: 'value'
}
};
console.log(foo.bar?.baz); // 输出 'value'
console.log(foo.bar?.qux); // 输出 undefined，不会抛出异常optional chaining 可以在访问属性或方法时，自动判断属性是否存在，避免了出现 undefined 的情况。这样可以使代码更加简洁和易读。
总结
ES2020 中的 nullish coalescing operator 和 optional chaining 是非常有用的新特性，可以帮助我们更好地处理变量的默认值和对象属性的访问。使用这些新特性可以使代码更加简洁、易读和健壮。建议开发者在实际开发中积极使用这些新特性，提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658c236feb4cecbf2d183b6b