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

源链接：https://juejin.cn/post/6954902440915238920 (opens new window)

ECMAScript 发展进程中，会有很多功能的更新，比如销毁，箭头功能，模块，它们极大的改变 JavaScript 编写方式，可能有些人喜欢，有些人不喜欢，但像每个新功能一样，我们最终会习惯它们。新版本的 ECMAScript 引入了三个新的逻辑赋值运算符：空运算符，AND和OR运算符，这些运算符的出现，也是希望让我们的代码更干净简洁，下面分享几个优雅的 JavaScript 运算符使用技巧。

1. 可选链接运算符（？.）

可选链接运算符（Optional Chaining Operator） 处于 ES2020 提案的第4阶段，因此应将其添加到规范中。它改变了访问对象内部属性的方式，尤其是深层嵌套的属性。它也可以作为 TypeScript 3.7+ 中的功能使用。

相信大部分开发前端的的小伙伴们都会遇到null和未定义的属性。JS语言的动态特性使其无法不碰到它们。特别是在处理嵌套对象时，以下代码很常见

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

// 简化
let title = data?.children?.[0]?.title;

上面的代码用于API响应，我必须解析JSON以确保名称存在。但是，当对象具有可选属性或某些配置对象具有某些值的动态映射时，可能会遇到类似情况，需要检查很多边界条件。

这时候，如果我们使用可选链接运算符，一切就变得更加轻松了。它为我们检查嵌套属性，而不必显式搜索梯形图。我们所要做的就是使用“？” 要检查空值的属性之后的运算符。我们可以随意在表达式中多次使用该运算符，并且如果未定义任何项，它将尽早返回。

// 对于静态属性用法是：
object?.property

// 对于动态属性将其更改为：
object?.[expression] 

由于操作符一旦为空值就会终止，因此也可以使用它来有条件地调用方法或应用条件逻辑。

对于方法的调用你可以这样写：

object.runsOnlyIfMethodExists?.()

与无效合并一起使用：

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

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

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

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

2. 逻辑空分配（?? =）

expr1 ??= expr2

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

x ??= y

// 此逻辑赋值运算符等效于
x ?? (x = y);

3. 逻辑或分配（|| =）

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

语法：

x ||= y

// 等同于
x || (x = y)

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

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

4. 逻辑与分配（&& =）

此逻辑赋值运算符仅在左侧为真时才赋值。因此：

x &&= y

// 等同于
x && (x = y)

5. Bitwise OR (|)运算符可以把浮点数转换为32位整数

var x = 3.5 | 0
console.log(x) // 3

最后

让我们不需要再编写大量我们例子中代码即可轻松访问嵌套属性。但是 IE 不支持它，因此，如果需要支持该版本或更旧版本的浏览器，则可能需要添加 Babel 插件。对于 Node.js，需要为此升级到 Node 14 LTS 版本，因为 12.x 不支持该版本。