логотип 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 поможет в разработке приложений, где требуется обработка бинарных данных.

Стрелочка влевоМассивы в JavaScript

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод map() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний