javascript - 本函数中JavaScript位运算符的解释

Question

我有这个代码块:

EventBus.on('pfio.inputs.changed', function(state, prev_state) {
    var changed = prev_state ^ state;
    for (var pin = 0; pin < 8; pin++) {
        if ((changed & (1 << pin)) === (1 << pin)) {
            EventBus.emit('pfio.input.changed', pin, ((state & (1 << pin)) === (1 << pin)));
        }
    }
});

state 将是一个 8 位数字:00000000
prev_state 将是一个 8 位数字:11001110

这些数字与开关状态相关，因此 state 中的第一个表示引脚 1 关闭。在prev_state中，第一个1表示开关8打开。

我理解简单的代码执行，就是这些我无法理解的部分:

(changed & (1 << pin)) === (1 << pin))

((state & (1 << pin)) === (1 << pin)));

prev_state ^ state;

对此事的任何解释都会有很大帮助!

Answer 1

^是 XOR运算符 - 给定两个数字，它“排列”它们的位置并仅当两个数字中只有一个有那个位置时翻转位置:

// All of these are binary
111 ^ 111 === 000
110 ^ 111 === 001
110 ^ 110 === 000

这意味着changed将是一个数字，其中只有那些在 prev_state 中设置的位置或 state但不是两者。

至于<<那是左移运算符 - 它有效地将左侧数字乘以右侧数字的 2 次方:

// Decimal numbers on the left, binary numbers on the right
1 << 1 === 10    // 2
1 << 2 === 100   // 4 
1 << 3 === 1000  // 8

// You can use any number on the LHS
2 << 1 === 100   // 4
3 << 2 === 1100  // 12
// Remember, 3 in decimal is equal to 11 in binary

最后，&是二进制和运算符 - 它返回一个数字，其中仅当 两个 数字都具有 1 时才设置位置在那个地方:

// Both sides binary
1 & 1 === 1
11 & 10 === 10
010 & 100 === 0

因此，在您的循环中，正在检查 changed 的​​前 8 位以查看是否设置了其中任何一个 - 如果设置了其中任何一个，则某些内容发生了更改并触发了一个事件。如果我们将其分解为两个步骤，可能会更容易看出:

// All numbers in binary save for 8 ;-)
prev_state = 11111111;
state = 11011111;
changed = 00100000;

迭代#1:

mask = 1 << 0                   // 0
changeAtPower = changed & mask  // 0
// 0            0         0
mask === changedAtPower         // false

迭代#2:

mask = 1 << 1                   // 10
changeAtPower = changed & mask  // 0
// 00           00        01
mask === changedAtPower         // false

跳过#3 到#5 的迭代，它们看起来都一样，让我们​​看看#6:

mask = 1 << 5                    // 100000
changedAtPower = changed & mask  // 100000
// 100000        100000    100000
mask === changedAtPower         // true 
// Event triggered

然后它继续进行剩余的迭代(#7 和 #8)，因为没有任何变化，所以不再触发任何事件。