准备知识

2进制和16进制

• 0x开头是16进制

0x2000000

• 0b开头是2进制

export const Deletion = 0b00000000000000001000;

进制转换

数字转换成字符串

numObj.toString([radix])

• 十进制转换成二进制

var num=100;
num.toString(2); // "1100100"

解析一个字符串并返回指定基数的十进制整数

Number.parseInt(string[, radix])

• 16进制转换成十进制

var num=2000000; 
parseInt(num,16); // 33554432

计算

&：按位与

var a = 0b100;
var b = 0b1100;
var res = a & b;
console.log(res.toString(2));// 100

|：按位或

var a = 0x100;
var b = 0x2000;
var res = a | b;
console.log(res.toString(16));// 2100

应用场景

描述

用于表示各种状态的叠加态。

通常解法

通俗一点说，今天吃的水果沙拉有西瓜、芒果、草莓。
那用js怎么表示这样的状态呢？通常情况我们肯定是使用数组：

var watermelon = '1';
var mango = '2';
var strawberry = '3';

var salad = [watermelon, mango, strawberry];

判读沙拉里是否有芒果

salad.includes(mango);

这样有啥问题吗？
又不是不能用，倒也没啥大的问题。但是对于一段高频代码来说，使用数组反复做push、pop、includes这种操作只是为了维护某个状态，并不是最优解。

位运算解法

flags

在React中有这样的应用。
fiber可以理解为React中虚拟Dom节点，使用fiber.flags来描述该节点要执行DOM操作的具体类型。

/* react/packages/react-reconciler/src/ReactFiberFlags.js */
// DOM需要插入到页面中
export const Placement = /*                    */ 0b00000000000000000010;
// DOM需要更新
export const Update = /*                       */ 0b00000000000000000100;
// DOM需要插入页面中并更新
export const PlacementAndUpdate = /*           */ Placement | Update;
// DOM需要删除
export const Deletion = /*                     */ 0b00000000000000001000;

bitField

bluebird中对于promise状态的部分描述如下

/* bluebird-master/src/constants.js */
CONSTANT(IS_FULFILLED, 0x2000000|0);
CONSTANT(IS_REJECTED, 0x1000000|0);
CONSTANT(WILL_BE_CANCELLED, 0x800000|0);
CONSTANT(IS_FINAL, 0x400000|0);
CONSTANT(IS_BOUND, 0x200000|0);

/* bluebird-master/src/promise.js */
Promise.prototype._setFulfilled = function () {
    this._bitField = this._bitField | IS_FULFILLED;
    this._fireEvent("promiseFulfilled", this);
};

Promise.prototype._isFollowing = function () {
    return (this._bitField & IS_FOLLOWING) === IS_FOLLOWING;
};

状态判定

commitMutationEffects

水果沙拉位运算应用

观察上面的例子，可以把数组解法改成这样

var watermelon = 0b001;
var mango = 0b010;
var strawberry = 0b100;

var salad = watermelon| mango|strawberry;

var res = (salad & mango) === mango;
console.log(res); // true

最大整数范围

js中能表示的最大整数为2^53
所以使用这个方法按每个状态只有一个1来算，能存53个状态。

THE END