47. Typed Arrays

JavaScript: Мозги. Урок: Typed Arrays

Typed Arrays – это мощный инструмент в JavaScript для работы с бинарными данными. Они позволяют эффективно хранить и манипулировать массивами чисел определенных типов, что особенно полезно при работе с графикой, аудио и другими ресурсоемкими задачами. Давайте разберемся, как они работают.

Что такое Typed Arrays?

В отличие от обычных JavaScript массивов, которые могут содержать элементы разных типов, Typed Arrays хранят однородные данные определенного числового типа (например, целые числа или числа с плавающей точкой). Это делает их более эффективными с точки зрения использования памяти и скорости операций.

Представьте себе обычный JavaScript массив как коробку, в которую можно положить что угодно - число, строку, объект. Typed Array – это как коробка с ячейками, каждая из которых предназначена для хранения только одного типа данных, например, только целых чисел.

Создание Typed Arrays

Существует несколько типов Typed Arrays, каждый из которых предназначен для хранения чисел определенного размера и типа:

• Int8Array: 8-битные целые числа со знаком.
• Uint8Array: 8-битные целые числа без знака.
• Int16Array: 16-битные целые числа со знаком.
• Uint16Array: 16-битные целые числа без знака.
• Int32Array: 32-битные целые числа со знаком.
• Uint32Array: 32-битные целые числа без знака.
• Float32Array: 32-битные числа с плавающей точкой.
• Float64Array: 64-битные числа с плавающей точкой.

Чтобы создать Typed Array, нужно сначала создать ArrayBuffer, который представляет собой блок памяти, в котором будут храниться данные. Затем создается Typed Array “представление” (view) этого буфера.

// Создаем ArrayBuffer размером 16 байт
const buffer = new ArrayBuffer(16);

// Создаем Int32Array представление буфера
const int32View = new Int32Array(buffer);

// Теперь мы можем работать с int32View как с массивом 32-битных целых чисел
int32View[0] = 10;
int32View[1] = 20;
int32View[2] = 30;
int32View[3] = 40;

console.log(int32View); // Вывод: Int32Array [ 10, 20, 30, 40 ]

// Можно создавать Typed Arrays сразу с заданным размером
const uint8View = new Uint8Array(8); // 8 элементов типа Uint8

uint8View[0] = 255;
uint8View[1] = 128;

console.log(uint8View); // Вывод: Uint8Array [ 255, 128, 0, 0, 0, 0, 0, 0 ]

Практические примеры

// Создание Typed Array из обычного массива
const numbers = [1, 2, 3, 4, 5];
const float32Array = new Float32Array(numbers);

console.log(float32Array); // Вывод: Float32Array [ 1, 2, 3, 4, 5 ]

// Изменение значения элемента
float32Array[0] = 3.14;
console.log(float32Array); // Вывод: Float32Array [ 3.14, 2, 3, 4, 5 ]

// Получение длины Typed Array
console.log(float32Array.length); // Вывод: 5

Жизненный пример

Typed Arrays широко используются в WebGL для работы с графикой. WebGL использует их для передачи вершин, текстур и других данных на видеокарту. Также, они активно применяются в библиотеках для обработки изображений и аудио, где требуется эффективная работа с большими объемами бинарных данных. Например, при работе с <canvas> элементом для создания сложных визуализаций часто используются Typed Arrays для хранения информации о пикселях.

Ключевые моменты

• Typed Arrays предназначены для хранения однородных числовых данных.
• Они более эффективны с точки зрения памяти и скорости по сравнению с обычными массивами JavaScript.
• Для создания Typed Array необходимо создать ArrayBuffer и затем “представление” (view) этого буфера.
• Существуют разные типы Typed Arrays для различных числовых типов.
• Они активно используются в WebGL, библиотеках для обработки изображений и аудио.

Интерактивный пример