JS 中强大的操作符

506 10-15

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

双位运算符 ~~

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

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

短路运算符 && 与 ||

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

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

三元表达式

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

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

标签： JavaScript