Где бы я использовал побитовый оператор в JavaScript?

Question

Где бы я использовал побитовый оператор в JavaScript?

Я прочитал "что такое побитовые операторы?" Я знаю, что такое побитовые операторы, но я до сих пор не понимаю, как их можно использовать. Кто-нибудь может предложить какие-нибудь реальные примеры того, где побитовый оператор был бы полезен в JavaScript?

Благодарю.

Редактировать:

Просто копаясь в источнике jQuery, я нашел пару мест, где используются побитовые операторы, например: (только оператор &)

// Line 2756:
event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));

// Line 2101
var ret = a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 : 1;

80

javascript bitwise-operators

Источник

user21677 17 мар '09 в 12:41

16 ответов

Решение

Я интенсивно использую побитовые операторы для числовых преобразований в производственных скриптах, потому что иногда они намного быстрее, чем их Math или же parseInt эквиваленты.

Я должен заплатить за удобочитаемость кода. Так что я обычно использую Math в разработке и побитовом в производстве.

Вы можете найти некоторые приемы производительности на jsperf.com.

Как видите, браузеры не оптимизируют Math.ceil а также parseInt в течение многих лет, поэтому я предсказываю, что побитнее будет быстрее и короче делать вещи в будущем.

Некоторое дальнейшее чтение на SO...

Бонус: шпаргалка для | 0: простой и быстрый способ преобразовать что-либо в целое число:

( 3|0 ) === 3;             // it does not change integers
( 3.3|0 ) === 3;           // it casts off the fractional part in fractionalal numbers
( 3.8|0 ) === 3;           // it does not round, but exactly casts off the fractional part
( -3.3|0 ) === -3;         // including negative fractional numbers
( -3.8|0 ) === -3;         // which have Math.floor(-3.3) == Math.floor(-3.8) == -4
( "3"|0 ) === 3;           // strings with numbers are typecast to integers
( "3.8"|0 ) === 3;         // during this the fractional part is cast off too
( "-3.8"|0 ) === -3;       // including negative fractional numbers
( NaN|0 ) === 0;           // NaN is typecast to 0
( Infinity|0 ) === 0;      // the typecast to 0 occurs with the Infinity
( -Infinity|0 ) === 0;     // and with -Infinity
( null|0 ) === 0;          // and with null,
( (void 0)|0 ) === 0;      // and with undefined
( []|0 ) === 0;            // and with an empty array
( [3]|0 ) === 3;           // but an array with one number is typecast to number
( [-3.8]|0 ) === -3;       // including the cast off of the fractional part
( [" -3.8 "]|0 ) === -3;   // including the typecast of strings to numbers
( [-3.8, 22]|0 ) === 0     // but an Array with several numbers is typecast to 0
( {}|0 ) === 0;                // an empty object is typecast to 0
( {'2':'3'}|0 ) === 0;         // or a not empty object
( (function(){})|0 ) === 0;    // an empty function is typecast to 0 too
( (function(){ return 3;})|0 ) === 0;

и немного магии для меня:

3 | '0px' === 3;

48

Источник

user139361 27 мар '13 в 17:00

В JavaScript вы можете использовать двойное побитовое отрицание (~~n) в качестве замены Math.floor(n) (если n положительное число) или parseInt(n, 10) (даже если n отрицательно). n|n а также n&n всегда дают те же результаты, что и ~~n,

var n = Math.PI;
n; // 3.141592653589793
Math.floor(n); // 3
parseInt(n, 10); // 3
~~n; // 3
n|n; // 3
n&n; // 3

// ~~n works as a replacement for parseInt() with negative numbers…
~~(-n); // -3
(-n)|(-n); // -3
(-n)&(-n); // -3
parseInt(-n, 10); // -3
// …although it doesn’t replace Math.floor() for negative numbers
Math.floor(-n); // -4

Одиночное побитовое отрицание (~) рассчитывает -(parseInt(n, 10) + 1), так что два побитовых отрицания вернутся -(-(parseInt(n, 10) + 1) + 1),

Следует отметить, что из этих трех альтернатив, n|n кажется самым быстрым.

Обновление: более точные тесты здесь: http://jsperf.com/rounding-numbers-down

(Как размещено на странном языке)

25

Источник

user96656 08 фев '10 в 19:36

Пример из реальной жизни:

`^`побитовый XOR как`I/O`Toggler

Используется какvalue ^= 1будет меняться при каждом вызовеvalueв 0, 1, 0, 1 ...

function toggle(evt) {
  evt.target.IO ^= 1;                                    // Bitwise XOR as 1/0 toggler
  evt.target.textContent = evt.target.IO ? "ON" : "OFF"; // Unleash your ideas
}

[...document.querySelectorAll("button")].forEach( el =>
  el.addEventListener("click", toggle)
);

<button>OFF</button>
<button>OFF</button>
<button>OFF</button>

24

Источник

user383904 27 фев '14 в 06:58

Чтобы узнать, нечетное ли число:

