ECMAScript 2020 新增逻辑运算符与可选链接详解

随着 ECMAScript 标准的演进，JavaScript 不断引入新功能，如解构、箭头函数和模块系统，这些特性显著改变了代码编写习惯。尽管对新功能的接受度因人而异，但最终它们都会成为开发者日常工具的一部分。最新版本的 ECMAScript 引入了三个新的逻辑赋值运算符：空值合并赋值、逻辑或赋值和逻辑与赋值。这些运算符旨在帮助开发者编写更简洁、清晰的代码。本文将分享几个利用这些新运算符提升代码优雅性的技巧。

一、可选链接运算符【?.】

可选链接运算符（Optional Chaining Operator）已进入 ES2020 提案的第 4 阶段，并被纳入正式规范。该运算符改变了访问对象内部属性，尤其是深层嵌套属性的方式。此外，它也是 TypeScript 3.7 及以上版本支持的功能。

前端开发中，处理 null 和 undefined 属性是常见挑战。由于 JavaScript 的动态类型特性，这类情况不可避免。特别是在处理嵌套对象时，我们常需编写冗长的条件判断代码来确保属性存在。

if (data && data.children && data.children[0] && data.children[0].title) {
    // I have a title!
}

上述代码通常用于解析 API 响应，确保名称字段存在。然而，当对象包含可选属性，或配置对象具有动态映射的值时，往往需要检查大量边界条件，导致代码繁琐。

使用可选链接运算符后，处理嵌套属性变得轻松许多。无需显式编写复杂的层级检查，只需在属性访问后添加“?”运算符即可检查空值。该运算符可在表达式中多次使用，一旦遇到 null 或 undefined，将立即返回 undefined，从而简化逻辑。

对于静态属性的访问，语法如下：

object?.property

若需访问动态属性，可改为：

object?.[expression] 

上述逻辑可以简化为：

let title = data?.children?.[0]?.title;

例如，当变量 data 未定义时：

let data;
console.log(data?.children?.[0]?.title) // undefined

data  = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao

这种写法更加简洁。由于运算符在遇到空值时会终止执行，因此也可用于有条件地调用方法或应用条件逻辑。

const conditionalProperty = null;
let index = 0;

console.log(conditionalProperty?.[index++]); // undefined
console.log(index);  // 0

调用方法时，可以这样编写：

object.runsOnlyIfMethodExists?.()

例如，对于 parent 对象，若直接调用 parent.getTitle()，会抛出 Uncaught TypeError: parent.getTitle is not a function 错误。而使用 parent.getTitle?.() 则不会执行该方法，而是安全返回 undefined。

let parent = {
    name: "parent",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      console.log(this.name)
    }
  };
  
  parent.getName?.()   // parent
  parent.getTitle?.()  //不会执行
  

与空值合并运算符结合使用

空值合并运算符（??）提供了一种机制，为未定义或 null 值的表达式提供默认值。我们可以使用 ?? 运算符来指定表达式的后备值。

console.log(undefined ?? 'codercao'); // codercao

因此，当属性不存在时，可以将空值合并运算符与可选链接运算符结合使用，以提供默认值。

let title = data?.children?.[0]?.title ?? 'codercao';
console.log(title); // codercao

二、逻辑空赋值（?? =）

expr1 ??= expr2

逻辑空值运算符仅在值为 null 或 undefined 时才将右侧表达式的结果赋值给左侧变量，语法格式为：expr1 ??= expr2

x ??= y

这看起来可能等效于：

x = x ?? y;

但事实并非如此，两者存在细微差别。

空值合并运算符（??）从左到右操作，如果左侧变量 x 不为 null，则发生短路。因此，如果 x 不为 null 或未定义，右侧表达式 y 将不会被求值。这意味着，如果 y 是一个函数，它根本不会被调用。因此，此逻辑赋值运算符等效于：

x ?? (x = y);

三、逻辑或赋值（|| =）

此逻辑赋值运算符仅在左侧表达式为 falsy 值时才进行赋值。需要注意的是，falsy 与 null 不同，因为 falsy 值包括：false、0、“”、null、undefined 和 NaN 等。

其语法为：

x ||= y

等同于：

x || (x = y)

在希望保留现有值（如果存在）否则分配默认值的场景中，这非常有用。例如，若搜索请求中没有数据，我们希望将元素的 innerHTML 设置为默认提示；否则，显示现有列表。这样可以避免不必要的更新和副作用，如解析、重新渲染或失去焦点。我们可以简单地使用此运算符通过 JavaScript 更新 HTML：

document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'

四、逻辑与赋值（&& =）

想必你已经猜到，此逻辑赋值运算符仅在左侧表达式为 truthy 时才进行赋值。因此：

x &&= y

等同于：

x && (x = y)

最后

本文分享了几个优雅的 JavaScript 运算符使用技巧，重点介绍了可选链接运算符。它让我们无需编写大量示例中的冗余代码即可轻松访问嵌套属性。需要注意的是，Internet Explorer 不支持该特性。如果需要支持 IE 或更旧版本的浏览器，可能需要添加 Babel 插件。对于 Node.js 环境，需升级至 Node 14 LTS 版本，因为 12.x 版本不支持该特性。

如果你也有优雅的 JavaScript 运算符使用技巧，欢迎在评论区交流分享。

以上就是分享几个 JavaScript 运算符的使用技巧的详细内容，更多关于 JavaScript 运算符的使用的资料请关注本站其它相关文章！