几个优雅的javascript运算符使用技巧

关键词：

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

逻辑空值运算符仅在空值（ null 或者 undefined）时才将值分配给expr1，表达方式：

x ??= y

可能看起来等效于：

x = x ?? y;

但事实并非如此！有细微的差别。

空的合并运算符（??）从左到右操作，如果x不为空，则短路。因此，如果x不为 null 或者 undefined，则永远不会对表达式y进行求值。因此，如果y是一个函数，它将根本不会被调用。因此，此逻辑赋值运算符等效于

x ?? (x = y);

三、逻辑或分配（|| =）

此逻辑赋值运算符仅在左侧表达式为 falsy值时才赋值。Falsy值与null有所不同，因为falsy值可以是任何一种值：undefined，null，空字符串(双引号""、单引号’’、反引号``)，NaN，0。IE浏览器中的 document.all，也算是一个。

语法

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运算符使用技巧，请不要吝惜，在评论区一起交流~

20个实用而专业的javascript技巧

我为你收集了一系列有用的JavaScript技巧，让你的代码看起来更优雅和专业。我希望你会喜欢它！1、单线If-Else在JavaScript中，你可以使用三元条件运算符来压缩if-else语句。例如：constage=10;letgroup;//LONGVERSIONif(age>=18){group="Adult";}els... 查看详情

如何使用 Java Optional 优雅地替换三元运算符

】如何使用JavaOptional优雅地替换三元运算符【英文标题】：HowtouseJavaOptionaltoelegantlyreplaceTernaryoperators【发布时间】：2019-04-1212:37:13【问题描述】：一个超级简单的问题：这是我使用传统三元运算符?的纯Java代码publicDateTimegetCreatedA... 查看详情

使用 javascript 的动态表单提交 - 如何优雅的代码？

】使用javascript的动态表单提交-如何优雅的代码？【英文标题】：Dynamicformsubmissionusingjavascript-howtoelegantcode?【发布时间】：2009-05-2615:57:18【问题描述】：问题来了：我的页面显示一组项目。每个项目都有一个与之关联的复选框（... 查看详情

写出更优雅和稳健的ts代码的几个tips(代码片段)

写出更优雅和稳健的TS代码的几个tips本来想放优雅太优雅了.jpg，后来还是好懒啊……使用unknown代替anyany的问题在于它直接关闭了TS的类型检查，因此一旦使用了any，那就代表任何事情都会发生。使用unknown则告诉TSÿ... 查看详情

为新文件类型重载 >> 运算符的优雅方法是啥？

】为新文件类型重载>>运算符的优雅方法是啥？【英文标题】：What\'sanelegantwaytooverloadthe>>operatorforanewfiletype?为新文件类型重载>>运算符的优雅方法是什么？【发布时间】：2013-02-1418:48:23【问题描述】：我正在向一些... 查看详情

如何在vuejs中优雅使用javascript各种插件

...不得不使使用js第三方库或者插件。如何在Vue项目中引入javascript第三方库 全局变量将JavaScript第三方库添加到项目中，最简单的办法是通过将其附加到 window 对象上，以使其成为全局变量。如何引入：window._=require(‘lod... 查看详情

我可以简化这个使用逻辑否定运算符的条件语句吗？

...住了。是否有更简洁/优雅的方式来表达以下内容（这是JavaScript语法，但 查看详情

Javascript Ajax 优雅降级，有不同的页面？

】JavascriptAjax优雅降级，有不同的页面？【英文标题】：JavascriptAjaxGraceful-degradation,withDifferentPages?【发布时间】：2010-12-0404:27:59【问题描述】：我开始更加关注如何让我的javascript和ajax优雅地降级。哪个更推荐：致力于将优雅降... 查看详情

javascript进阶：如何写出优雅的javascript代码

...范-可读性三、变量和函数命名四、松散耦合1、解耦HTML和JavaScript2、解耦CSS和JavaScript3、解耦应用程序逻辑和事件处理程序五、编码惯例六、作用域意识1、避免全局查找2、不适用with语句七、优化循环1、简化终止条件2、简化循环... 查看详情

javascript常规简洁优雅写法

if(state===1){returntrue}elseif(state===2){returntrue}elseif(state===3){returntrue}elseif(state===4){returntrue}else{returnfalse}你首先想到的可能是使用switchcase,我们使用switchcase来改写它：copiedswitch(state){case1:retu 查看详情

写出更优雅和稳健的ts代码的几个tips(代码片段)

写出更优雅和稳健的TS代码的几个tips本来想放优雅太优雅了.jpg，后来还是好懒啊……使用unknown代替anyany的问题在于它直接关闭了TS的类型检查，因此一旦使用了any，那就代表任何事情都会发生。使用unknown则告诉TSÿ... 查看详情

执行元组算术的优雅方式

...组运算的最优雅和简洁的方式是什么（无需创建我自己的运算符重载类）？假设我有两个元组：a=(10,10)b=(4,4)我的预期结果是c=a-b=(6,6)我目前使用：c=(a[0]-b[0],a[1]-b[1])我也试过了：c=tuple([( 查看详情

有个开发者总结这15优雅的javascript个技巧(代码片段)

...xff0c;有一线大厂面试完整考点、资料以及我的系列文章。JavaScript有很多很酷的特性&#x 查看详情

优雅的创建一个javascript库(代码片段)

...JS库。在我们深入之前，我做了两点假设：你知道简单的JavaScript或C语言。你不打算使用jQuery。通常情况下，一个JavaScript库不需要任何依赖。首先，我遇到了第一个麻烦，即如何正确的看待一个JavaScript库。在C/C++中，一个库是功... 查看详情

javascript------一元运算符+的使用

vary="5";//y是一个字符串varx=+y;//x是一个数字vary="John";//y是一个字符串varx=+y;//x是一个数字(NaN)  查看详情

javascript中new运算符的实现机制及手写(代码片段)

官方解释：new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。总结：创建自定义对象或者构造函数的时候使用这里我通过几个小问题的方式来解释new运算符1、怎么创建一个自定义对象呢... 查看详情

javascript：使用三元运算符的意外评估行为

】javascript：使用三元运算符的意外评估行为【英文标题】：javascript:UnexpectedEvaluationBehaviorwithTernaryOperator【发布时间】：2014-01-1814:34:16【问题描述】：问题：函数没有返回预期的值(3)。以下代码未按预期返回1。我发现这是由于使... 查看详情

javascript中赋值运算符的使用

JavaScript中的赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中；而复合赋值运算混合了其他操作（例如算术运算操作）和赋值操作。例如：sum+=i;//等同于sum=... 查看详情