分享几个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 源码分析笔记(2) 变量列表
May 28 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
jquery插件实现搜索历史
Apr 24 #jQuery
关于Javascript闭包与应用的详解
vue首次渲染全过程
使用 JavaScript 制作页面效果
Apr 21 #Javascript
You might like
DIY实用性框形天线
2021/03/02 无线电
php自定义session示例分享
2014/04/22 PHP
JS:window.onload的使用介绍
2013/11/13 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
决心书范文
2014/03/11 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers