JavaScript位运算的妙用

位运算的妙用: 奇偶数, 色值换算,换值, 编码等位运算的基础知识:操作数是32位整数自动转化为整数在二进制下进行运算一.按位与判断奇偶数:奇数: num 1 1偶数: num 1 0基本知识:用法操作数1 操作数2规则有 0 则为 0双 1 则为 1原理先将操作数1和操作数2转为二进制数按照第2步进行计算注意事项实际工作中更多使用 % 2判断奇数与偶数奇数: num % 2 1偶数: num % 2 0因为除以2判断余数的数学逻辑更简单易于理解。二.按位或|按位或|取整num | 0eg: 5.23 | 0 5.23 | 0的结果是5按位或|自身|自身自身,可以比较数值相等(仅限于整数)空值合并运算符?? nullish coalescing operator当左侧为 null 或 undefined 时返回右侧的值否则返回左侧的值。null ?? default // default undefined ?? default // default 0 ?? default // 0 ?? default // false ?? default // false与 || 的区别|| 会将所有 空 值0、、false、null、undefined、NaN都视为无效0 || default // default 0 被跳过 0 ?? default // 0 0 被保留使用场景所以当你只想在值为 null/undefined 时才用默认值应该用 ??。三.按位非~按位非远算符(~),反转操作数的位. 表象是对数字为负, 然后减去1(-x-1)eg: ~9 -9 -1 -10按位非~: 判断数组中是否包含某个元素不存在, indexOf返回-1~-1 -(-1)-11-10~arr.indexOf(val) 数组中存在val这个值时~arr.indexOf(val) !0; 数组中不存在这个元素时 ~arr.indexOf(val)0;if(~arr.indexOf(val)) {} // 如果数组中存在val按位非~取整~~xeg: ~~5.5677878 // 5四.按位异或^按位异或^ 归零律,恒等律,自反,集合律归零律: a^a0; 自己异或自己,位数上的值肯定相同恒等律:a^0a; 自己异或自己, 自己是啥结果是啥自反: a^a^a0^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 结果是ba 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^10*2^21*2^310089小数部分(从左到右): 0*2^-11*2^-21*2-301/41/800.250.1250.375注意: 这里的^不是位移符,是代表数字里的某某次方,比如2^3代表2的3次方所以1001.011转换为十进制的数字是9.3757-1-2: 十进制转换二进制:整数: 除2取余,逆序排列乘2取整,顺序排列比如9.375整数部分:9 / 2 商4, 余14 / 2 商2, 余02 / 2 商1, 余01/2 商0, 余1小数部分: 0.3750.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.0117-2: JavaScript提供的二进制与十进制互转方法:1. 二进制转十进制方法: parseIntparseInt(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) gt; val currentVal) // 数组元素相加 return decimalIntPartNum deciamlFloatPartNum } }2. 十进制转二进制: 字符串.toString(2)同理: 十进制转16进制是: 字符串.toString(16)eg:const number 10console.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 0xff return rgb(${r},${g},${b}) } console.log(colorHexToRGB(#CC00FF))八.注意事项与性能考量性能优势位运算直接对二进制位进行操作JS 引擎通常可以将其映射为底层 CPU 的位操作指令因此在某些场景下位运算比等价算术运算或数学函数调用更轻量。例如判断奇偶、快速取整、变量交换、颜色值转换等操作使用位运算可以减少函数调用或中间变量。不过在现代 JS 引擎中这种性能差异通常很小。普通业务代码里可读性和可维护性往往比微小的性能收益更重要。常见陷阱运算符优先级位运算符的优先级低于比较运算符例如num 1 1会被解析为num (1 1)。建议显式加括号写成(num 1) 1。只适用于整数JS 位运算会把操作数转换为 32 位有符号整数浮点数、大整数或超过 32 位范围的数值都可能产生意料之外的结果因此不适用于需要精确小数或超大整数的场景。可读性较差~~x、num | 0这类写法不如Math.floor(x)、Math.trunc(x)直观团队协作时容易增加理解成本。符号位影响有符号右移会保留符号位负数右移的结果可能不符合直觉使用时应特别注意。使用建议推荐使用的场景判断奇偶、快速取整等语义明确的轻量操作。颜色值换算、权限标记、枚举组合等需要按二进制位表示状态的场景。经过性能测试确认存在性能瓶颈的热点代码。应谨慎使用的场景涉及浮点数、负数或可能超出 32 位范围的运算。业务逻辑复杂、团队成员对位运算不熟悉的项目。没有明确性能收益仅为了炫技而使用位运算。