логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool

Объект ArrayBuffer в JavaScript

Автор

Дмитрий Нечаев

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

Создание ArrayBuffer

ArrayBuffer создается с помощью конструктора ArrayBuffer, который принимает один аргумент - размер буфера в байтах.

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

Доступ к данным в ArrayBuffer

Для доступа к данным внутри ArrayBuffer используются объекты типизированных массивов (TypedArray) или объект DataView. Они предоставляют различные методы для чтения и записи данных в буфер.

// Создаем 8-битное представление данных ArrayBuffer
const uint8Array = new Uint8Array(buffer);

// Записываем значение 42 в буфер по индексу 0
uint8Array[0] = 42;

// Читаем значение из буфера по индексу 0
console.log(uint8Array[0]); // Выведет 42

Типизированные массивы

TypedArray предоставляет доступ к данным ArrayBuffer, интерпретируя его содержимое как массив элементов определенного типа. Это позволяет управлять бинарными данными различных типов.

// Создаем 32-битное представление данных ArrayBuffer
const int32Array = new Int32Array(buffer);

// Записываем значение 100 в буфер по индексу 0
int32Array[0] = 100;

// Читаем значение из буфера по индексу 0
console.log(int32Array[0]); // Выведет 100

DataView

DataView предоставляет более гибкий способ доступа к данным в ArrayBuffer, позволяя интерпретировать их в нужном порядке байтов и работать с различными типами данных.

// Создаем DataView для работы с данными в буфере
const dataView = new DataView(buffer);

// Записываем целое число 100 в буфер по индексу 0
dataView.setInt32(0, 100);

// Читаем целое число из буфера по индексу 0
const value = dataView.getInt32(0);
console.log(value); // Выведет 100

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

ArrayBuffer широко используется для работы с бинарными данными в различных сценариях, таких как обработка изображений, аудиофайлов, сетевых запросов и других. Он обеспечивает эффективное хранение и манипуляции бинарными данными в JavaScript.

Преобразование ArrayBuffer

ArrayBuffer можно преобразовать в другие типы массивов данных, такие как массивы или строки.

// Преобразование ArrayBuffer в обычный массив
const array = Array.from(new Uint8Array(buffer));

// Преобразование ArrayBuffer в строку
const string = String.fromCharCode.apply(null, new Uint8Array(buffer));

Заключение

ArrayBuffer предоставляет удобный способ хранения и манипуляции бинарными данными в JavaScript. Он позволяет эффективно работать с различными типами данных и представляет основу для использования типизированных массивов и объекта DataView. Понимание и использование ArrayBuffer поможет в разработке приложений, где требуется обработка бинарных данных.

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile