• 售前

  • 售后

热门帖子
入门百科

分享几个JavaScript运算符的使用技巧

[复制链接]
C丶sunshine 显示全部楼层 发表于 2021-10-26 13:40:17 |阅读模式 打印 上一主题 下一主题
目次


  • 一、可选链接运算符【?.】
  • 二、逻辑空分配(?? =)
  • 三、逻辑或分配(|| =)
  • 四、逻辑与分配(&& =)
  • 末了
ECMAScript发展历程中,会有许多功能的更新,比如烧毁,箭头功能,模块,它们极大的改变JavaScript编写方式,可能有些人喜好,有些人不喜好,但像每个新功能一样,我们最终会习惯它们。新版本的ECMAScript引入了三个新的逻辑赋值运算符:空运算符,AND和OR运算符,这些运算符的出现,也是希望让我们的代码更干净简洁,下面分享几个优雅的JavaScript运算符利用本事

一、可选链接运算符【?.】


可选链接运算符(Optional Chaining Operator) 处于ES2020提案的第4阶段,因此应将其添加到规范中。它改变了访问对象内部属性的方式,尤其是深层嵌套的属性。它也可以作为TypeScript 3.7+中的功能利用。
相信大部分开发前端的的小伙伴们都会遇到null和未界说的属性。JS语言的动态特性使其无法不遇到它们。特别是在处理惩罚嵌套对象时,以下代码很常见:
  1. if (data && data.children && data.children[0] && data.children[0].title) {
  2.     // I have a title!
  3. }
复制代码
上面的代码用于API相应,我必须剖析JSON以确保名称存在。但是,当对象具有可选属性或某些设置对象具有某些值的动态映射时,可能会遇到类似环境,需要查抄许多界限条件。
这时候,如果我们利用可选链接运算符,统统就变得更加轻松了。它为我们查抄嵌套属性,而不必显式搜刮梯形图。我们所要做的就是利用“?” 要查抄空值的属性之后的运算符。我们可以随意在表达式中多次利用该运算符,并且如果未界说任何项,它将尽早返回。
对于静态属性用法是:
  1. object?.property
复制代码
对于动态属性将其更改为:
  1. object?.[expression]
复制代码
上面的代码可以简化为:
  1. let title = data?.children?.[0]?.title;
复制代码
然后,如果我们有:
  1. let data;
  2. console.log(data?.children?.[0]?.title) // undefined
  3. data  = {children: [{title:'codercao'}]}
  4. console.log(data?.children?.[0]?.title) // codercao
复制代码
如许写是不是更加简单了呢? 由于操纵符一旦为空值就会终止,因此也可以利用它来有条件地调用方法或应用条件逻辑
  1. const conditionalProperty = null;
  2. let index = 0;
  3. console.log(conditionalProperty?.[index++]); // undefined
  4. console.log(index);  // 0
复制代码
对于方法的调用你可以如许写
  1. object.runsOnlyIfMethodExists?.()
复制代码
比方下面的parent对象,如果我们直接调用parent.getTitle(),则会报Uncaught TypeError: parent.getTitle is not a function错误,parent.getTitle?.()则会终止不会实验
  1. let parent = {
  2.     name: "parent",
  3.     friends: ["p1", "p2", "p3"],
  4.     getName: function() {
  5.       console.log(this.name)
  6.     }
  7.   };
  8.   
  9.   parent.getName?.()   // parent
  10.   parent.getTitle?.()  //不会执行
  11.   
复制代码
与无效归并一起利用
提供了一种方法来处理惩罚未界说或为空值和表达提供默认值。我们可以利用??运算符,为表达式提供默认值
  1. console.log(undefined ?? 'codercao'); // codercao
复制代码
因此,如果属性不存在,则可以将无效的归并运算符与可选链接运算符结合利用以提供默认值。
  1. let title = data?.children?.[0]?.title ?? 'codercao';
  2. console.log(title); // codercao
复制代码
二、逻辑空分配(?? =)
  1. expr1 ??= expr2
复制代码
逻辑空值运算符仅在空值(空值或未界说)时才将值分配给expr1,表达方式:
  1. x ??= y
复制代码
可能看起来等效于:
  1. x = x ?? y;
复制代码
但究竟并非云云!有渺小的差异。
空的归并运算符(??)从左到右操纵,如果x不为空,则短路。因此,如果x不为null或未界说,则永久不会对表达式y进行求值。因此,如果y是一个函数,它将根本不会被调用。因此,此逻辑赋值运算符等效于
  1. x ?? (x = y);
复制代码
三、逻辑或分配(|| =)


此逻辑赋值运算符仅在左侧表达式为 falsy值时才赋值。Falsy与null有所差异,因为falsy可以是任何一种值:false,0,“”,null,undefined和NaN等
语法
  1. x ||= y
复制代码
等同于
  1. x || (x = y)
复制代码
在我们想要保留现有值(如果不存在)的环境下,这很有用,否则我们想为其分配默认值。比方,如果搜刮哀求中没有数据,我们希望将元素的内部HTML设置为默认值。否则,我们要表现现有列表。如许,我们避免了不须要的更新和任何副作用,比方剖析,重新渲染,失去焦点等。我们可以简单地利用此运算符来利用JavaScript更新HTML:
  1. document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'
复制代码
四、逻辑与分配(&& =)


可能你已经猜到了,此逻辑赋值运算符仅在左侧为真时才赋值。因此:
  1. x &&= y
复制代码
等同于
  1. x && (x = y)
复制代码
末了


本次分享几个优雅的JavaScript运算符利用本事,重点分享了可选链接运算符的利用,如许可以让我们不需要再编写大量我们例子中代码即可轻松访问嵌套属性。但是IE不支持它,因此,如果需要支持该版本或更旧版本的浏览器,则可能需要添加Babel插件。对于Node.js,需要为此升级到Node 14 LTS版本,因为12.x不支持该版本。
如果你也有优雅的优雅的JavaScript运算符利用本事,请不要吝惜,在品评区一起交换~
以上就是分享几个JavaScript运算符的利用本事的详细内容,更多关于JavaScript运算符的利用的资料请关注草根技术分享别的相关文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作