每日一问の三：Javascript位运算符

前端开发 / 虫二创建于 3年前 / 阅读数 617 / 评论数 0 / 1秒前

运算符	名称	描述
&	AND(与)	如果两位都是 1 则设置每位为 1
\	OR(或)	如果两位之一为 1 则设置每位为 1
~	NOT(非)	反转所有位
^	XOR(异或)	如果两位只有一位为 1 则设置每位为 1
<<	零填充左位移(左移)	通过从右推入零向左位移，并使最左边的位脱落。
>>	有符号右位移(右移)	通过从左推入最左位的拷贝来向右位移，并使最右边的位脱落。

JavaScript位运算符执行过程：

JavaScript 将数字存储为 64 位浮点数，但所有按位运算都以 32 位二进制数执行。
在执行位运算之前，JavaScript 将数字转换为 32 位有符号整数。
执行按位操作后，结果将转换回 64 位JavaScript 数。

位运算 AND

5 & 1
const num1 = 5,num2 = 1;
const num1T = num1.toString(2)
const num2T = num2.toString(2)
console.log(num1T, num2T)  // 101   1  ===>  补全为4位二进制  0101  0001

# 比较二进制每一位的值，如果两位都是 1 则设置每位为 1，返回：

0001  1*2º --> 1

# 使用案例：
# 判断一个数字奇偶性
#  奇数 & 1 --> 1
#  偶数 & 1 --> 0

function is oddOrEven (num) {
    return num & 1 === 1 ? '奇数' : '偶数'
}

位运算 OR

5 | 1

0101 | 0001
# 比较二进制每一位的值，如果两位之一为 1 则设置每位为 1，返回：
0101  5

# 使用案例：
# 数字取整：

function Floor (num) {
    return num | 0  // 这里使用 ~~, >>, << 也可， >>>只限于正值
}

位运算 NOT

~ 5
~ 0000 0000 0000 0000 0000 0000 0000 0101
#反转所有位：
  1111 1111 1111 1111 1111 1111 1111 1010    -6

位运算 XOR

5 ^ 1
0101 ^ 0001
# 比较二进制每一位的值，如果两位只有一位为 1 则设置每位为 1，返回：
0100   4

# 使用案例：
# 值的交换
var a = 4, b = 5;
a ^= b
b ^= a
a ^= b
console.log(a, b)  // 5,4

# 更简介的方法(解构赋值)：
[a, b] = [b, a]

位运算 <<

5 << 1
00000000000000000000000000000101
#左移一位：
00000000000000000000000000001010   ---> 10

位运算 >>

5 >> 1
00000000000000000000000000000101
#右移一位：
00000000000000000000000000000010  ---> 2

#右移保留符号：
-5 >> 1
11111111111111111111111111111011 
11111111111111111111111111111101 ---> 3

一个有意思的案例

// HEX 与 RGB 互转

/**
 * 16进制颜色值转RGB
 * @param  {String} hex 16进制颜色字符串
 * @return {String}     RGB颜色字符串
 */
  function hexToRGB(hex) {
    var hexx = hex.replace('#', '0x')
    var r = hexx >> 16
    var g = hexx >> 8 & 0xff
    var b = hexx & 0xff
    return `rgb(${r}, ${g}, ${b})`
}

/**
 * RGB颜色转16进制颜色
 * @param  {String} rgb RGB进制颜色字符串
 * @return {String}     16进制颜色字符串
 */
function RGBToHex(rgb) {
    var rgbArr = rgb.split(/[^\d]+/)
    var color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3]
    return '#'+ color.toString(16)
}
// -------------------------------------------------
hexToRGB('#ffffff')               // 'rgb(255,255,255)'
RGBToHex('rgb(255,255,255)')      // '#ffffff'

讨论数量: 0