Понимание битовых сдвигов JavaScript: << и >>

Битовые операторы — мощные, но часто упускаемые из виду функции JavaScript. Хотя они нечасто встречаются в повседневной веб-разработке, их понимание позволяет оптимизировать производительность и лучше понять, низкоуровневую обработку чисел компьютером.

Что такое << и >>

<< (левый сдвиг) и >> (правый сдвиг) — операторы, перемещающие биты влево или вправо двоичного представления числа.

// Левый сдвиг (<<)
let num = 5;              // Двоичное: 00000101
let shifted = num << 1;   // Двоичное: 00001010 (Десятичное: 10)

// Правый сдвиг (>>)
let num2 = 10;              // Двоичное: 00001010
let shifted2 = num2 >> 1;   // Двоичное: 00000101 (Десятичное: 5)

Левый сдвиг <<: Быстрое умножение

Левый сдвиг умножает число на 2 за каждую позицию сдвига:

console.log(5 << 1);  // 10  (5 * 2)
console.log(5 << 2);  // 20  (5 * 4)
console.log(5 << 3);  // 40  (5 * 8)

Правый сдвиг >>: Целочисленное деление

Правый сдвиг делит на 2 за каждую позицию сдвига, округляя в меньшую сторону:

console.log(10 >> 1);  // 5  (10 / 2)
console.log(10 >> 2);  // 2  (10 / 4)
console.log(10 >> 3);  // 1  (10 / 8)

Практическое применение битовых сдвигов

Битовые сдвиги проявляют себя в нескольких специфических областях, где обработка двоичных данных становится необходимой. Давайте разберём каждый случай использования и выясним, как они работают.

При создании систем разрешений или управления конфигурацией битовые сдвиги обеспечивают элегантный способ обработки нескольких логических флагов в одном числе. Думайте о каждой позиции бита как о переключателе — он либо включён (1), либо выключен (0).

Самое распространённое использование битовых операций JavaScript — работа с числами. Вот реальный пример, с которым можно столкнуться:

// Парсинг RGB цветов в шестнадцатеричный формат и обратно
function rgbToHex(r, g, b) {
    return ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}

function hexToRgb(hex) {
    const num = parseInt(hex, 16);
    return {
        r: num >> 16 & 255,
        g: num >> 8 & 255,
        b: num & 255
    };
}

// Вариант использования: Работа с CSS цветами
console.log(rgbToHex(255, 0, 0));     // 'ff0000'
console.log(hexToRgb('ff0000'));      // { r: 255, g: 0, b: 0 }

При работе с изображениями в JavaScript цвет каждого пикселя часто представляется одним числом. Битовые сдвиги упрощают работу с этими значениями.

function getRedChannel(pixel) {
    // Перемещаем красные биты вправо и маскируем другие цвета
    return (pixel >> 16) & 0xFF;
}

function getGreenChannel(pixel) {
    return (pixel >> 8) & 0xFF;
}

function getBlueChannel(pixel) {
    return pixel & 0xFF;
}

function createPixel(red, green, blue) {
    // Объединяем RGB значения в одно число
    return (red << 16) | (green << 8) | blue;
}

// Применение на практике
const pixel = createPixel(255, 128, 0); // Ярко оранжевый цвет
console.log(getRedChannel(pixel));      // 255
console.log(getGreenChannel(pixel));    // 128
console.log(getBlueChannel(pixel));     // 0

Этот код делает нечто очень хитрое. Вместо хранения трёх чисел для красного, зелёного и синего цветов, они объединены в одно число. Каждому цвету отводится 8 бит пространства — достаточно, чтобы хранить значения от 0 до 255. Значение красного цвета занимает крайние левые 8 бит, зелёного — средние 8 бит, а синего — крайние правые 8 бит.

Когда необходимо вернуть цвет, биты сдвигаются вправо, пока нужный цвет не окажется в младших 8 битах. Затем всё остальное маскируется с помощью & 0xFF.

Это похоже на книжный шкаф, где каждая полка может содержать числа до 255, а мы просто перемещаем книги между полками.

Такой подход со сдвигом битов намного быстрее, чем хранение значений RGB в массиве или объекте. Он удобен при обработке большого количества пикселей, например, в фильтрах изображений или играх. Современные браузеры используют аналогичную технику при рендеринге графики.

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

Правда в том, что во время разработки веб-сайтов вряд ли потребуются битовые операции. Они наиболее полезны при:

• Преобразование между системами счисления (например, RGB-цвета)
• обработке двоичных данных (например, WebGL или обработка файлов).
• Реализация критических по производительности сценариев использования, таких как физические движки игр или обработка данных в реальном времени.

Для повседневных задач использование объектов или Set более понятно и удобно.

Комментарии