ECMAScript倒退过程中，会有很多性能的更新，比方销毁，箭头性能，模块，它们极大的扭转JavaScript编写形式，可能有些人喜爱，有些人不喜爱，但像每个新性能一样，咱们最终会习惯它们。新版本的ECMAScript引入了三个新的逻辑赋值运算符：空运算符，AND和OR运算符，这些运算符的呈现，也是心愿让咱们的代码更洁净简洁，上面分享几个优雅的JavaScript运算符应用技巧
一、可选链接运算符【？.】
可选链接运算符（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) // undefineddata = {children: [{title:'codercao'}]}console.log(data?.children?.[0]?.title) // codercao这样写是不是更加简略了呢？ 因为操作符一旦为空值就会终止，因而也能够应用它来有条件地调用办法或利用条件逻辑
const conditionalProperty = null;let index = 0;console.log(conditionalProperty?.[index++]); // undefinedconsole.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二、逻辑空调配（?? =）
expr1 ??= expr2逻辑空值运算符仅在空值（空值或未定义）时才将值调配给expr1，表达方式：
x ??= y可能看起来等效于：
x = x ?? y;但事实并非如此！有轻微的差异。
空的合并运算符（??）从左到右操作，如果x不为空，则短路。因而，如果x不为null或未定义，则永远不会对表达式y进行求值。因而，如果y是一个函数，它将基本不会被调用。因而，此逻辑赋值运算符等效于
x ?? (x = y);三、逻辑或调配（|| =）
此逻辑赋值运算符仅在左侧表达式为 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>'四、逻辑与调配（&& =）
可能你曾经猜到了，此逻辑赋值运算符仅在左侧为真时才赋值。因而：
x &&= y等同于
x && (x = y)最初
本次分享几个优雅的JavaScript运算符应用技巧，重点分享了可选链接运算符的应用，这样能够让咱们不须要再编写大量咱们例子中代码即可轻松拜访嵌套属性。然而IE不反对它，因而，如果须要反对该版本或更旧版本的浏览器，则可能须要增加Babel插件。对于Node.js，须要为此降级到Node 14 LTS版本，因为12.x不反对该版本。
如果你也有优雅的优雅的JavaScript运算符应用技巧，请不要吝惜，在评论区一起交换~