位运算在平时代码中会有哪些意想不到的用处?
1、通过异或运算符 ^ 来实现交换变量值
javascript
let a = 9
let b = 8
a ^= b
b ^= a
a ^= b
console.log('a: '+ a,' b: ' + b)1
2
3
4
5
6
2
3
4
5
6
为什么?来一步步解析: 1、 a ^= b 等价于 a = a ^ b 2、 b ^= a 等价于 b = b ^ a 3、 a ^= b 等价于 a = a ^ b 将 1 代入 2 可得 4、 b = b ^ (a ^ b) = b ^ b ^ a = 0 ^ a = a;
变量b 和 变量b 二进制的每一位都相同,所以异或得: b ^ b = 0
将 1 代入 3 可得:a = (a ^ b) ^ b 由式子 4 可知第二个 b 已经赋值为了 a,所以 a = (a ^ b) ^ a = a ^ a ^ b = 0 ^ b = b 最终完成变量值的交换,不借助第三个临时变量,并且速度最快
2、取整
按位或运算符取整,只保留整数部分
javascript
console.log(3.9|0);// 3
console.log(-3.9|0);// -31
2
2
仅限于不超过32位整数最大值2147483647的数
javascript
console.log(2147483648.2|0);// -21474836481
异或运算符取整,只保留整数部分
javascript
console.log(3.9^0);// 3
console.log(-3.9^0);// -31
2
2
左移运算符取整,只保留整数部分
javascript
console.log(3.9<<0);// 3
console.log(-3.9<<0);// -31
2
2
按位取反运算符取整,只保留整数部分 (貌似是取整算法最快的一种) 对自身两次取反得到本身,但是位运算是对整数运算,遇到小数就会舍去
javascript
console.log(~~3.9);// 3
console.log(~~-3.9);// -31
2
2
对除了整数以外的类型进行否运算,js会先调用Number函数
javascript
~[] = -1 // ~[]等价于~Number([])
~null = -a // ~null等价于~Number(null)1
2
2
3、乘以2的指定次方计算
利用左移运算符,可以快速计算 某个数乘以2的指定次方。举个栗子:
| 左移0位 | 左移1位 | 左移2位 | |
|---|---|---|---|
| 运算 | 2<<0 | 2<<1 | 2<<2 |
| 二进制 | 0010 | 0100 | 1000 |
| 十进制 | 2 | 4 | 8 |
| 等价于 | 2×2^0^ | 2×2^1^ | 2×2^2^ |
| 负数也一样,所以要快速计算 4 × 2^3^: |
javascript
console.log(4<<3);// 32
console.log(-4<<3);// -321
2
2
4、除以2的指定次方计算
同理,利用右移运算符,可以快速计算 某个数除以2的指定次方。举个栗子:
| 左移0位 | 左移1位 | 左移2位 | |
|---|---|---|---|
| 运算 | 4>>0 | 4>>1 | 4>>2 |
| 二进制 | 0100 | 0010 | 0001 |
| 十进制 | 4 | 2 | 1 |
| 等价于 | 4÷2^0^ | 4÷2^1^ | 4÷2^2^ |
| 负数也一样,所以要快速计算 8 ÷ 2^3^: |
javascript
console.log(8>>3);// 1
console.log(-8>>3);// -1
// 也可以保留除数的整数部分
console.log(10>>2);// 21
2
3
4
5
2
3
4
5
5、rgb色值转十六进制
| 颜色 | r | g | b |
|---|---|---|---|
| 白色 | 255 | 255 | 255 |
| 二进制 | 11111111 | 11111111 | 11111111 |
| 将r、g、b的二进制合一起: | |||
| r的二进制左移16位、g的二进制左移8位,剩下8位给b: | |||
| rgb二进制转十六进制 | |||
| - | - | ||
| r | 111111110000000000000000 | ||
| g | 000000001111111100000000 | ||
| b | 000000000000000011111111 | ||
| 相加(或者按位或) | 111111111111111111111111 | ||
| 十六进制 | ffffff |
javascript
const color = {r:255,g:255,b:255}
let hex = '#' + ((color.r << 16) + (color.g << 8) + color.b).toString(16)
console.log(hex);// #ffffff1
2
3
2
3