文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中几个优雅的运算符

2024-12-03 05:25

关注

新版本的 ECMAScript 引入了三个新的逻辑赋值运算符:空运算符,AND 和 OR 运算符,这些运算符的出现,也是希望让我们的代码更干净简洁,下面分享几个优雅的 JavaScript 运算符使用技巧。

[[397737]]

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

(1) 可选链接运算符(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! 

上面的代码用于 API 响应,我必须解析 JSON 以确保名称存在。但是,当对象具有可选属性或某些配置对象具有某些值的动态映射时,可能会遇到类似情况,需要检查很多边界条件。

这时候,如果我们使用可选链接运算符,一切就变得更加轻松了。它为我们检查嵌套属性,而不必显式搜索梯形图。我们所要做的就是使用 “?” 要检查空值的属性之后的运算符。我们可以随意在表达式中多次使用该运算符,并且如果未定义任何项,它将尽早返回。

(2) 对于静态属性用法是:

  1. object?.property 

(3) 对于动态属性将其更改为:

  1. object?.[expression]  

上面的代码可以简化为:

  1. let title = data?.children?.[0]?.title; 

然后,如果我们有:

  1. let data; 
  2. console.log(data?.children?.[0]?.title) // undefined 
  3.  
  4. data  = {children: [{title:'codercao'}]} 
  5. console.log(data?.children?.[0]?.title) // codercao 

这样写是不是更加简单了呢?由于操作符一旦为空值就会终止,因此也可以使用它来有条件地调用方法或应用条件逻辑

  1. const conditionalProperty = null
  2. let index = 0
  3.  
  4. console.log(conditionalProperty?.[index++]); // undefined 
  5. console.log(index);  // 0 

(4) 对于方法的调用你可以这样写

  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?.()  //不会执行 

(5) 与无效合并一起使用

提供了一种方法来处理未定义或为空值和表达提供默认值。我们可以使用??运算符,为表达式提供默认值

  1. console.log(undefined ?? 'codercao'); // codercao 

因此,如果属性不存在,则可以将无效的合并运算符与可选链接运算符结合使用以提供默认值。

  1. let title = data?.children?.[0]?.title ?? 'codercao'; 
  2. console.log(title); // codercao 

二、逻辑空分配(?? =)

  1. expr1 ??= expr2 

逻辑空值运算符仅在 nullish 值(null 或者 undefined)时才将值分配给 expr1,表达方式:

  1. x ??= y 

可能看起来等效于:

  1. xx = x ?? y; 

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

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

  1. x ?? (x = y); 

三、逻辑或分配(|| =)

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

语法:

  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 不支持该版本。

来源:前端工匠内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