Недавно я увидел, что в каком-то коде используются побитовые операторы, и мне стало любопытно. Каковы области применения во фронтенд-разработке? Подводя итог~
Примечание: Читабельность кода с использованием оператора ухудшается, и рекомендуется использовать его с осторожностью. Если есть вопросы, исправьте или дополните
заявление
Судейский паритет
num & 1 === 1 // число нечетное
num & 1 === 0 // число четное
因为二进制的奇数最低位是1,偶数最低位是0,& 1运算后可以判断奇偶(&见下方)
эффективность
与 % 2来判断奇偶速度差不多
Округление
похожий наparseInt
~~3.14159 // 3
3.14159 >> 0 //3
3.14159 >>> 0 //3
3.14159 | 0 // 3
'>>>' не используется для округления отрицательных чисел, другие подходят
эффективность
var count = 5000000
var num = 1.51
console.time('parseInt');
for (var i = count; i > 0; i--) {
parseInt(num);
}
console.timeEnd('parseInt'); //51.822998046875ms
console.time('~~');
for (var i = count; i>0; i--) {
~~num;
}
console.timeEnd('~~'); //14.94580078125ms
位操作符 效率高很多,只是可读性差一些
сравнить значения на равенство
相当于==
^ также преобразует число строкового типа в число, а затем выполняет операцию
1 ^ 1 // 0
Возвращает 0, если равно, возвращает ненулевое значение, если не равно
эффективность
与 == 比较 ^ 的效率高,但可读性差一些
Когда значение переменной является числом, обмен значением завершается
а ^= б это а = а ^ б
var a = 1 , b = 2
a ^= b
b ^= a
a ^= b
console.log(a) // 2
console.log(b) // 1
Обработать
a.toString(2) // 1 => 1
b.toString(2) // 2 => 10
a = a ^ b
//根据^运算后a此时为二进制 11 也就是二进制的 3
a.toString(2) // 3 => 11
b.toString(2) // 2 => 10
b = b ^ a
//根据^运算后b此时为二进制 1 也就是十进制的 1,a成功赋值给b
a.toString(2) // 3 => 11
b.toString(2) // 1 => 1
a = a ^ b
//根据^运算后b此时为二进制 10 也就是十进制的 2,b成功赋值给a
эффективность
var count = 5000000
var num = 1.51
console.time('临时变量');
for (var i = count; i > 0; i--) {
var t,a = 1,b = 2;
t = a;
a = b;
b = t;
}
console.timeEnd('临时变量'); //14.343994140625ms
console.time('^');
for (var i = count; i>0; i--) {
var d = 1, g = 2
d ^= g
g ^= d
d ^= g
}
console.timeEnd('^'); //13.31396484375ms
与临时变量的方法相比效率差不多 但^只能用于数字类型
Преобразование значения RGB и шестнадцатеричного значения цвета
шестнадцатеричный в rgb
function hexToRGB(hex){
var hex = hex.replace("#","0x"),
r = hex >> 16,
g = hex >> 8 & 0xff,
b = hex & 0xff;
return "rgb("+r+","+g+","+b+")";
}
RGB в шестнадцатеричный
function RGBToHex(rgb){
var rgbArr = rgb.split(/[^\d]+/),
color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3];
return "#"+color.toString(16);
}
rgb值和16进制颜色值转换这里我不太能理解,猜想应该是rgb值和16进制之间有对应关系
Детальное объяснение
Побитовый NTO '~'
Заявление в W3C
определение:Один из немногих операторов в ECMAScript, связанных с двоичной арифметикой.
Обработать:
- Преобразовать операнд в 32-битное число
- преобразовать двоичное число в его дополнение до единицы
- Преобразование двоичного числа в число с плавающей запятой
По существу отрицает число и вычитает 1(-x-1)
Поскольку двоичное число состоит из 0 и 1, дробная часть не существует после преобразования в двоичное.
console.log('~null: ', ~null); // => -1
console.log('~undefined: ', ~undefined); // => -1
console.log('~0: ', ~0); // => -1
console.log('~{}: ', ~{}); // => -1
console.log('~[]: ', ~[]); // => -1
console.log('~(1/0): ', ~(1/0)); // => -1
console.log('~false: ', ~false); // => -1
console.log('~true: ', ~true); // => -2
console.log('~3: ', ~3); // => -4
console.log('~3.3: ', ~3.3); // => -4
console.log('~(-2.999): ', ~(-2.999)); // => 1
Затем ~~ вычесть единицу из отрицательного числа, а затем вычесть единицу из отрицательного(-(-х-1))-1также можно использовать для округления
console.log('~~null: ', ~~null); // => 0
console.log('~~undefined: ', ~~undefined); // => 0
console.log('~~0: ', ~~0); // => 0
console.log('~~{}: ', ~~{}); // => 0
console.log('~~[]: ', ~~[]); // => 0
console.log('~~(1/0): ', ~~(1/0)); // => 0
console.log('~~false: ', ~~false); // => 0
console.log('~~true: ', ~~true); // => 1
console.log('~~3: ', ~~3); // => 3
console.log('~~3.3: ', ~~3.3); // => 3
console.log('~~(-2.999): ', ~~(-2.999)); // => -2
Побитовое И '&'
Заявление в W3C
определение:Работает с двоичной формой числа. Он выравнивает цифры в каждом числе, а затем объединяет две цифры в одной и той же позиции по И, используя следующие правила.
правило:Оба 1 есть 1
| Цифры в первой цифре | количество цифр во второй цифре | результат |
|---|---|---|
| 1 | 1 | 1 |
| 1 | 0 | 0 |
| 0 | 1 | 0 |
| 0 | 0 | 0 |
Например:
var num = 1651 & 1
console.log(num) // 1
В процессе операции два числа преобразуются в двоичные (32-разрядные), а затем операция & выполняется в соответствии с приведенными выше правилами.
1651 = 0000 0000 0000 0000 0000 0110 0111 0011
1 = 0000 0000 0000 0000 0001 0000 0000 0001
---------------------------------------------
AND = 0000 0000 0000 0000 0000 0000 0000 0001
Побитовое ИЛИ '|'
Заявление в W3C
Работает непосредственно с двоичной формой чисел. Оператор ИЛИ использует следующие правила при вычислении каждого бита: 1 есть 1
| цифры в первой цифре | цифры во второй цифре | результат |
|---|---|---|
| 1 | 0 | 1 |
| 0 | 1 | 1 |
| 1 | 1 | 1 |
| 0 | 0 | 0 |
Например
var iResult = 25 ^ 0
alert(iResult); //输出 "25"
Процесс работы
25 = 0000 0000 0000 0000 0000 0000 0001 1001
0 = 0000 0000 0000 0000 0000 0000 0000 0000
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1001
1001 в десятичном виде равно 25
Побитовое исключающее ИЛИ '^'
Заявление в W3C
определение: работает непосредственно с двоичной формой. XOR отличается от OR, он возвращает 1, когда только одна цифра содержит 1
правило:
| цифры в первой цифре | цифры во второй цифре | результат |
|---|---|---|
| 1 | 1 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 0 | 0 | 0 |
Например:
var iResult = 25 ^ 3;
alert(iResult); //输出 "26"
Обработать:
25 = 0000 0000 0000 0000 0000 0000 0001 1001
3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010
二进制代码 11010 等于 十进制26
Операция сдвига влево >, операция сдвига вправо без знака >>>
Я просто оставлю ссылку здесь,Произвольные ворота W3C
Ссылаться на: