遇到二进制和位操作问题无从下手？ 考虑一下">>>"和">>"！！！

序言

我们知道，在 JavaScript 中，位运算符是用于处理数字的二进制表示的操作符。这些运算符包括 >>>（无符号右移）、>>（有符号右移）和 >>>=（无符号右移赋值）。当我们遇到需要对位级别的操作进行优化或处理二进制数据时，结合这些位运算符的使用会有奇效。那么话不多嗦，让我们开始学习今天的主题，掌握这些运算符拿捏位操作问题！

一、 >>>（无符号右移运算符）

无符号右移运算符（>>>） （又称零填充右移），他的功能是将左操作数计算为无符号数，并将该数字的二进制表示形式移位为右操作数指定的位数，取模 32。向右移动的多余位将被丢弃，零位从左移入。其符号位变为 0，因此结果始终为非负数。通俗来讲就是这个运算符执行了一个非常特殊的操作，将一个数字的二进制表示向右移动指定的位数，并用零填充左侧，结果始终会是非负数。

语法

x >>> y;

描述

>>> 运算符将数字 x 的二进制表示向右移动 y 位，并使用零填充左侧,所以其表示的结果永远都是非负数。

示例

const a = 5; //  00000000000000000000000000000101
const b = 2; //  00000000000000000000000000000010
const c = -5; //  11111111111111111111111111111011

console.log(a >>> b); //  00000000000000000000000000000001
// 输出 1

console.log(c >>> b); //  00111111111111111111111111111110
// 输出 1073741822

1. console.log(a >>> b) ：使用 >>> 运算符将 a 的二进制值向右移动 2 位。这导致二进制值为 00000000000000000000000000000001，即十进制值为 1。因此，输出 1。
2. console.log(c >>> b)：使用 >>> 运算符将 c 的二进制值向右移动 2 位。由于 >>> 执行无符号右移，它在左侧填充零，导致二进制值为 00111111111111111111111111111110。这个二进制转为十进制值为 1073741822。因此，输出 1073741822。

注意

1. 零填充左侧： 无符号右移总是用零填充左侧，这是与有符号右移运算符的主要区别。
2. 不影响原始值： 无符号右移不会改变原始值，它只是返回一个新的值。
3. 操作数类型： 这个运算符通常用于整数，但如果你对一个浮点数应用它，那么 JavaScript 会先将浮点数转换为整数，然后再进行位移操作。

总结

>>> 称无符号右移运算符，它提供了一种特殊的二进制数右移操作，不考虑符号位，始终使用零填充左侧,因此其结果始终是非负数。它通常用于需要确保结果为正整数的情况，例如一些位级操作或数据处理场景。

二、 >>（有符号右移运算符）

有符号右移运算符 （ >> ）（又称算术右移），这个运算符会将一个操作数的二进制表示形式向右移动指定位数，该操作数可以是数值或者 BigInt 类型。与">>>"运算符不同的是其右边移出位会被丢弃，但是会在其最左边空位补符号位（表示数组的正负），符号位与第一个操作数的符号位相同。通俗来讲就是这个运算符执行了一个非常特殊的操作，将一个数字的二进制表示向右移动指定的位数，并用符号位填充左侧，这个符号位的值与之前最左边值是相同的。

语法

x >> y;

描述

>> 运算符将数字 x 的二进制表示向右移动 y 位，并使用符号位进行填充。符号位是二进制数中最左侧的位，二进制数中表示正负数的符号。比如说如果原始值是正数，则使用0填充左侧；如果原始值是负数，则使用1填充左侧。

示例

const a = 5; //  00000000000000000000000000000101
const b = 2; //  00000000000000000000000000000010
const c = -5; //  11111111111111111111111111111011

console.log(a >> b); //  00000000000000000000000000000001
// 输出: 1

console.log(c >> b); //  11111111111111111111111111111110
// 输出 -2

1. console.log(a >> b) ：使用 >> 运算符将 a 的二进制值向右移动 2 位。这导致二进制值为 00000000000000000000000000000001，即十进制值为 1。因此，输出为 1。
2. console.log(c >> b) ：使用 >> 运算符将 c 的二进制值向右移动 2 位。由于 >> 执行有符号右移，它使用符号位（也就是原最左边的数1）进行填充。导致二进制值为 11111111111111111111111111111110。这个二进制表示等于十进制值 -2。因此，输出为 -2。

注意

1. 符号位填充： 有符号右移使用符号位进行填充左侧，这是与无符号右移运算符 >>> 的主要区别。
2. 不改变原始值： 有符号右移运算符不会改变原始值，而是返回一个新的值。
3. 操作数类型： 通常，有符号右移运算符用于整数。如果你对一个浮点数应用它，JavaScript 会先将浮点数转换为整数，然后再进行位移操作。

总结

>> 称有符号右移运算符。使用这个运算符会将一个数字的二进制表示向右移动指定的位数，并用符号位填充左侧，这个符号位的值与之前最左边值是相同的。虽然在一般应用程序开发中使用较少，但在一些需要进行位操作的特定场景中，它是一个很有用的工具。

三、 >>>=（无符号右移赋值运算符）

>>>= 运算符用于对数字的二进制表示执行无符号右移操作，并将结果赋给左侧的变量。通俗来讲就是先执行>>>操作后在执行=赋值操作。

语法

x >>>= y;

描述

>>>= 运算符将变量 x 的二进制表示向右移动 y 位，并使用零填充左侧，然后将结果赋给 x。这是 >>> 运算符的赋值版本。

示例

let a = 5; //   (00000000000000000000000000000101)
a >>>= 2; 
console.log(a)//输出 1 (00000000000000000000000000000001)

let b = -5; // (-00000000000000000000000000000101)
b >>>= 2; 
console.log(b)//输出 1073741822 (00111111111111111111111111111110)

1. console.log(a) ：使用 >>>= 无符号右移赋值运算符将a的二进制值右移 2 位后，由于无符号右移操作会用零填充左侧，因此其二进制表示变成了 00000000000000000000000000000001，即十进制值为 1，最后并将a 更新为整数 1。
2. console.log(b) ：使用 >>>= 无符号右移赋值运算符右移 2 位后，因为无符号右移会用零填充左侧，而不管符号位是什么，所以二进制表示变成了 00111111111111111111111111111110，即十进制值为 1073741822。最后将b 更新为 整数1073741822。

注意

1. 零填充左侧： >>>= 运算符始终使用零填充左侧，不考虑符号位。这是与有符号右移赋值运算符 >>= 的主要区别。
2. 原始值更新： >>>= 不仅执行右移操作，还将结果赋值给左侧的变量，因此会改变变量的原始值。
3. 操作数类型： 通常，>>>= 运算符用于整数。如果你对一个浮点数应用它，JavaScript 会先将浮点数转换为整数，然后再进行位移操作。

总结

>>>= 称无符号右移赋值运算符，其用于执行无符号右移操作并更新变量值。总的来说，其先会对最操作数执行>>>运算，然后执行=赋值操作，修改原始值。与其相似的>>=称有符号右移赋值运算符也可以说是算数右移赋值运算符，其实也就是先执行有符号右移运算操作然后将结果赋值给原操作数。

结语

那么到了这里我们今天的文章就结束啦~

创作不易，如果感觉这个文章对你有帮助的话，点个赞吧♥

更多内容：来了解一下Array.flat()降维处理嵌套数组 并尝试手写一个Array.flat()源码

博主的开源Git仓库: gitee.com/cheng-bingw...