Введение в DataView JavaScript: Пособие для начинающих

Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в увлекательное путешествие в мир объектов DataView. Не волнуйтесь, если вы никогда раньше не слышали о них — к концу этого руководства вы будете работать с двоичными данными, как профессионал!

Что такое DataView?

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

Объект DataView позволяет читать и записывать несколько типов чисел в ArrayBuffer, независимо от байтового порядка (не волнуйтесь, мы explain это позже). Это как универсальный переводчик для двоичных данных!

Синтаксис

Давайте посмотрим, как мы создаем объект DataView:

new DataView(buffer [, byteOffset [, byteLength]])

Не пугайтесь! Это проще, чем кажется. Давайте разберем это:

• buffer: Это наш ArrayBuffer, контейнер наших двоичных данных.
• byteOffset (необязательно): Где в буфере мы хотим начать чтение.
• byteLength (необязательно): Сколько байтов мы хотим включить в наш вид.

Пример: Создание объекта DataView

Давайте натянем рукава и создадим наш первый объект DataView:

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

// Теперь создадим DataView для всего буфера
const view1 = new DataView(buffer);

// Создадим другой DataView,starting с байта 12, с длиной 4 байта
const view2 = new DataView(buffer, 12, 4);

console.log(view1.byteLength); // Вывод: 16
console.log(view2.byteLength); // Вывод: 4

В этом примере мы сначала создаем ArrayBuffer размером 16 байтов. Представьте это как blank canvas размером 16 пикселей. Затем мы создаем два объекта DataView:

1. view1 покрывает весь буфер.
2. view2 начинается с байта 12 и покрывает последние 4 байта.

Это как если бы у нас были две разные лупы, чтобы посмотреть на наши данные!

Свойства JavaScript DataView

DataView имеет некоторые удобные свойства. Давайте посмотрим:

Свойство	Описание
buffer	Возвращает ArrayBuffer, на который ссылается DataView
byteLength	Возвращает длину (в байтах) DataView
byteOffset	Возвращает смещение (в байтах) DataView от начала его ArrayBuffer

Вот как мы можем использовать эти свойства:

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer, 2, 12);

console.log(view.buffer);       // ArrayBuffer(16)
console.log(view.byteLength);   // 12
console.log(view.byteOffset);   // 2

В этом примере мы создаем DataView, который начинается с байта 2 нашего буфера и имеет длину 12 байтов. Свойства помогают нам confirm эти детали.

Методы JavaScript DataView

Теперь перейдем к интересной части — методам! DataView предоставляет методы для чтения и записи различных типов чисел. Вот таблица самых commonly используемых методов:

Метод	Описание
getInt8(byteOffset)	Получает знаковый 8-битный整数 в указанном байтовом смещении
getUint8(byteOffset)	Получает беззнаковый 8-битный整数 в указанном байтовом смещении
getInt16(byteOffset [, littleEndian])	Получает знаковый 16-битный整数 в указанном байтовом смещении
getUint16(byteOffset [, littleEndian])	Получает беззнаковый 16-битный整数 в указанном байтовом смещении
getInt32(byteOffset [, littleEndian])	Получает знаковый 32-битный整数 в указанном байтовом смещении
getUint32(byteOffset [, littleEndian])	Получает беззнаковый 32-битный整数 в указанном байтовом смещении
getFloat32(byteOffset [, littleEndian])	Получает 32-битное浮点ное число в указанном байтовом смещении
getFloat64(byteOffset [, littleEndian])	Получает 64-битное浮点ное число в указанном байтовом смещении

Есть также соответствующие set методы для каждого из этих get методов.

Давайте посмотрим, как работают некоторые из этих методов:

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);

// Запишем данные
view.setInt16(0, 42);
view.setFloat32(2, 3.14);

// Теперь читаем данные
console.log(view.getInt16(0));   // Вывод: 42
console.log(view.getFloat32(2)); // Вывод: 3.140000104904175

В этом примере мы записываем 16-битное整数 (42) в байтовое смещение 0 и 32-битное浮点ное число (3.14) в байтовое смещение 2. Затем мы читаем эти значения обратно. Обратите внимание, что значение浮点ного числа не точно 3.14 — это связано с тем, как浮点ные числа хранятся в двоичном виде.

Тайна байтового порядка

Помните, когда я упомянул байтовый порядок ранее? Пришло время раскрыть эту тайну! Байтовый порядок refers к order, в котором байты arranges в большие числовые значения. Есть два типа:

1. Little-endian: наименьший значащий байт comes first.
2. Big-endian: наибольший значащий байт comes first.

Представьте это как написание числа: 123 — это big-endian (наибольший значащийdigit first), а 321 будет little-endian.

Красота DataView в том, что он позволяет вам указать байтовый порядок при чтении или записи人多 байтовых значений. Давайте посмотрим пример:

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);

view.setUint16(0, 0x1234, true);  // true для little-endian
view.setUint16(2, 0x5678, false); // false (или опущено) для big-endian

console.log(view.getUint16(0, true));  // 0x1234
console.log(view.getUint16(0, false)); // 0x3412
console.log(view.getUint16(2, true));  // 0x7856
console.log(view.getUint16(2, false)); // 0x5678

В этом примере мы записываем одни и те же значения в Different байтовые порядки и затем читаем их обратно в обоих байтовых порядках. Это как быть able к чтению книги как слева направо, так и справа налево!

Заключение

Поздравляю! Вы только что сделали свои первые шаги в мир DataView. Мы рассмотрели создание объектов DataView, использование их свойств и манипулирование данными с помощью их методов. Мы даже разгадали тайну байтового порядка!

Помните, работа с двоичными данными может показаться пугающей сначала, но с DataView у вас есть мощный инструмент в вашем распоряжении. Это как швейцарский армейский нож для двоичных данных — универсальный, точный и невероятно полезный.

Пока вы продолжаете свое путешествие в JavaScript, вы найдете DataView неоценимым при работе с сложными двоичными структурами данных, такими как те, которые используются в форматах файлов или сетевых протоколах. Продолжайте практиковаться, и скоро вы будете манипулировать битами и байтами, как настоящий кодовый детектив!

Credits: Image by storyset