javascript - 这个颜色函数是如何工作的？

Question

我遇到过这个返回一些颜色值的小函数。我无法理解它正在进行的位操作。

//Given a color, returns the ARGB values of that color in an array
var getColor = function(color){
    return [color >> 24&255, color >> 16&255,
    color >> 8&255, color&255];
};

Answer 1

它采用 32 位值并将其分成 8 位 block 。 >>> 运算符是右移 运算符，因此首先进入数组的是高 8 位(32-8 是 24)。

每个移位值都与 255(十六进制 0xff)进行“与”运算，以仅隔离低 8 位(移位后)。

因此，如果您从 4AE109B0 开始，该函数将:

• 右移 24，隔离 4A
• 右移 16，隔离 E1
• 右移 8，隔离 09
• 最后只需分离出原始的低 8 位即可得到 B0

结果将是数组

[0x4A, 0xE1, 0x09, 0xB0]

我个人会把移位和屏蔽操作放在括号中，因为我永远记不起运算符的优先级:

function getColor(color){
    return [
      (color >> 24) & 255,
      (color >> 16) & 255,
      (color >> 8) & 255,
      color & 255
    ];
};