1. 测试想法
在读js 红宝书的时候，在书上看到位运算属于底层运算比直接运算速度要快，因此想要验证下
红宝书原文.png
2.测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试位运算符速度</title>
</head>
<body>
<script>
const loopNum = 999999999
const runNum = 50
function loop (loopNum) {
const start1 = performance.now()
for (let index = 0; index < loopNum; index++) {
let res = ~25
}
const end1 = performance.now()
const start2 = performance.now()
for (let index = 0; index < loopNum; index++) {
let res = -25 - 1
}
const end2 = performance.now()
// 多数情况下 位操作符更快 但是差距有限 仅有几十ms 百分之3左右 580 / 597 除非极限条件下 否则平常开发 基本无区别
return {
time1: end1 - start1,
time2: end2 - start2
}
}
const runData = []
for (let index = 0; index < runNum; index++) {
runData.push(loop(loopNum))
}
const finalRes = runData.reduce((a, b) => {
const res = {
time1: a.time1 + b.time1,
time2: a.time2 + b.time2
}
return res
}, { time1: 0, time2: 0 })
console.log('测算结果', finalRes) // zdz-log
console.log('测算平均值', finalRes.time1 / runNum, finalRes.time2 / runNum) // zdz-log
</script>
</body>
</html>
3.测试结果
前面为位运算结果，后面为直接计算结果,计算运算次数9999999次，循环50次取平均值
虽然电脑运行状态在某一时刻都是不同的，实验并没有保证完全其余变量相同，但是结果大致是准确的
根据结果可以看出两者差距很小，在正常业务代码中的运算次数不会导致两者存在差距
结果1.png
结果2.png
4.位运算的一个应用
位预算在React中用作了状态标记和一些类型判断
优点
节省内存：使用二进制可以将多个状态或类型合并到一个整数中，从而减少了存储这些信息所需的内存空间。
提高效率：位运算操作相比于其他逻辑运算通常更加高效，可以在一条指令中完成多个状态或类型的判断和设置，从而提高了程序的执行效率。
便于扩展：使用位掩码技术可以轻松地添加新的状态或类型，只需在现有的位上进行操作，而不需要重新定义数据结构。
-
代码简洁性：通过使用位运算，可以将多个状态或类型的操作集中在一处，使代码更加清晰简洁，减少了重复的逻辑判断
image.png
举个简单列子,如果要记录 两个灯泡的开关有几种方式
- 两个变量
let lamp1 = true
let lamp2 = false
// 修改
lamp1 = false
lamo2 = true
- 2.一个变量
let lamp = []
lamp.push('lamp1')
// 数组中无对应灯名字 代表关闭
lamp = lamp.filter(item => item === 'lamp1')
- 3 使用位运算
通过常量预先定义对应状态 可以在一个变量上保存多个状态,而仅仅使用一个数值就可以做到
// 第一位0 与第二位0 代表灯1 灯2 都是关闭
const lamp1 = 0b10
const lamp2 = 0b01
const lamp12 = 0b11
let lamp = 0b00
// 开启灯1
lamp = lamp | lamp1
console.log(lamp.toString(2))
// 开启灯2
lamp = lamp | lamp2
console.log(lamp.toString(2))
// 关闭灯1
lamp = lamp & ~lamp1
console.log(lamp.toString(2))
运行结果.png