function isOdd(number) {
    return !!(number & 1);
}

isOdd(1); // true, 1 is odd
isOdd(2); // false, 2 is not odd
isOdd(357); // true, 357 is odd

Быстрее, чем модуль - используйте там, где производительность действительно имеет значение!

16

Источник

user146309 27 июн '14 в 19:39

Учитывая достижения, которые делает Javascript (особенно с nodejs, который позволяет программировать на стороне сервера с js), в JS появляется все более и более сложный код. Вот несколько случаев, когда я использовал побитовые операторы:

Операции с IP-адресами:

//computes the broadcast address based on the mask and a host address
broadcast = (ip & mask) | (mask ^ 0xFFFFFFFF)


//converts a number to an ip adress 
sprintf(ip, "%i.%i.%i.%i", ((ip_int >> 24) & 0x000000FF),
                         ((ip_int >> 16) & 0x000000FF),
                         ((ip_int >>  8) & 0x000000FF),
                         ( ip_int        & 0x000000FF));

Примечание: это код на C, но JS практически идентичен

Алгоритмы CRC часто их используют

Проверьте запись в Википедии об этом

Операции с разрешением экрана

16

Источник

user21634 17 мар '09 в 12:49

Несколько других примеров того, как использовать поразрядно нет и дважды поразрядно нет:

Напольная операция

~~2.5    // 2
~~2.1    // 2
~~(-2.5) // -2

Проверьте, вернул ли indexOf -1 или нет

var foo = 'abc';
!~foo.indexOf('bar'); // true

13

Источник

user76590 12 июн '12 в 16:15

Вы можете использовать их для отображения логического значения:

var foo = 1;
var bar = 0;
alert(foo ^= 1);
alert(bar ^= 1);

Это немного глупо, и по большей части побитовые операторы не имеют много приложений в Javascript.

11

Источник

user34211 17 мар '09 в 12:49

var arr = ['abc', 'xyz']

Надоело писать

if (arr.indexOf('abc') > -1) {
  // 'abc' is in arr
}

if (arr.indexOf('def') === -1) {
  // 'def' is not in arr
}

проверить, находится ли что-то внутри массива?

Вы можете использовать побитовый оператор ~ вот так:

if (~arr.indexOf('abc')) {
  // 'abc' is in arr
}

if (! ~arr.indexOf('def')) {
  // 'def' is not in arr
}

8

Источник

user3215167 18 янв '16 в 10:35

Битовые маски.

Широко используется, например, в событиях JS.

4

Источник

user24545 17 мар '09 в 12:50

Этот ответ содержит объяснения ответа Марка.

Прочитав эти объяснения и запустив фрагмент кода, можно получить идею.

var hex = 'ffaadd';
var rgb = parseInt(hex, 16); // rgb value is 16755421 in decimal = 111111111010101011011101 in binary = total 24 bits


var red   = (rgb >> 16) & 0xFF; // returns 255
var green = (rgb >> 8) & 0xFF;  // returns 170
var blue  = rgb & 0xFF;         // returns 221  

// HOW IS IT

// There are two bitwise operation as named SHIFTING and AND operations.
// SHIFTING is an operation the bits are shifted toward given direction by adding 0 (zero) bit for vacated bit fields.
// AND is an operation which is the same with multiplying in Math. For instance, if 9th bit of the given first bit-set is 0
// and 9th bit of the given second bit-set is 1, the new value will be 0 because of 0 x 1 = 0 in math.

// 0xFF (000000000000000011111111 in binary) - used for to evaluate only last 8 bits of a given another bit-set by performing bitwise AND (&) operation. 
// The count of bits is 24 and the first 16 bits of 0xFF value consist of zero (0) value. Rest of bit-set consists of one (1) value.
console.log("0xFF \t\t\t\t: ", 0xFF) 


// 111111111010101011011101 -> bits of rgb variable
// 000000000000000011111111 -> 255 after (rgb >> 16) shifting operation
// 000000000000000011111111 -> 255 complement (changes the first 16 bits and does nothing for the last 8 bits)
// 000000000000000011111111 -> result bits after performing bitwise & operation
console.log("Red - (rgb >> 16) & 0xFF \t: ", (rgb >> 16) & 0xFF) // used for to evaluate the first 8 bits

// 111111111010101011011101 -> bits of rgb variable
// 000000001111111110101010 -> 65450 -> 'ffaa'
// 000000000000000011111111 -> 255 complement (changes the first 16 bits and does nothing for the last 8 bits)
// 000000000000000010101010 -> result bits after performing bitwise & operation
// calculation -> 000000001111111110101010 & 000000000000000011111111 = 000000000000000010101010 = 170 in decimal = 'aa' in hex-decimal
console.log("Green - (rgb >> 8) & 0xFF \t: ", (rgb >> 8) & 0xFF) // used for to evaluate the middle 8 bits 

