ECMAScript在发展过程中，会有很多功能更新，比如析构、箭头函数、模块等，极大地改变了JavaScript的编写方式。有些人可能喜欢它，有些人不喜欢它，但就像每个新功能一样，我们最终会习惯它们。新版本的ECMAScript引入了三个新的逻辑赋值运算符：空运算符、AND和OR运算符。这些操作符的出现，也是希望让我们的代码更干净、更简洁。这里有一些优雅的JavaScript运算符。提示1.可选链接运算符[?.]OptionalChainingOperator处于ES2020提案的第4阶段，因此应该将其添加到规范中。它改变了访问对象内部属性的方式，尤其是深度嵌套的属性。它也作为TypeScript3.7+中的一项功能提供。相信大部分前端开发者都会遇到null和undefined属性。JS语言的动态特性使我们不可能不遇到它们。尤其是在处理嵌套对象时，下面的代码很常见：if(data&&data.children&&data.children[0]&&data.children[0].title){//Ihaveeatitle!}响应，我必须解析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.getTitleisnota函数错误，parent.getTitle?.()会终止，不会执行letparent={name:"parent",friends:["p1","p2","p3"],getName:function(){console.log(this.name)}};parent.getName?.()//parentparent.getTitle?.()//不会执行与invalidmerge一起使用提供处理undefined或null值和表达式的方法提供默认值价值。我们可以使用??运算符，为表达式提供默认值console.log(undefined??'codercao');//codercao所以如果属性不存在，可以将无效的合并运算符和可选的链运算符结合使用，提供一个默认值。lettitle=data?.children?.[0]?.title??'codercao';console.log(title);//codercao2.逻辑空值分配(??=)expr1??=expr2逻辑空值运算符只有当expr1为空（null或undefined）时才赋值给expr1，表达式：x??=y可能看起来等同于：xx=x??y;但事实并非如此！有细微的差别。空合并运算符(??)从左到右运行，如果x不为空则短路。因此，如果x不为空或未定义，则永远不会计算表达式y。所以如果y是一个函数，它根本不会被调用。因此，这个逻辑赋值运算符等价于x??(x=y)；3.逻辑或赋值(||=)这种逻辑赋值运算符只在左边的表达式为假值时才赋值。Falsy值不同于null，因为falsy值可以是任何东西：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不支持该版本。
