Що таке ArrayBuffer? У чому різниця між Uint32Array і Float32Array?

Повне пояснення

Що це і навіщо

• ArrayBuffer – низькорівневий буфер, що містить послідовність байтів. Використовується для роботи з бінарними даними (файли, WebSocket, WebRTC, Canvas, WebGL).
• Typed‑arrays (Uint32Array, Float32Array тощо) – об’єкти, що надають типізоване представлення ArrayBuffer. Вони дозволяють читати/записувати значення певного типу без ручної конвертації.

Ключові принципи/терміни

• ArrayBuffer: immutable length, raw bytes.
• TypedArray: view over ArrayBuffer, fixed element size (32‑bit), signed/unsigned, integer/floating.
• Endianness: little‑endian by default in JavaScript.

Як це працює

1. Створюється ArrayBuffer: new ArrayBuffer(16) – 16 байт.
2. Створюється view: new Uint32Array(buffer) – 4 елементи (4 байти кожен).
3. Доступ до елементів: arr[0] = 42;.
4. Операції виконуються у відповідності до типу: Uint32Array обмежує значення 0–2³²‑1, Float32Array підтримує плаваючі числа.

Практика і реалізація

const buf = new ArrayBuffer(8);
const u32 = new Uint32Array(buf);
u32[0] = 123456;
const f32 = new Float32Array(buf);
console.log(f32[0]); // 123456.0

Тестування

import { describe, it } from 'vitest';
describe('TypedArray', () => {
  it('converts correctly', () => {
    const buf = new ArrayBuffer(4);
    const u32 = new Uint32Array(buf);
    u32[0] = 1;
    const f32 = new Float32Array(buf);
    expect(f32[0]).toBeCloseTo(1.0);
  });
});

Особливості в контексті JS/TS

• Typed‑arrays підтримуються у TypeScript з відповідними типами (Uint32Array, Float32Array).
• Для WebGL потрібні Float32Array для шейдерів.

Оптимізація, типові помилки

• Перевірка розмірів: buffer.byteLength має відповідати кількості елементів * elementSize.
• Не змішувати типи: Uint32Array не можна безпосередньо передати як Float32Array.
• Пам’ятайте про endianness при обміні даними між різними платформами.

Часті помилки

1. Переповнення: запис значення > 2³²‑1 у Uint32Array.
2. Невірний індекс: доступ за межами length.
3. Відсутність ArrayBuffer при створенні view.
4. Неочікуваний тип: використання Float32Array для цілих чисел.
5. Відсутність buffer у TypedArray при копіюванні.
6. Пам’ятайте про slice – створює новий ArrayBuffer.
7. Не враховувати endianness при читанні з зовнішніх джерел.
8. Перевірка ArrayBuffer.isView(obj) перед операціями.

Cheatsheet

• new ArrayBuffer(size) – створити буфер.
• new Uint32Array(buffer, byteOffset?, length?) – view.
• .byteLength, .length, .BYTES_PER_ELEMENT – властивості.
• buffer.slice(start, end) – копія буфера.