JavaScript: потерянный в двоичных файлах — Buffer/Blob/UInt8Array/ArrayBuffer

Привет тебе! Если у вас есть или вы собираетесь сделать что-то простое, например загрузить изображение на веб-сервер, и если вы также являетесь Эминемом в JavaScript, скорее всего, вы будете перегружены путаницей типов данных, доступных для обработки двоичных данных. Не беспокойтесь! В этом пергаменте мы сделаем краткий обзор того, что они из себя представляют и когда использовать каждый из них.

ArrayBuffer

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

UInt8Array

UInt8Array предоставляет полезные функции для выполнения манипуляций на уровне байтов в ArrayBuffer. В отличие от ArrayBuffer, UInt8Array можно нарезать и изменять размер. Он также поддерживается как в вашем веб-браузере, так и в среде выполнения NodeJS.

// string => Uint8Array
const str = "Hello wolrd";
const encoder = new TextEncoder().encode(str);
encoder.encode(str) // Uint8Array(12) [115, 100, 115, 100 ...]

// file => Uint8Array (on browser)
const fileElement = document.createElement("input");
fileElement.type = "file";
fileElement.oninput = async (event) => {
  const file = fileElement.files?.[0]
  new Uint8Array(file)  // Uint8Array [115, 100, 115, 100 ...]
}
fileElement.click()

Uint8Array — лучший тип данных для передачи по сети благодаря своей компактности. Кстати, не каждый веб-сервер первоклассно обрабатывает Uint8Array, поскольку люди обычно не имеют дело с двоичными данными.

капля

Большой двоичный объект (двоичный большой объект) — это высокоуровневая оболочка двоичных данных, которая используется для представления изображений, документов или других типов файлов. Большие двоичные объекты имеют дополнительную кодировку и метаданные поверх двоичных данных. Они также могут быть созданы из строк, массивов или других источников данных. Из-за кодирования большие двоичные объекты обычно менее эффективны, чем ArrayBuffer и Uint8Array. BLOB-объекты в основном используются в HTML-формах при загрузке вложений.

Буфер

Это встроенный класс только для Node.js , который позволяет напрямую работать с двоичными данными, включая создание, управление и чтение из двоичных данных. Он реализован с использованием Uint8Array и предназначен для обработки данных способом, совместимым с широким спектром операций ввода-вывода. Buffer объекты могут быть созданы из строк, массивов или других источников данных.

Вот и все! Таким образом, ArrayBuffer, Uint8Array, Blob и Buffer — это объекты JavaScript, используемые для обработки двоичных данных. ArrayBuffer предоставляет блок памяти фиксированного размера, которым можно манипулировать с помощью двоичных данных, а Uint8Array обеспечивает представление этой памяти для более эффективного управления. Blob используется для представления двоичных данных, которые используются в HTTP-запросах и ответах, а Buffer используется в Node.js для управления двоичными данными для файловых операций ввода-вывода. Каждый объект имеет свои специфические варианты использования и может быть полезен в самых разных приложениях, связанных с работой с двоичными данными.