JS中一些高效的魔法运算符总结
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 typeof的用法与typeof运算符介绍[详细]第1/2页
经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确的是 if( typeof(document.mylist.length) != "undefined" ) {} 或 if( !isNaN(document.mylist.length) ) {} typeof的运算数未定义,返回的就是 "
-
JS中三目运算符和if else的区别分析与示例
今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码 代码如下: if(n >= count-1){ n =0; }else{ n ++; } 随后代码写完了,准备优化一下代码,将此段改成了三目运算符的写法 复制代码 代码如下: n = n >= (count-1) ? n=0 : n++ 结果完全不同 随后研究了一下这两者的区别,总结为一句话:三目运算有返回值,if else没有返回值 做了如下测试: 复制代码 代码如下: var n=1; if(n
-
js 与或运算符 || && 妙用
首先出个题:如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用代码怎么实现? 差一点的if,else: Js代码 复制代码 代码如下: var add_level = 0; if(add_step == 5){ add_level = 1; } else if(add_step == 10){ add_level = 2; } else if(add_step
-
详解js运算符单竖杠“|”与“||”的用法和作用介绍
在js开发应用中我们通常会碰到"|"与"||"了,那么在运算中"|"与"||"是什么意思呢? 在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. Math.floor()用作向下取整. 3. Math.round() 我们数学中常用到的四舍五入取整. console.log(0.6|
-
javascript三元运算符用法实例
三元运算符用法实例: 如名字表示的三元运算符需要三个操作数. 语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2.满足条件时结果1否则结果2. 复制代码 代码如下: <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a="false"; document.write(" --------
-
Javascript 按位左移运算符使用介绍(<<)
按位左移运算符 (<<)左移表达式的位. result = expression1 << expression2 参数result 任何变量. expression1 任何表达式. expression2 任何表达式. 说明<< 运算符把 expression1 的所有位向左移 expression2 指定的位数.例如: var temptemp = 14 << 2变量 temp 的值为 56,因为 14 (即二进制的 00001110)向左移两位等于 56
-
教你JS中的运算符乘方、开方及变量格式转换
1)如何计算乘方 题一:3的4次方(不会打,请原谅 ==!!!) 3的4次方=3*3*3*3 var a = Math.pow(3,4); console.log(a); 说明:Math.pow()是用来计算乘方的语法 注意:Math的M是大写: 题二:3的4*5次方 var a =Math.pow(3,4*5); console.log(a); 2)如何计算根号 题目:根号81 var a = Math.sqrt(81); console.log(a); 变量格式转换 用户的输入 var ye
-
Javascript 按位取反运算符 (~)
复制代码 代码如下: result = ~ [数字] 所有一元运算符(如 ~ 运算符)都按照下面的规则来计算表达式的值: 复制代码 代码如下: 1. 如果应用于未定义的表达式或 null 表达式,则会引发一个运行时错误.2. 将对象转换为字符串.3. 如果可能,将字符串转换为数字. 否则,将引发运行时错误.4. 布尔值被视为数字(如果为 false,则为 0:如果为 true,则为 1). 运算符将应用于结果数字. ~ 运算符查看表达式的二进制表示形式的值,并执行位非运算. 表达式中的任何一位为
-
JS按位非(~)运算符与~~运算符的理解分析
那么,对于typeof var!=="number"的类型来说,进行运算时,会尝试转化成32位整形数据,如果无法转换成整形数据,就转换为NaN: JS在位运算上用了更简便的一种方法来实现这中运算,那么它的实现原理大致上可以这样理解: 复制代码 代码如下: var testData=-2.9; var testResult=(typeof testData==="number"&&!isNaN(testData)&&testData!=
-
JS中一些高效的魔法运算符总结
JavaScript 现在每年都会发一个新版本,里面也会新增一些操作更加便利.高效的运算符.今天我们就来盘点下几个高效的魔法运算符. 1. 可选链运算符 之前当我们想要使用某个结构比较深的属性,同时又无法确定所有的父级一定存在时,我们需要进行一连串的判断,例如一个数据结构: const student = { score: { math: 98, }, }; 我们想要获取最内层的 math 属性的值时: if (student && student.score) { console.log
-
浅析JS中常用类型转换及运算符表达式
JS中的常用类型转换(一般用强制转换): 1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); 3.检测类型:x = parseInt(x); alert(typeof(true)); JS中常用的运算符表达式: 1.逻辑运算符(布尔型):&& 并 :|| 或 :! 非 : 2.比较运算符:==(等于) :!=(不等于) : > :< :>=(大于等于)
-
浅谈JS中逗号运算符的用法
注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScript做举例. 最近重新阅读JavaScript权威指南这本书,应该说很认真的阅读,于是便想把所学的东西多记录下来.后 面本人将逐步写上更多关于本书的文章. 本文的理论知识来自于JavaScript权威指南,我这里做一下整理,或者说叫笔记. 如果你的基础够好的话,完全理解不成问题,但是如果读得有些郁闷的话,可以加我的QQ:
-
js中的 || 与 && 运算符详解
js中逻辑运算符在开发中可以算是比较常见的运算符了,主要有三种:逻辑与&&.逻辑或||和逻辑非!. 当&&和|| 连接语句时,两边的语句会转化为布尔类型(Boolean),然后再进行运算,具体的运算规则如下: 1.&& 1.1两边条件都为true时,结果才为true: 1.2如果有一个为false,结果就为false: 1.3当第一个条件为false时,就不再判断后面的条件 注意:当数值参与逻辑与运算时,结果为true,那么会返回的会是第二个为真的值:如果结
-
原生js中运算符及流程控制示例详解
运算符 算数:+ 加.- 减.* 乘./ 除.% 求模 赋值:=.+=.-=.*=./=.%= 关系:>.<. >=. <=. ==. ===. !=. !== 逻辑:||或.&&与.!否 实例1.求模 window.onload = function(){ alert(0%2) //0 alert(1%2) //1 alert(2%2) //0 } 实例2.隔行变色 <body> <ol> <li>取模:就是求余数</li
-
js中不常见的运算符与操作符总结
javaScript常用运算符和操作符总结 类别 操作符 算术操作符 +. –. *. /. %(取模) 字符串操作符 + 字符串连接 +=字符串连接复合 布尔操作符 !. &&. || 一元操作符 ++ . -- . +(一元加). -(一元减) 关系比较操作符 < . <= . > .>=. != . == . === . !== 按位操作符 ~ 按位非 &按位与 | 按位或 ^按位异或 <
-
JS中位运算符的一些妙用
目录 前言: 1.使用左移运算符<<迅速得出2的次方 2.使用^切换变量0或1 3.使用&判断奇偶性 4.使用!!将数字转为布尔值 5.使用~.>>.<<.>>>.|来取整 6.使用^来完成值交换 7.使用^判断符号是否相同 8.使用^来检查数字是否不相等 9.n&(n-1),如果为0,说明n是2的整数幂 10.使用A+0.5|0来替代Math.round() String 1.使用toString(16)取随机字符串 2.使用spli
-
js中继承的几种用法总结(apply,call,prototype)
一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> function Person(na
-
详解Node.js中的事件机制
前言 在前端编程中,事件的应用十分广泛,DOM上的各种事件.在Ajax大规模应用之后,异步请求更得到广泛的认同,而Ajax亦是基于事件机制的. 通常js给我们的第一印象就是运行在客户端浏览器上面的脚本,通过node.js我们可以在服务端运行javascript. node.js是基于单线程无阻塞异步式的I/O,异步式的I/O指的是当遇到I/O操作的时候,线程不阻塞而是进行下面的操作,那么I/O操作完成之后,线程时如何知道该操作完成的呢? 当操作完成耗时的I/O操作之后,会以事件的形式通知I/O操