JavaScript 空值合并、可选链与空值赋值：玩转 ES11 新特性
2022-12-05 09:58:38
JavaScript 中空值处理的三大新特性：一探空值合并运算符、可选链操作符和空值赋值运算符
一、JavaScript 空值处理的痛点
在 JavaScript 的浩瀚世界里，我们不可避免地会遇到空值，它们以 undefined、null、空字符串或空对象的形式出现。当逻辑判断涉及空值时，它们会带来一系列麻烦和不确定性。想象一下，你正在构建一个需要获取用户姓名并打招呼的应用程序：
const user = {
name: 'John Doe',
};
const name = user.name;
if (name) {
console.log(`Hello, ${name}!`);
}
这段代码看起来很简单，但如果 user 对象不存在或其 name 属性为 undefined 或 null，它就会崩溃。这会给用户带来糟糕的体验，并导致难以调试的错误。
二、ES11 的空值处理新利器
为了解决这些令人头疼的空值问题，ES11 引入了三颗耀眼的明珠：空值合并运算符（??） 、可选链操作符（?.） 和空值赋值运算符（??=） 。这些新特性为 JavaScript 的空值处理带来了革命性的变化，让我们的代码更加简洁、高效和易于维护。
三、空值合并运算符（??）
空值合并运算符（??）就像一位灵巧的外科医生，它巧妙地将两个表达式连接起来。如果第一个表达式不为空（不是 undefined 或 null），那么它将返回第一个表达式的值；否则，它会返回第二个表达式的值。让我们回到之前的示例，使用空值合并运算符来优雅地处理空值：
const user = {
name: 'John Doe',
};
const name = user?.name ?? 'Guest';
if (name) {
console.log(`Hello, ${name}!`);
}
现在，即使 user 对象或其 name 属性不存在或为 undefined 或 null，name 变量也会被赋值为 'Guest'，确保应用程序不会崩溃，并始终为用户提供友好的问候语。
四、可选链操作符（?.）
可选链操作符（?.）就像一名谨慎的探险家，它让我们安全地访问对象的属性或调用对象的函数，而无需担心对象是否为 undefined 或 null。想象一下，我们想获取用户的个人信息，包括姓名和年龄：
const user = {
name: 'John Doe',
age: 30,
};
const name = user.name;
const age = user.age;
如果 user 对象不存在或其 name 或 age 属性为 undefined 或 null，这段代码仍然会运行，但会返回 undefined，这可能会导致难以调试的错误。使用可选链操作符，我们可以安全地获取这些属性的值，而无需担心对象是否为 undefined 或 null：
const user = {
name: 'John Doe',
age: 30,
};
const name = user?.name;
const age = user?.age;
可选链操作符会确保在 user、user.name 或 user.age 为 undefined 或 null 时，不会引发错误，从而使我们的代码更加健壮和易于维护。
五、空值赋值运算符（??=）
空值赋值运算符（??=）就像一名高效的建筑工人，它允许我们仅在变量为空（为 undefined 或 null）时才对其进行赋值。让我们考虑以下场景，我们想为不存在的 user 对象创建一个默认对象：
let user;
if (!user) {
user = {
name: 'Guest',
};
}
这段代码可以完成这项工作，但它有点冗长。使用空值赋值运算符，我们可以用更简洁的方式实现相同的目标：
let user = {
name: 'Guest',
};
空值赋值运算符会检查 user 变量是否为 undefined 或 null，如果为 undefined 或 null，则对其进行赋值。这使得我们的代码更加简洁和易于理解。
六、结语
ES11 的空值合并运算符、可选链操作符和空值赋值运算符为 JavaScript 的空值处理带来了革命性的变化。这些新特性使我们的代码更加简洁、高效和易于维护。如果你还没有开始使用这些新特性，那么强烈建议你立即开始使用，相信你会对它们的强大威力感到惊叹！
七、常见问题解答
-
为什么这些新特性很重要？
- 它们简化了空值处理，减少了代码中的错误和不确定性。
-
空值合并运算符和可选链操作符有什么区别？
- 空值合并运算符用于将两个表达式连接起来，而可选链操作符用于安全地访问对象的属性或调用对象的函数。
-
空值赋值运算符与传统赋值运算符（=）有什么区别？
- 空值赋值运算符仅在变量为空时才进行赋值，而传统赋值运算符始终进行赋值。
-
这些新特性会影响现有代码的兼容性吗？
- 不，这些新特性是向后兼容的，不会影响现有代码的运行。
-
如何开始使用这些新特性？
- 确保你的 JavaScript 运行时支持 ES11，然后就可以直接在代码中使用这些新特性了。
