JavaScript位运算的妙用

位运算的妙用: 奇偶数, 色值换算,换值, 编码等

位运算的基础知识:

1. 操作数是32位整数
2. 自动转化为整数
3. 在二进制下进行运算

一.按位与&

判断奇偶数:

1. 奇数: num & 1 == 1
2. 偶数: num & 1 == 0

基本知识:

1. 用法：操作数1 & 操作数2
2. 规则：有 0 则为 0，双 1 则为 1
3. 原理：先将操作数1和操作数2转为二进制数，按照第2步进行计算

二.按位或|

按位或|取整

1. num | 0

        eg: 5.23 | 0 => 5.23 | 0的结果是5

按位或|

1. 自身|自身=自身,可以比较数值相等(仅限于整数)

三.按位非~

按位非远算符(~),反转操作数的位. 表象是对数字为负, 然后减去1(-x-1)

        eg: ~9 = -9 -1 = -10

按位非~: 判断数组中是否包含某个元素

1. 不存在, indexOf返回-1
2. ~-1 = -(-1)-1=1-1=0
3. ~arr.indexOf(val) => 数组中存在val这个值时~arr.indexOf(val) !==0;  数组中不存在这个元素时 ~arr.indexOf(val)===0;
4. if(~arr.indexOf(val)) {} // 如果数组中存在val

按位非~取整

1. ~~x 

        eg: ~~5.5677878 // 5

四.按位异或^

按位异或^ 归零律,恒等律,自反,集合律

1. 归零律: a^a=0; 自己异或自己,位数上的值肯定相同
2. 恒等律:a^0=a; 自己异或自己, 自己是啥结果是啥
3. 自反: a^a^a=0^a = a; a三次^等于它自己
4. 集合律: a^b^c == c^b^a, 与顺序无关

按位异或^ 值交换

1. 变量值为数字,完成值的交换(不用增加临时变量)

示例: 

let a = 10
let b = 20
a^=b //=> a = b^a => a^b
b^=a //=> b = a^b => (a^b) ^b => a ^ (b^b) =>  a ^ 0 =>  a => 结果是b=a
a^=b //=> a = b^a => b^b^b ^ (a^a) => b ^ 0 => b =>结果是: a = b
console.log('a:', a) // 20
console.log('b:', b) // 10

五.左移运算符：<<

<< 运算符执行左移位运算。

在移位运算过程中，符号位始终保持不变。

如果右侧空出位置，则自动填充为 0；

超出 32 位的值，则自动丢弃

console.log(5 << 2); // 20

基本知识:

1. 用法：操作数1 << 左移位数
2. 规则：符号位不变，按位左移，右边补0
3. 原理：先把操作数1转换为二进制数

六.右移运算符：>>

>> 运算符执行有符号右移位运算。

与左移运算操作相反，它把 32 位数字中的所有有效位整体右移，再使用符号位的值填充空位。

移动过程中超出的值将被丢弃。

console.log(1000 >> 8); // 3

基本知识:

1. 用法：操作数1 >> 右移位数
2. 规则：符号位不变，按位右移，左边补0
3. 原理：先把操作数1转换为二进制数

七.二进制和十进制互转方法:

因为计算机很多运算都直接或间接涉及二进制, 所以提一下相关知识:

7-1: 人工计算法则:

7-1-1: 二进制转十进制:

1. 小数点: 从右到左用二进制的每个数乘以2的相应次方递增
2. 小数点后: 从左到右用二进制的每个数乘以2的相应负次方递增

eg: 将1001.011转换为十进制?

整数部分(从右向左): 1*2^0 + 0*2^1+0*2^2+1*2^3=1+0+0+8=9

小数部分(从左到右): 0*2^-1+1*2^-2+1*2-3=0+1/4+1/8=0+0.25+0.125=0.375

注意: 这里的^不是位移符,是代表数字里的某某次方,比如2^3代表2的3次方

所以1001.011转换为十进制的数字是9.375

7-1-2: 十进制转换二进制:

1. 整数: 除2取余,逆序排列
2. 乘2取整,顺序排列

比如9.375

整数部分:

9 / 2 => 商4, 余1

4 / 2=> 商2, 余0

2 / 2=> 商1, 余0

1/2=> 商0, 余1

小数部分: 0.375

0.375 * 2 => 0.75 => Math.floor => 0(小于1, 所以继续)

0.75 * 2 => 1.5 => Math.floor => 1(但是余下0.5,继续)

0.5 * 2 => 1 => Math.floor => 1 (如果得到整数1, 没有小数部分就结束)

所以9.375转化为二进制数字是1001.011

7-2: JavaScript提供的二进制与十进制互转方法:

1. 二进制转十进制方法: parseInt

parseInt(string, radix) 

eg: console.log(parseInt(1010,2)); // 10

如果是小数, 没有现成的方法, 需要代码:

// 小数部分 => 数字*(2的index次方)
function eachBinaryDigitPartToDecimal(binaryDigitPartArr) {return binaryDigitPartArr.map((currentValue, index) => {return Number(currentValue) * Math.pow(2, (-(index + 1)))})
}
// 如果该二进制只有整数部分则直接用 parseInt(string, radix) 处理
function eachBinaryIntPartToDecimal(binaryDigit) {return parseInt(binaryDigit, 2)
}/**
* 将二进制小数（包含整数部分和小数部分）转换为十进制数
* @param binaryDigit 二进制数（可能是整数，也可能是小数）
*/
function floatToDecimal(binaryDigit) {// 如果该二进制只有整数部分则直接用 parseInt(string, radix) 处理if (Number.isInteger(binaryDigit)) {return eachBinaryIntPartToDecimal(binaryDigit)} else {// 将整数和小数部分的数字分开组成一个数组, 第一个元素是整数部分的数字, 第二个元素是小数部分的数字const binaryDigitNumArr = binaryDigit.toString().split(".")// 将二进制整数转换为十进制数const binaryIntParStr = binaryDigitNumArr[0]const decimalIntPartNum = eachBinaryIntPartToDecimal(binaryIntParStr)// 将二进制小数部分转换为十进制数const binaryDigitPartArr = binaryDigitNumArr[1].split("") // 将数字split成小数部分的每个数字作为元素的一元数组const eachDecimalFloatPartNum = eachBinaryDigitPartToDecimal(binaryDigitPartArr) // 数组的数字变成item * 2^(-index)const deciamlFloatPartNum = eachDecimalFloatPartNum.reduce((val, currentVal) => val + currentVal) // 数组元素相加return decimalIntPartNum + deciamlFloatPartNum}
}

2. 十进制转二进制: 字符串.toString(2)

同理: 十进制转16进制是: 字符串.toString(16)

eg: 

const number = 10
console.log(number.toString(2)); // 1010

运用场景:

rgb和16进制颜色相互转换:

function colorRGBToHex(rgb) {// split的参数可以是正则const rgbArr= rgb.split(/[^\d]+/)// ['',  '数字1', '数字2', '数字3', '']const color = rgbArr[1] << 16 | rgbArr[2] << 8 | rgbArr[3];return `#${color.toString(16)}`
}
console.log(colorRGBToHex('rgb(204, 0, 255)'))// 16进制转rgb格式
function colorHexToRGB(hex) {// 转为6位的16进制, 0x??????let newHex = hex.replace('#', '0x'),r = newHex >> 16,g = newHex >> 8 & 0xff,b = newHex & 0xffreturn `rgb(${r},${g},${b})`
}
console.log(colorHexToRGB('#CC00FF'))