Articles
Введение в JavaScript
`ArrayBuffer` в JavaScript

`ArrayBuffer` в JavaScript

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

Мы объясним все о ArrayBuffer, начиная с основ и заканчивая его использованием, связанными типами и практическими приложениями.

YouTube Video

ArrayBuffer в JavaScript

ArrayBuffer в JavaScript — это объект для работы с низкоуровневыми бинарными данными, который особенно полезен для манипуляции бинарными данными в WebAPI, при работе с файлами и для сетевых коммуникаций.

Что такое ArrayBuffer

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

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

ArrayBuffer особенно полезен в следующих случаях.

  • При обработке бинарных данных, полученных из сети
  • Когда требуется эффективное совместное использование данных в Web Worker.
  • При обработке изображений или 3D-рендеринге с использованием Canvas или WebGL.
  • При работе с файлами (особенно с двоичными файлами).

Создание объекта ArrayBuffer

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

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16
  • В этом примере выделяется буфер размером 16 байт. Этот буфер пока не содержит никаких данных.

Манипуляция данными с использованием TypedArray

Вы не можете напрямую обращаться к ArrayBuffer, поэтому для чтения и записи данных используется TypedArray. TypedArray предоставляет различные типы представлений, такие как Int8Array и Float32Array, что позволяет эффективно работать с бинарными данными.

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

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42
  • Int8Array может хранить данные в каждом байте, что позволяет буферу содержать 8 элементов. Таким образом, используя различные типы представлений, вы можете эффективно обрабатывать данные.

Другие примеры TypedArray

В JavaScript существует множество типов TypedArray. Например, если вы хотите работать с 32-битными беззнаковыми целыми числами, используйте Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456
  • Uint32Array может хранить данные в 4-байтовых элементах, поэтому буфер может содержать четыре элемента. Важно выбрать подходящий TypedArray в зависимости от типа данных, с которыми вы работаете.

Гибкое управление данными с использованием DataView

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

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

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

Учет порядка байтов (Endianness)

При использовании DataView также необходимо обращать внимание на порядок байтов (Endianness). В зависимости от архитектуры компьютера порядок хранения данных в памяти может различаться. Методы DataView имеют параметры для указания порядка байтов.

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

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

Применение ArrayBuffer

ArrayBuffer — это мощный инструмент, который часто используется в веб-разработке и API браузеров. Давайте рассмотрим несколько примеров применения.

Получение и обработка бинарных данных

Например, вы можете получить бинарные данные с сервера, используя XMLHttpRequest или fetch API, и обработать их как ArrayBuffer.

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });
  • В этом примере данные изображения загружаются с сервера и обрабатываются как Uint8Array. Таким образом, вы можете обрабатывать данные, полученные с сервера, с помощью ArrayBuffer.

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

В WebGL ArrayBuffer используется для эффективной работы с бинарными данными, такими как данные вершин и цвета.

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  • В этом примере Float32Array используется для задания координат вершин прямоугольника и отправки их в буфер WebGL.

Управление памятью и ArrayBuffer

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

Резюме

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

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

YouTube Video

JavaScript и StorageManagerTypedArray в JavaScript