JS中一些高效的魔法运算符总结


Posted in Javascript onMay 06, 2021

JavaScript 现在每年都会发一个新版本,里面也会新增一些操作更加便利、高效的运算符。今天我们就来盘点下几个高效的魔法运算符。

1. 可选链运算符

之前当我们想要使用某个结构比较深的属性,同时又无法确定所有的父级一定存在时,我们需要进行一连串的判断,例如一个数据结构:

const student = {
  score: {
    math: 98,
  },
};

我们想要获取最内层的 math 属性的值时:

if (student && student.score) {
  console.log(student.score.math);
}

1.1 获取深层次的属性

不过当我们使用可选链运算符后,判断就简单很多了,可选链运算符会在链路上遇到 null 或者 undefined 时,直接返回 undefined,而不会抛出错误异常:

console.log(student?.score?.math);

1.2 执行一个可选的方法

同时在执行一个可能存在的函数时,也可以用到。例如一个 react 组件中,传入的方法是可选的:

// getScore 是一个可选参数,要么是 undefined,要么是一个函数
const Student = ({ getScore }: { getScore?: () => void }) => {
  useEffect(() => {
    // 当 getScore 存在时,正常执行 getScore()方法
    getScore?.();
  }, []);

  return <div></div>;
};

或者我们执行一个 dom 元素的方法时,也可以使用。

document.querySelector 会返回两种类型,当 dom 元素真实存在时会返回该元素,否则返回 null。写过 typescript 的都知道,当我们要调用某个方法时,总是要先确定该 dom 元素是存在的:

const dom = document.querySelector('.score');
if (dom) {
  dom.getBoundingClientRect(); // 当 dom 元素存在时,才执行该方法
}

使用可选链操作符时,就直接调用即可:

document.querySelector('.score')?.getBoundingClientRect();

1.3 获取数组中的值

若数组存在,则获取某个下标的值,我们现在也不用再判断数组是否存在了,可以直接使用:

arr?.[1]; // 若 arr 存在时,则正常获取 arr[1]中的值

上面的 3 种情况也是可以组合使用的。若一个结构比较复杂时,各种类型都有,这里我们要执行数组 math 下标 2 的方法:

const student = {
  score: {
    math: [
      98,
      67,
      () => {
        return 99;
      },
    ],
  },
};

执行:

student?.score?.math?.[2]?.(); // 99

还有这种操作?

1.4 无法进行赋值操作

可选链运算符只能执行获取操作,是无法进行赋值操作的。

例如给一个可能的数组或者 dom 元素赋值时,会直接抛出语法异常:

arr?.[1] = 2; // x
document.querySelector('.score')?.innerHTML = 98; // x

当我们执行上面的语句时,会抛出如下的提示:

Uncaught SyntaxError: Invalid left-hand side in assignment

即不能给左侧的可选链进行赋值操作。

2. 双问号运算符

双问号运算符??,我理解是为了解决或运算符||而设计出来的。

我们先来回顾下或运算符的操作,当左侧的数据为假值(数字 0, 布尔类型的 false,空字符串,undefined, null)时,则执行右侧的语句。

false || 123;
0 || 123;
'' || '123';
undefined || 123;
null || 123;

可是在有些情况下,false 和 0 都是正常的值,但若使用或运算符时,会导致出错。

比如下面的这个例子,当 score 为空时,则默认值为 1。当输入正常值 0 时应当返回 0(但实际上返回了 1):

const getSCore = (score: number) => {
  return score || 1;
};

getScore(0); // 1

这时,我们就用到了双问号运算符??。双问号运算符只会在左侧为 undefined 或者 null 时,才会执行右侧的语句。

const getSCore = (score: number) => {
  return score ?? 1;
};

getScore(0); // 0

同时,双问号运算符还可以与=结合成为一个赋值操作,当左侧为 null 或者 undefined 时,则将右侧语句的结果赋值给左侧的变量:

score ??= 1; // 1

我读书多,不会骗你

3. 或运算和与运算的赋值操作

我们在之前使用或运算符进行赋值操作时,是这样写的:

score = score || 1;
age = age && 24;

现在可以直接简写成:

score ||= 1; // 等同于 score = score || 1
age &&= 24; // 等同于 age = age && 24

4. 双星号运算符

双星号运算符**是比较早引入到 js 中的,只是我们用到的比较少而已。其实它执行的是一个幂运算,等同于 Math.pow()。

2 ** 10; // 1024, 2的10次方,等同于 Math.pow(2, 10);

5. 总结

以上所有的样例均已在 chrome90 上运行通过。

我们在已经有 babel 帮助转换的情况下,可以适当的在代码运用这些运算符,能够极大地简化我们的代码。

到此这篇关于JS中一些高效运算符总结的文章就介绍到这了,更多相关JS高效运算符内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
react国际化react-intl的使用
LayUI+Shiro实现动态菜单并记住菜单收展的示例
如何用JavaScript实现一个数组惰性求值库
原生JS中应该禁止出现的写法
May 05 #Javascript
详解Javascript实践中的命令模式
如何制作自己的原生JavaScript路由
May 05 #Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 #Vue.js
You might like
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php 启动报错如何解决
2014/01/17 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Android分包MultiDex策略详解
2017/10/30 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python抽取指定url页面的title方法
2018/05/11 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
项目经理岗位职责
2013/11/11 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
会计岗位工作总结
2015/08/12 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
python画条形图的具体代码
2022/04/20 Python
MySQL新手入门进阶语句汇总
2022/09/23 MySQL