JavaScript位运算的妙用
位运算的妙用: 奇偶数, 色值换算,换值, 编码等
位运算的基础知识:
- 操作数是32位整数
- 自动转化为整数
- 在二进制下进行运算
一.按位与&
判断奇偶数:
- 奇数: num & 1 == 1
- 偶数: num & 1 == 0
基本知识:
- 用法：
操作数1 & 操作数2 - 规则：有 0 则为 0，双 1 则为 1
- 原理：先将
操作数1和操作数2转为二进制数，按照第2步进行计算
二.按位或|
按位或|取整
- num | 0
eg: 5.23 | 0 => 5.23 | 0的结果是5
按位或|
- 自身|自身=自身,可以比较数值相等(仅限于整数)
三.按位非~
按位非远算符(~),反转操作数的位. 表象是对数字为负, 然后减去1(-x-1)
eg: ~9 = -9 -1 = -10
按位非~: 判断数组中是否包含某个元素
- 不存在, indexOf返回-1
- ~-1 = -(-1)-1=1-1=0
- ~arr.indexOf(val) => 数组中存在val这个值时~arr.indexOf(val) !==0; 数组中不存在这个元素时 ~arr.indexOf(val)===0;
- if(~arr.indexOf(val)) {} // 如果数组中存在val
按位非~取整
- ~~x
eg: ~~5.5677878 // 5
四.按位异或^
按位异或^ 归零律,恒等律,自反,集合律
- 归零律: a^a=0; 自己异或自己,位数上的值肯定相同
- 恒等律:a^0=a; 自己异或自己, 自己是啥结果是啥
- 自反: a^a^a=0^a = a; a三次^等于它自己
- 集合律: a^b^c == c^b^a, 与顺序无关
按位异或^ 值交换
- 变量值为数字,完成值的交换(不用增加临时变量)
示例:
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 << 左移位数 - 规则：符号位不变，按位左移，右边补0
- 原理：先把
操作数1转换为二进制数
六.右移运算符：>>
>> 运算符执行有符号右移位运算。
与左移运算操作相反，它把 32 位数字中的所有有效位整体右移，再使用符号位的值填充空位。
移动过程中超出的值将被丢弃。
console.log(1000 >> 8); // 3
基本知识:
- 用法：
操作数1 >> 右移位数 - 规则：符号位不变，按位右移，左边补0
- 原理：先把
操作数1转换为二进制数
七.二进制和十进制互转方法:
因为计算机很多运算都直接或间接涉及二进制, 所以提一下相关知识:
7-1: 人工计算法则:
7-1-1: 二进制转十进制:
- 小数点: 从右到左用二进制的每个数乘以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: 十进制转换二进制:
- 整数: 除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'))