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