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


Posted in Javascript onApril 24, 2021

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

以上就是分享几个JavaScript运算符的使用技巧的详细内容,更多关于JavaScript运算符的使用的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
vue实现图片上传功能
May 28 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
jquery插件实现搜索历史
Apr 24 #jQuery
关于Javascript闭包与应用的详解
vue首次渲染全过程
使用 JavaScript 制作页面效果
Apr 21 #Javascript
You might like
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
nodejs基础应用
2017/02/03 NodeJs
移动端效果之IndexList详解
2017/10/20 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
python 获取等间隔的数组实例
2019/07/04 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
python 爬取小说并下载的示例
2020/12/07 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
安全生产先进个人材料
2014/02/06 职场文书
商场消防演习方案
2014/02/12 职场文书
活动总结模板
2014/05/09 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
五五普法心得体会
2014/09/04 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
Python制作春联的示例代码
2022/01/22 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang