小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
脑子好像一直还停留在ES6的时代,手下的代码仿佛更古老,其实不知觉已经来到了ES2021的世界,今天见识一下一些新增的操作符。
逗号运算符 ,
孤陋寡闻的我,不知道逗号竟然也是操作符了。
代码见分晓: 将数组的第一项和第二项调换,并返回两项之和
<script>
function sum(arr) {
return ([arr[0], arr[1]] = [arr[1], arr[0]]), arr[0] + arr[1];
}
const list = [1, 2];
console.log(sum(list));// 返回 3,此时 list 为[2, 1]
</script>
逗号操作符对它的每个操作数求值(从左到右),并返回最后一个操作数的值。
数值分割符 _
ES2021 引入了数值分割符 _,在数值组之间提供分隔,使一个长数值读起来更容易。Chrome 已经提供了对数值分割符的支持,可以在浏览器里试一试。
let number = 100_0000_0000// 0 太多了不用数值分割符眼睛看花了
console.log(number) // 输出 10000000000
除此之外,十进制的小数部分也可以使用数值分割符,二进制、十六进制里也可以使用数值分割符。
0x11_1 === 0x111 // true 十六进制
0.11_1 === 0.111 // true 十进制的小数
0b11_1 === 0b111 // true 二进制
空值合并运算符 ??
?? 是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回右侧操作数,否则返回左侧操作数。
let num1;
let num2 = 2;
num1 ?? num2
let num1 = 3;
let num2 = 2;
num1 ?? num2
双位运算符 ~~
双否定位操作符的优势在于它执行相同的操作运行速度更快,可以使用双位操作符来替代正数的 Math.floor( ),替代负数的 Math.ceil( )。
Math.floor(4.9) === 4; // true
// 双位运算符 ~~
~~4.9 === 4; // true
短路运算符 && 与 ||
短路运算符就是从左到右的运算中前者满足要求,就不再执行后者了。
&&为取假运算,从左到右依次判断,如果遇到一个假值,就返回假值,以后不再执行,否则返回最后一个真值||为取真运算,从左到右依次判断,如果遇到一个真值,就返回真值,以后不再执行,否则返回最后一个假值
三元表达式
如果 num2 === 0 为真值则返回 num2,否则返回 num3
const num = num2 === 0 ? num2 : num3;
赋值运算符简写
-
加法赋值
+= -
减法赋值
-= -
乘法赋值
*= -
除法赋值
/= -
求幂赋值
**= -
按位或复制
|= -
按位与赋值
&= -
有符号按位右移赋值
>>= -
无符号按位右移赋值
>>>= -
逻辑空赋值
??=