分享几个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 相关文章推荐
js getElementsByTagName的简写方式
Jun 27 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
jquery插件实现搜索历史
Apr 24 #jQuery
关于Javascript闭包与应用的详解
vue首次渲染全过程
使用 JavaScript 制作页面效果
Apr 21 #Javascript
You might like
php 进度条实现代码
2009/03/10 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
js精确的加减乘除实例
2017/11/14 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
英国门把手公司:Door Handle Company
2019/05/12 全球购物
cf收人广告词
2014/03/14 职场文书
《风筝》教学反思
2014/04/10 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
项目投资合作意向书
2014/07/29 职场文书
店铺转让协议书
2015/01/29 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
Nginx实现会话保持的两种方式
2022/03/18 Servers