新版本的ECMAScript引入了三个新的逻辑赋值运算符：空运算符、AND和OR运算符。这些运算符的出现也是希望让我们的代码更加干净简洁，这里有几个优雅的JavaScript运算符使用技巧。1.可选的链接运算符[?.]OptionalChainingOperator处于ES2020提案的第4阶段，因此应该将其添加到规范中。它改变了访问对象内部属性的方式，尤其是深度嵌套的属性。它也作为TypeScript3.7+中的一项功能提供。相信大部分开发前端的小伙伴都会遇到null和undefined属性。JS语言的动态特性使得我们不可能不遇到它们。尤其是在处理嵌套对象时，下面的代码很常见：if(data&&data.children&&data.children[0]&&data.children[0].title){//Ihaveatitle!}API响应，我必须解析JSON以确保名称存在。但是，当对象具有可选属性或某些配置对象具有某些值的动态映射时，您可能会遇到类似的情况，需要检查大量边界条件。在这一点上，如果我们使用可选的链接运算符，一切都会变得更容易。它为我们检查嵌套属性，而无需显式搜索阶梯。我们所要做的就是使用“？”在我们要检查空值的属性之后的运算符。我们可以在表达式中多次使用运算符，如果没有定义，它会提前返回。静态属性用法为：object?.property动态属性改为：object?.[expression]上面的代码可以简化为：lettitle=data?.children?.[0]?.title;然后，如果我们有：letdata;console.log(data?.children?.[0]?.title)//undefineddata={children:[{title:'codercao'}]}console.log(data?.children?.[0].title)//这样写codercao是不是更简单？由于运算符一为null就终止，它也可以用于有条件地调用方法或应用条件逻辑constconditionalProperty=null;letindex=0;console.log(conditionalProperty?.[index++]);//undefinedconsole.log(index);//0对于方法调用，可以这样写object.runsOnlyIfMethodExists?.()。比如下面的父对象，如果我们直接调用parent.getTitle()，会报UncaughtTypeError:parent.getTitleisnotafunctionError，parent.getTitle?.()会终止，不会执行letparent={name:"parent",friends:["p1","p2","p3"],getName:function(){console.log(this.name)}};parent.getName?.()//parentparent.getTitle?.()//不会被执行与invalidmerge一起使用提供一种方法来处理pending为空值和表达式定义或提供默认值。我们可以使用??运算符，为表达式提供默认值console.log(undefined??'codercao');//codercaocopycode因此，如果属性不存在，您可以将无效的合并运算符与可选链接在一起运算符组合使用以提供默认值。让title=data?.children?.[0]?.title??'codercao';console.log(title);//codercaocopycode2,logicalemptyallocation(??=)expr1??=expr2copycode逻辑空运算符仅当它是空值（null或undefined）时才给expr1赋值，表达式：x??=y可能看起来等同于：x=x??是；但事实上，它不是！有细微的差别。空合并运算符(??)从左到右运算，如果x不是空值，则不执行中间表达式。因此，如果x不为空或未定义，则永远不会计算表达式y。如果y是一个函数，它根本不会被调用。因此，这个逻辑赋值运算符等价于x??(x=y);只有价值。假值（falsevalues）与null不同，因为假值（falsevalues）可以是任何一种值：undefined，null，空字符串（双引号“”，单引号''，反引号``），NaN,0.IE浏览器中的document.all也是一个。语法x||=y复制代码等同于x||(x=y)copycode这在我们想要保留现有值（如果它不存在）或者我们想要为其分配默认值的情况下很有用。例如，如果搜索请求中没有数据，我们希望将元素的内部HTML设置为默认值。否则，我们要显示现有列表。这样我们就避免了不必要的更新和任何副作用，如解析、重新渲染、失去焦点等。我们可以简单地使用此运算符通过JavaScript更新HTML：document.getElementById('search').innerHTML||='找不到匹配此搜索的帖子。'(&&=)正如您可能已经猜到的，此逻辑赋值运算符仅在左侧为真时才赋值。因此：x&&=y复制代码等同于x&&(x=y)然后在我们的例子中写很多代码来方便地访问嵌套属性。但是IE不支持，所以如果你需要支持该版本或更旧版本的浏览器，你可能需要添加一个Babel插件。对于Node.js，您需要为此升级到Node14LTS版本，因为12.x不支持它。
