在前端开发过程中，我们往往需要处理一些变量可能为空的情况，例如一个函数的参数，一个 API 返回的数据等。在 JavaScript 中，空值有两种：null 和 undefined。处理这些空值的代码往往会显得比较繁琐，但是在 ECMAScript 2021 中，出现了一些新特性使得处理空值变得更加优雅和方便。
新特性：Optional Chaining
Optional Chaining 是 ECMAScript 2021 中的一个新特性，它的作用就是优雅地处理可能为空的值。使用 Optional Chaining，我们可以快速判断一个变量是否存在，避免了出现 TypeError 错误。
基本语法
Optional Chaining 的基本语法就是在变量或对象属性后加上 ?，例如：
const obj = {
prop1: {
prop2: 123
}
};
console.log(obj?.prop1?.prop2); // 123
console.log(obj?.prop3?.prop4); // undefined在上面的例子中，我们使用了 Optional Chaining 来避免了访问一个不存在的属性时出现错误，如果属性存在，就会返回该属性的值，否则返回 undefined。
函数调用
除了获取属性值之外，我们也可以使用 Optional Chaining 来调用函数，例如：
const obj = {
func1: () => {
console.log('hello!');
}
};
obj?.func1?.(); // hello!
obj?.func2?.(); // undefined在上面的例子中，我们使用 Optional Chaining 来避免了调用一个不存在的函数时出现错误，如果函数存在，就会被调用，否则返回 undefined。
链式调用
除了单个变量或属性或函数调用之外，我们也可以使用 Optional Chaining 来进行链式调用，例如：
-- -------------------- ---- -------
----- --- - -
------ -
------ -- -- -
----------------------
-
-
--
---------------------- -- ------在上面的例子中，我们使用了 Optional Chaining 来避免了访问一个不存在的属性或调用一个不存在的函数时出现错误。
新特性：Nullish Coalescing
除了 Optional Chaining 之外，ECMAScript 2021 中还出现了另一个处理空值的新特性：Nullish Coalescing。Nullish Coalescing 的作用是让我们可以为变量设置一个默认值，当变量值为 null 或 undefined 时，使用默认值来代替。
基本语法
Nullish Coalescing 的基本语法就是使用 ??，例如：
const value1 = null;
const value2 = undefined;
console.log(value1 ?? 'default value'); // default value
console.log(value2 ?? 'default value'); // default value
console.log('' ?? 'default value'); // ''在上面的例子中，我们使用了 Nullish Coalescing 来代替 ||，使用空字符串作为变量值时，不会使用默认值来代替。
函数调用
除了变量赋值之外，我们也可以使用 Nullish Coalescing 来调用函数，并且为函数传递参数，例如：
function greet(name) {
console.log(`Hello, ${name ?? 'stranger'}!`);
}
greet(); // Hello, stranger!
greet('Tom'); // Hello, Tom!
greet(null); // Hello, stranger!在上面的例子中，我们使用了 Nullish Coalescing 来代替 ||，当函数的参数为 null 或 undefined 时，使用默认值 'stranger' 来代替。
示例代码
下面是一个例子，演示了如何使用 Optional Chaining 和 Nullish Coalescing 处理空值：
-- -------------------- ---- -------
----- ---- - -
----- -
----- ------
-------- ----
-
--
-------- ---------------- -
------ ------------------- -- -------- --- -----------
-
------------------------------ -- ------- --- ---------在上面的例子中，函数 getAddress 优雅地处理了可能为空的值，使用了 Optional Chaining 来访问 data.user.address，并使用了 Nullish Coalescing 来代替空值。
结论
在 ECMAScript 2021 中，Optional Chaining 和 Nullish Coalescing 为我们处理空值提供了更加优雅和方便的方式。它们可以更好地管理代码，避免了出现 TypeError 错误。如果你正在使用 ECMAScript 2021 或以上版本，我们建议你使用这些新特性来处理空值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e7a19e884a3e30f279403