几个优雅的JavaScript运算符使用技巧

object?.[expression]

上面的代码可以简化为：

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

然后，如果我们有:

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?.()则会终止不会执行

let parent = {

name: “parent”,

friends: [“p1”, “p2”, “p3”],

getName: function() {

console.log(this.name)

}

};

parent.getName?.()   《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】  // parent

parent.getTitle?.()  //不会执行

与无效合并一起使用

提供了一种方法来处理未定义或为空值和表达提供默认值。我们可以使用??运算符，为表达式提供默认值

console.log(undefined ?? ‘codercao’); // codercao

因此，如果属性不存在，则可以将无效的合并运算符与可选链接运算符结合使用以提供默认值。

let title = data?.children?.[0]?.title ?? ‘codercao’;

console.log(title); // codercao

二、逻辑空分配（?? =）

expr1 ??= expr2

逻辑空值运算符仅在空值（ null 或者 undefined）时才将值分配给expr1，表达方式：

x ??= y

可能看起来等效于：

x = x ?? y;

但事实并非如此！有细微的差别。

空的合并运算符（??）从左到右操作，如果x不为空，则短路。因此，如果x不为 null 或者 undefined，则永远不会对表达式y进行求值。因此，如果y是一个函数，它将根本不会被调用。因此，此逻辑赋值运算符等效于

x ?? (x = y);

三、逻辑或分配（|| =）

此逻辑赋值运算符仅在左侧表达式为 falsy值时才赋值。Falsy值与null有所不同，因为falsy值可以是任何一种值：undefined，null，空字符串(双引号""、单引号’’、反引号``)，NaN，0。IE浏览器中的 document.all，也算是一个。

语法

x ||= y

等同于

x || (x = y)

在我们想要保留现有值（如果不存在）的情况下，这很有用，否则我们想为其分配默认值。例如，如果搜索请求中没有数据，我们希望将元素的内部HTML设置为默认值。否则，我们要显示现有列表。这样，我们避免了不必要的更新和任何副作用，例如解析，重新渲染，失去焦点等。我们可以简单地使用此运算符来使用JavaScript更新HTML：

document.getElementById(‘search’).innerHTML ||= ‘No posts found matching this search.’