// 111111111010101011011101 -> 'ffaadd'
// 000000000000000011111111 -> 255 complement (changes the first 16 bits and does nothing for the last 8 bits)
// 000000000000000011011101 -> result bits after performing bitwise & operation 
// calculation -> 111111111010101011011101 & 000000000000000011111111 = 221 in decimal = 'dd' in hex-decimal
console.log("Blue - rgb & 0xFF \t\t: ", rgb & 0xFF) // // used for to evaluate the last 8 bits.

console.log("It means that `FFAADD` hex-decimal value specifies the same color with rgb(255, 170, 221)")

/* console.log(red)
console.log(green)
console.log(blue) */

3

Источник

user3765109 19 мар '18 в 10:21

Я использовал его один раз для виджета разрешений. Права доступа к файлам в Unix являются битовой маской, поэтому для ее анализа необходимо использовать битовые операции.

3

Источник

user18180 17 мар '09 в 12:52

Я использую их, чтобы сгладить три числа в 1 как способ хранения многомерных массивов в массиве Uint16Array. Вот фрагмент воксельной игры, которую я разрабатываю:

function Chunk() {
  this._blocks = new Uint16Array(32768);
  this._networkUpdates = [];
}

Chunk.prototype.getBlock = function(x, y, z) {
  return this._blocks[y + (x << 5) + (z << 10)];
};

Chunk.prototype.setBlock = function(x, y, z, value) {
  this._blocks[y + (x << 5) + (z << 10)] = value;
  this._networkUpdates.push(value + (y << 15) + (x << 20) + (z << 25));
};

Chunk.prototype.getUpdates = function() {
  return this._networkUpdates;
};

Chunk.prototype.processUpdate = function(update) {
  // this._blocks[Math.floor(update / 65536)] = update % 65536;
  this._blocks[update >> 16] = update & 65535;
};

var chunk = new Chunk();
chunk.setBlock(10, 5, 4);
alert(chunk.getBlock(10, 5, 4));
alert(chunk.getUpdates()[0]);

2

Источник

user1414639 29 мар '15 в 08:43

Пример использования Node.js

Предполагая, что у вас есть файл (называемый multiply.js) с этим содержимым, вы можете запустить

`node multiply <number> <number>`

и получить результат, совместимый с использованием оператора умножения для тех же двух чисел. Сдвиг немного происходит в Mulitply Функция - это пример того, как взять битовую маску, представляющую одно число, и использовать ее для переворачивания битов в другое число для быстрых операций.

var a, b, input = process.argv.slice(2);

var printUsage = function() {
  console.log('USAGE:');
  console.log('  node multiply <number> <number>');
}

if(input[0] === '--help') {+
  printUsage();
  process.exit(0);
}

if(input.length !== 2) {
  printUsage();
  process.exit(9);
}

if(isNaN(+input[0]) || isNaN(+input[1])) {
  printUsage();
  process.exit(9);
}

// Okay, safe to proceed

a = parseInt(input[0]),
b = parseInt(input[1]);

var Multiply = function(a,b) {
  var x = a, y = b, z = 0;

  while( x > 0 ) {
    if(x % 2 === 1) {
      z = z + y;
    }
    y = y << 1;
    x = x >> 1;
  }

  return z;
}

var result = Multiply(a,b);

console.log(result);

0

Источник

user1076765 09 апр '15 в 23:00

Они кажутся очень полезными, когда вы работаете с шестнадцатеричными значениями и битами. Поскольку 4 бита могут представлять от 0 до F.

1111 = F 1111 1111 = FF.

0

Источник

user2981506 12 ноя '13 в 05:41

Я только что нашел этот вопрос, пытаясь подтвердить, если побитовый AND оператор также был & в JavaScript

Так как вы попросили пример:

if ($('input[id="user[privileges]"]').length > 0) {
    $('#privileges button').each(function () {
        if (parseInt($('input[id="user[privileges]"]').val()) & parseInt($(this).attr('value'))) {
            $(this).button('toggle');
        }
    });
}

Он заполняет состояние кнопок с помощью jQuery, учитывая битовую маску скрытого поля:

none знак равно 0
user знак равно 1
administrator знак равно 2
user + administrator знак равно 3

-1

Источник

user89771 16 июл '13 в 04:04

Другие вопросы по тегам javascript bitwise-operators

user50262 17 мар '09 в 12:52 2009-03-17 12:52 · Accepted Answer · 2009-03-17 12:52

Пример:

Анализирует шестнадцатеричное значение, чтобы получить значения цвета RGB.

var hex = 'ffaadd';
var rgb = parseInt(hex, 16); // rgb is 16755421


var red   = (rgb >> 16) & 0xFF; // returns 255
var green = (rgb >> 8) & 0xFF;  // 170
var blue  = rgb & 0xFF;     // 221

75

Источник

user50262 17 мар '09 в 12:52

Где бы я использовал побитовый оператор в JavaScript?

Редактировать:

16 ответов

^побитовый XOR какI/OToggler

`^`побитовый XOR как`I/O`Toggler