JS Advanced

Побитовые операторы

Понять, как работают &, |, ^, ~, <<, >>, >>>, и где они реально используются в JavaScript.

Продвинутый (Advanced)

Кратко

Побитовые операторы работают с 32-битными целыми числами: & (AND), | (OR), ^ (XOR), ~ (NOT), << (сдвиг влево), >> (сдвиг вправо), >>> (беззнаковый сдвиг). В web-коде используются редко, но полезны для: flags, permissions, color manipulation,побитовые операции.


Подробно

JS Number → 32-bit Integer: console.log(0b1010); // 10 (binary) console.log(0xFF); // 255 (hex)

Операторы: & (AND): 1 & 1 = 1, иначе 0 | (OR): 0 | 0 = 0, иначе 1 ^ (XOR): разные = 1, одинаковые = 0 ~ (NOT): инвертирует все биты << n: сдвиг влево на n бит (умножение на 2^n) >> n: сдвиг вправо на n бит (деление на 2^n) >>> n: беззнаковый сдвиг

Примеры: const a = 0b1100; // 12 const b = 0b1010; // 10

console.log(a & b); // 0b1000 = 8 console.log(a | b); // 0b1110 = 14 console.log(a ^ b); // 0b0110 = 6 console.log(~a); // -13 (инверсия) console.log(a << 1); // 24 console.log(a >> 1); // 6

Побитовый NOT: console.log(~0); // -1 console.log(~-1); // 0 console.log(~~3.14); // 3 (truncation)

Реальные use cases:

  • Color manipulation

const r = 255, g = 128, b = 0; const hex = (r << 16) | (g << 8) | b; console.log(hex); // 16744448 (0xFF8000)

  • Flags/Permissions

const READ = 1; // 001 const WRITE = 2; // 010 const EXECUTE = 4; // 100

let permissions = READ | WRITE; // 011 = 3 permissions |= EXECUTE; // 111 = 7 permissions &= ~WRITE; // 101 = 5

  • Quick division by power of 2

const half = x >> 1; const quarter = x >> 2;


Ментальная модель

Побитовые операторы — как переключатели на приборной панели. Каждый бит — это кнопка вкл/выкл. & — «обе кнопки нажаты?» | — «хотя бы одна нажата?» ^ — «нажаты по-разному?» ~ — «перевернуть все кнопки».


Примеры

**Самый простой:**

javascript
const a = 5;  // 101
const b = 3;  // 011

console.log(a & b);  // 1 (001)
console.log(a | b);  // 7 (111)
console.log(a ^ b);  // 6 (110)
console.log(a << 1); // 10 (1010)
console.log(a >> 1); // 2 (10)

Базовые побитовые операции.

**Простой:**

javascript
// Цвет → RGB
function rgbToHex(r, g, b) {
  return '#' + ((1 << 24) | (r << 16) | (g << 8) | b)
    .toString(16)
    .slice(1);
}

console.log(rgbToHex(255, 128, 0)); // '#ff8000'

// Быстрое умножение/деление на 2
console.log(7 << 1); // 14 (×2)
console.log(7 << 2); // 28 (×4)
console.log(20 >> 1); // 10 (÷2)

Побитовые операции для цвета и быстрой арифметики.

**Реальный пример:**

javascript
// Система прав доступа
const Permission = {
  READ:    1 << 0, // 001
  WRITE:   1 << 1, // 010
  EXECUTE: 1 << 2, // 100
  ADMIN:   1 << 3  // 1000
};

let userPerm = Permission.READ | Permission.WRITE;

function hasPermission(user, perm) {
  return (user & perm) === perm;
}

console.log(hasPermission(userPerm, Permission.READ));  // true
console.log(hasPermission(userPerm, Permission.ADMIN)); // false

Побитовые флаги для управления правами.


Частые ошибки

**Неправильно:** Использовать побитовые операторы для boolean логики

**Почему:** & и | работают с числами, не с boolean. && и || — для boolean.

**Правильно:** & | — побитовые. && || — логические.

**Неправильно:** Забывать, что JS побитовые операторы работают с 32-bit

**Почему:** Числа больше 2^31-1 будут обрезаны.

**Правильно:** JS побитовые операторы: 32-bit signed integer.


Важно запомнить

  • & — AND, | — OR, ^ — XOR, ~ — NOT
  • << >> — сдвиг (умножение/деление на 2^n)
  • 32-bit integer representation
  • Редко нужен в web-коде
  • Полезен для: цвета, флаги, права

Связь

Назад: Вы знаете операторы (J4). Побитовые операторы — низкоуровневое расширение.

Вперёд: Следующий урок (JV18) — BigInt — числа за пределами Number.MAX_SAFE_INTEGER.

Материалы курса JS Advanced — PROlab Academy.