共计 2463 个字符，预计需要花费 7 分钟才能阅读完成。
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) // 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二、逻辑空调配（?? =）
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 运算符应用技巧，请不要吝惜，在评论区一起交换~
