在前端开发中，我们经常遇到处理 null 和 undefined 的情况，如何优雅地处理这些问题是我们需要思考和解决的。在 ES11 中，新增了 nullish coalescing 操作符，可以很好地应对这些问题。
什么是 nullish coalescing 操作符
nullish coalescing 操作符（??）是一个逻辑操作符，其目的是为了在给定的两个值中选择第一个非nullish（即不是 null 或 undefined）的值。如果第一个值是 null 或 undefined，则返回第二个值。
语法如下：
a ?? b
其中，a 和 b 是两个操作数。如果 a 不是 null 或 undefined，那么返回 a；否则返回 b。
nullish coalescing 和 || 操作符的区别
在 JavaScript 中，我们通常使用 || 操作符处理 null 和 undefined。但是，nullish coalescing 操作符与 || 操作符有所不同。
当 a 是 0、''、false 等 falsy 值时，|| 操作符也会返回第二个值，因为这些值会被视为 false。而 nullish coalescing 操作符只会在 a 的值为 null 或 undefined 时返回第二个值。
例如：
const a = 0; const b = a || 10; // 10 const c = a ?? 10; // 0
nullish coalescing 的使用场景
nullish coalescing 操作符可以用于许多场景。下面列举一些常见的应用。
1. 设置默认值
通常我们需要为变量设置默认值，如果该变量的值为 null 或 undefined，我们需要使用 nullish coalescing 操作符来设置默认值。
例如：
const name = null; const displayName = name ?? 'Guest'; console.log(displayName); // 'Guest'
2. 防止引用 null 或 undefined
在处理嵌套的对象和数组时，我们可能需要避免引用 null 或 undefined。使用 nullish coalescing 操作符可以确保我们使用的值不是 null 或 undefined。
例如：
const person = {
name: '张三',
age: null
};
const age = person.age ?? 0;
console.log(age); // 03. 函数参数默认值
我们可以使用 nullish coalescing 操作符为函数参数设置默认值。
例如：
function greet(name) {
const displayName = name ?? 'Guest';
console.log(`Hello, ${displayName}!`);
}
greet(); // Hello, Guest!
greet('Tom'); // Hello, Tom!总结
本文介绍了 nullish coalescing 操作符的概念，使用场景以及与 || 操作符的区别。nullish coalescing 操作符可以帮助我们优雅地解决处理 null 和 undefined 的问题，提高代码的可读性和可维护性。希望本文能够对前端开发者有所指导和帮助。
示例代码
-- -------------------- ---- ------- ----- - - ----- ----- - - ---------- ----- - - -- ----- - - --- ----- - - ------ ------------- -- --- -- --------- ------------- -- --- -- - ------------- -- --- -- -- ------------- -- --- -- -----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502fd1195b1f8cacd021925