js位运算的一个案例解析

js中位运算用的比较少，虽然直到位运算效率更高，但是实际项目里却是想不起来用。

偶然看到一段代码，觉得挺巧妙（也许只是我单纯觉得巧妙）就分析了一下。

let res = (Math.floor(Math.random() * 0xff) << 16)
        + (Math.floor(Math.random() * 0xff) << 8)
        +  Math.floor(Math.random() * 0xff)

这段代码会返回一个随机的颜色值，结果转换为16进制就可以直接用于显示颜色。

分析

我们知道 Math.random() 的结果是 [0, 1)，0xff转为十进制是255 ，转为 2进制 是1111 1111

所以可以得知 Math.random() * 0xff 的范围就是 [0, 255)，也就是[0, 0xff)。

而颜色的最大值就是 rgb(255, 255, 255)，即0xffffff。

转为16进制是 1111 1111 1111 1111 1111 1111。

那么 0xff << 16 就是 1111 1111 0000 0000 0000 0000。

同理可得

0xff << 8 是 1111 1111 0000 0000

0xff 是 1111 1111

所以 上述代码 res的最大值为 三者相加 即 1111 1111 1111 1111 1111 1111

就是 0xffffff 最小值 自然就是0x000000

所以 上述代码会返回一个随机的颜色值。

在js中使用转为16进制颜色值

// 先获取16进制字符串
let hex = res.toString(16);
// 因为css中颜色需要用6位16进制，有可能随机生成的res转为16进制后不够6位，所以需要在前面补0
let zero = '000000';
let zeroCount = 6 - hex.length;
// 拼接最终的颜色值 例如 #ff0000
let color = '#' + zero.substr(0, zeroCount) + hex;