TypedArray в JavaScript

Эта статья объясняет, что такое TypedArray в JavaScript.

Мы подробно объясним основной концепт TypedArray, каждый тип, как их использовать и конкретные примеры использования.

YouTube Video

TypedArray в JavaScript

TypedArray в JavaScript — это объект для эффективной работы с буферизованными бинарными данными. TypedArray распределяет и управляет памятью на основе конкретных типов данных. В отличие от обычных массивов, TypedArray может содержать только данные фиксированного размера, а не произвольные типы данных.

Базовая структура TypedArray

Основные компоненты TypedArray — это ArrayBuffer и сам TypedArray.

• ArrayBuffer: Буфер фиксированного размера, который выделяет бинарные данные в памяти. Этот буфер является только областью данных и не может быть прочитан или записан напрямую.
• TypedArray: Объект-обертка, который применяет конкретный тип данных к буферу, предоставляя доступ к данным и возможность их манипуляции.

Пример основного использования

Ниже приведен пример создания ArrayBuffer, а затем TypedArray на его основе.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• В этом примере создается ArrayBuffer, а затем на его основе создается Uint8Array. Каждый элемент рассматривается как 8-битное беззнаковое целое число, хранящее значения только в указанном диапазоне.

Типы TypedArray

Существуют различные типы TypedArray для каждого типа данных. Основные из них приведены ниже.

Эти TypedArray отличаются эффективным использованием памяти и подходят для работы с большими объемами данных.

Работа с TypedArray

Вы можете получать доступ к данным в TypedArray, используя индексы, как в обычном массиве, но дополнительно предоставляются специальные методы.

Установка значений

В TypedArray можно присваивать несколько значений одновременно с помощью метода set.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Этот код использует метод set, чтобы присвоить несколько значений одновременно массиву Int16Array и выводит каждый элемент в консоль.

Получение подмассива

Чтобы получить часть TypedArray в виде подмассива, используйте метод subarray. Этот подмассив ссылается на тот же буфер, что и исходный TypedArray.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Этот код извлекает определённый диапазон элементов из Int16Array, используя метод subarray, и выводит подмассив в консоль.

Копирование буферов

Буфер TypedArray также можно скопировать в другой TypedArray. Используя метод set, вы можете копировать данные с определенной позиции.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Этот код копирует содержимое массива Uint8Array в другой массив с помощью метода set и выводит скопированный массив в консоль.

Использование DataView

В то время как TypedArray работает с буферами фиксированного типа данных, DataView является интерфейсом, который позволяет гибко управлять бинарными данными с произвольными смещениями и типами данных. Это позволяет смешивать данные разных типов в одном буфере.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Этот код использует DataView, чтобы записать различные типы данных — 32-битные целые числа и 32-битные числа с плавающей запятой — в один и тот же буфер и проверяет результаты.

• DataView предоставляет больше гибкости в доступе к данным по сравнению с TypedArray и особенно полезен при работе с файлами в бинарном формате или сетевыми протоколами.

Применение TypedArray

TypedArray в основном используется для эффективной обработки больших объемов бинарных данных. Примеры конкретного применения включают следующее:.

Обработка изображений

TypedArray используется при работе с пиксельной информацией изображений. С помощью Uint8Array вы можете хранить значения RGBA каждого пикселя и выполнять редактирование и обработку изображения.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Этот код создаёт данные изображения шириной 100 и высотой 100 в формате RGBA с помощью массива Uint8Array и устанавливает все пиксели красными.

Взаимодействие с WebAssembly

TypedArray используется для обмена бинарными данными между JavaScript и WebAssembly. Общий доступ к области памяти JavaScript и WebAssembly через ArrayBuffer позволяет быстро обмениваться данными.

Обработка аудио- и видеоданных

TypedArray играет важную роль в обработке аудио- и видеоданных. Вы можете хранить звуковые формы сигналов в Float32Array для воспроизведения и обработки.

Заключение

TypedArray — это мощный инструмент для эффективной обработки больших объемов бинарных данных. Особенно полезен в приложениях с высокими требованиями к производительности, таких как обработка изображений, WebAssembly и обработка аудио/видео данных. TypedArray имеет API, похоже на обычные массивы, но существуют ограничения по использованию памяти и типам данных, поэтому необходимо правильно различать их использование.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video