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

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!
}

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

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

对于静态属性用法是：

object?.property

对于动态属性将其更改成：

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?.()   // parent
  parent.getTitle?.()  //不会执行

与无效合并一块儿使用

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

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

所以，若是属性不存在，则能够将无效的合并运算符与可选连接运算符结合使用以提供默认值。

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

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

expr1 ??= expr2

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

x ??= y

可能看起来等效于：

x = x ?? y;

但事实并不是如此！有细微的差异。

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

x ?? (x = y);

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

此逻辑赋值运算符仅在左侧表达式为 falsy值时才赋值。Falsy与null有所不一样，由于falsy能够是任何一种值：false，0，“”，null，undefined和NaN等

语法

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)

最后

本次分享几个优雅的JavaScript运算符使用技巧，重点分享了可选连接运算符的使用，这样可让咱们不须要再编写大量咱们例子中代码便可轻松访问嵌套属性。可是IE不支持它，所以，若是须要支持该版本或更旧版本的浏览器，则可能须要添加Babel插件。对于Node.js，须要为此升级到Node 14 LTS版本，由于12.x不支持该版本。

若是你也有优雅的优雅的JavaScript运算符使用技巧，请不要吝惜，在评论区一块儿交流~