JS 中总有几个你没听说过的强大操作符

2,923 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

脑子好像一直还停留在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

image.png

let num1 = 3;
let num2 = 2;
num1 ?? num2

image.png

双位运算符 ~~

双否定位操作符的优势在于它执行相同的操作运行速度更快,可以使用双位操作符来替代正数的 Math.floor( ),替代负数的 Math.ceil( )

Math.floor(4.9) === 4; // true
//  双位运算符 ~~
~~4.9 === 4;  // true

短路运算符 && 与 ||

短路运算符就是从左到右的运算中前者满足要求,就不再执行后者了。

  • && 为取假运算,从左到右依次判断,如果遇到一个假值,就返回假值,以后不再执行,否则返回最后一个真值
  • || 为取真运算,从左到右依次判断,如果遇到一个真值,就返回真值,以后不再执行,否则返回最后一个假值

三元表达式

如果 num2 === 0 为真值则返回 num2,否则返回 num3

 const num = num2 === 0 ? num2 : num3;

赋值运算符简写

  • 加法赋值 +=

  • 减法赋值 -=

  • 乘法赋值 *=

  • 除法赋值 /=

  • 求幂赋值 **=

  • 按位或复制 |=

  • 按位与赋值 &=

  • 有符号按位右移赋值 >>=

  • 无符号按位右移赋值 >>>=

  • 逻辑空赋值 ??=