随着前端技术的不断发展，JavaScript 作为其中的一门核心语言，也在不断的更新和完善。在 ES11 中，Nullish Coalescing 和 Optional Chaining 两个新的特性成为了 JavaScript 中的重要功能，它们解决了 JavaScript 中常见的一些问题和痛点，为前端开发带来更高效、便捷和可靠的编程体验。
Nullish Coalescing
在 JavaScript 中，我们常常需要对变量进行判空处理，以避免代码出现错误或异常。以前的做法一般是使用 || 运算符来进行判断，例如：
const count = 0; console.log(count || 10); // 输出 10
这里，|| 运算符会尝试将两个操作数转换为布尔类型，并返回其中一个操作数的值。如果第一个操作数为 falsy 值（比如 0、null、undefined 等），则返回第二个操作数的值。但是，如果第一个操作数为 truthy 值（比如字符串、数字等），则返回第一个操作数的值。这种做法看似简单，但是存在一些隐患，特别是当第一个操作数的值为 0 或者空字符串等 falsy 值时，会被当做缺省值而被错误忽略掉。
为了解决这个问题，Nullish Coalescing 这个新特性应运而生。它使用 ?? 运算符来进行判断，只有当第一个操作数的值为 null 或者 undefined 时，才会返回第二个操作数的值。例如：
const count = 0; console.log(count ?? 10); // 输出 0
这里，?? 运算符会在第一个操作数为 null 或者 undefined 时返回第二个操作数的值，否则返回第一个操作数的值。这种做法不仅更加简洁明了，而且更加安全可靠，可以避免很多意外的错误。
Optional Chaining
在对象的访问中，我们经常需要检查一个对象中是否有某个属性或方法，否则就返回 undefined 以避免出现错误。以前的做法一般是使用 && 运算符来进行判断，例如：
const person = {
name: 'Alice',
age: 20,
};
console.log(person.job && person.job.title); // 输出 undefined这里，&& 运算符会先判断左边的表达式是否为 truthy 值，如果是，则返回右边的值，否则返回左边的值。因此，当左边的值为 falsy 值（比如 undefined、null、空字符串等），就会返回左边的值，而不会执行右边的值。
但是，这种做法也存在一些隐患，特别是当访问的属性链比较长时，就需要一个个判断所有的属性是否存在，非常麻烦和繁琐。为了解决这个问题，Optional Chaining 这个新特性应运而生。它使用 ?. 运算符来进行检查，可以直接访问一个属性或方法，如果它存在则返回值，否则返回 undefined。例如：
const person = {
name: 'Alice',
age: 20,
};
console.log(person.job?.title); // 输出 undefined这里，?. 运算符会先检查 person.job 是否存在，如果存在，则继续访问 job.title 属性，否则返回 undefined。这种做法不仅更加简洁明了，而且可以很好地处理复杂的属性链，从而提高代码的可读性和可维护性。
示例代码
下面是一个简单的示例代码，演示了如何使用 Nullish Coalescing 和 Optional Chaining 进行变量的判空处理和对象的访问。它看起来更加简单明了，同时也具有更高的安全性和可靠性。
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
---- -
------ -----------
------- -----
--
--
----------------------------- -- -------- -- -- ----------
----- ------ - --
----- ------ - -----
----- ------ - ----------
------------------ -- ---- -- -- -
------------------ -- ---- -- -- --
------------------ -- ---- -- -- --总结
Nullish Coalescing 和 Optional Chaining 这两个新特性为 JavaScript 带来了更高效、便捷和可靠的编程体验，它们解决了 JavaScript 中常见的一些问题和痛点，特别是在变量的判空处理和对象的访问方面，能够有效地提高代码的可读性和可维护性。因此，在日常的前端开发中，建议使用这些新特性来编写更加简单明了、安全可靠的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465b02d968c7c53b065a31b