Uint32Array: примеры (JAVASCRIPT)

Типизированный массив Uint32Array: примеры и применение
Раздел: Бинарные данные, Типизированные массивы
Uint32Array(buffer: ArrayBuffer | length: number | array: Iterable | object): Uint32Array

Описание Uint32Array

Uint32Array - это типизированный массив в JavaScript, представляющий массив 32-битных беззнаковых целых чисел в порядке байтов платформы. Объект используется для работы с бинарными данными и обеспечивает высокую производительность при операциях с большими объемами числовой информации.

Конструктор Uint32Array создает массив из 32-битных целых чисел без знака с значениями от 0 до 4294967295. Он часто применяется в WebGL, обработке аудио, работе с файлами и сетевых протоколах, где требуется точный контроль над бинарными данными.

Аргументы конструктора

  • length - создает массив с указанным количеством элементов, инициализированных нулями
  • typedArray - копирует данные из другого типизированного массива
  • object - преобразует обычный массив или итерируемый объект
  • buffer - создает представление для существующего ArrayBuffer с опциональными параметрами смещения и длины

Методы Uint32Array аналогичны методам обычных массивов, но работают только с целыми числами. Доступны стандартные операции: map, filter, reduce, slice и другие.

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

Создание массива фиксированной длины

const arr1 = new Uint32Array(3);
console.log(arr1);
Uint32Array(3) [0, 0, 0]

Инициализация из обычного массива

const arr2 = new Uint32Array([10, 20, 30, 40]);
console.log(arr2);
console.log(arr2.length);
Uint32Array(4) [10, 20, 30, 40]
4

Работа с ArrayBuffer

const buffer = new ArrayBuffer(16);
const arr3 = new Uint32Array(buffer, 4, 2);
arr3[0] = 4294967295;
console.log(arr3);
console.log(arr3.byteOffset);
Uint32Array(2) [4294967295, 0]
4

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

const arr4 = new Uint32Array([100, 200, 300]);
for (const value of arr4) {
    console.log(value);
}
100
200
300

Альтернативные типизированные массивы JavaScript

В JavaScript существует несколько типизированных массивов для разных числовых типов:

  • Int32Array - 32-битные целые числа со знаком (-2147483648 до 2147483647)
  • Uint8Array - 8-битные беззнаковые целые числа (0-255), подходит для работы с байтами
  • Float64Array - 64-битные числа с плавающей точкой двойной точности
  • BigUint64Array - 64-битные беззнаковые целые числа большого размера

Uint32Array оптимален для работы с 32-битными цветами, большими индексами и данными, где важна экономия памяти по сравнению с Float64Array. Int32Array выбирают при необходимости отрицательных значений, а Uint8Array - для побайтовой обработки.

Распространенные ошибки

Выход за пределы диапазона значений

const arr = new Uint32Array(2);
arr[0] = -5;
arr[1] = 5000000000;
console.log(arr);
Uint32Array(2) [4294967291, 705032704]

Отрицательные значения преобразуются в беззнаковые через дополнение до двух, а превышающие - обрезаются по модулю 2^32.

Неправильное использование конструктора

try {
    const arr = new Uint32Array('abc');
} catch (e) {
    console.log(e.message);
}
Invalid typed array length

Путаница с обычными массивами

const typedArr = new Uint32Array([1, 2, 3]);
typedArr.push(4);
TypeError: typedArr.push is not a function

Изменения в спецификации

Uint32Array появился в ES6 (ECMAScript 2015) как часть типизированных массивов. С тех пор основные изменения касались интеграции с новыми возможностями языка:

  • ES2016: добавлена поддержка методов Array.prototype.includes
  • ES2017: улучшена совместимость с SharedArrayBuffer для многопоточности
  • ES2020: интеграция с BigInt для преобразований
  • ES2022: методы at() для индексации с конца массива

Современные движки JavaScript оптимизируют производительность Uint32Array через JIT-компиляцию и векторные инструкции процессора.

Расширенные примеры применения

Обработка 32-битных цветов RGBA

Пример javascript
function rgbaToComponents(color32) {
    const arr = new Uint32Array([color32]);
    const view = new Uint8Array(arr.buffer);
    return {
        r: view[0],
        g: view[1],
        b: view[2],
        a: view[3]
    };
}

console.log(rgbaToComponents(0xFF336699));
{ r: 51, g: 102, b: 153, a: 255 }

Быстрые битовые операции

Пример javascript
const data = new Uint32Array(1000);
// Быстрое заполнение
for (let i = 0; i < data.length; i++) {
    data[i] = i * 2654435761; // Константа для хеширования
}

// Побитовые операции над всем массивом
const mask = 0xFFFF0000;
for (let i = 0; i < data.length; i++) {
    data[i] = (data[i] & mask) >>> 16;
}

console.log(data.slice(0, 3));
Uint32Array(3) [40488, 80976, 121464]

Взаимодействие с WebGL

Пример javascript
// Создание буфера индексов для 3D-модели
const indexData = new Uint32Array([
    0, 1, 2,  // Первый треугольник
    2, 3, 0   // Второй треугольник
]);

// В реальном WebGL коде:
// const indexBuffer = gl.createBuffer();
// gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
// gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);

console.log('Индексы для рендеринга:', indexData);
Индексы для рендеринга: Uint32Array(6) [0, 1, 2, 2, 3, 0]

Криптографические хеши

Пример javascript
function simpleHash(str) {
    const arr = new Uint32Array(4);
    let hash = 0x811C9DC5;
    
    for (let i = 0; i < str.length; i++) {
        hash ^= str.charCodeAt(i);
        hash = (hash * 0x01000193) >>> 0;
    }
    
    arr[0] = hash;
    return arr;
}

console.log(simpleHash('Hello'));
Uint32Array(4) [4147527234, 0, 0, 0]

Аналоги в других языках программирования

Python: array и numpy

import array
import numpy as np

# Модуль array
py_arr = array.array('I', [100, 200, 300])
print(py_arr)

# NumPy
np_arr = np.array([100, 200, 300], dtype=np.uint32)
print(np_arr)
array('I', [100, 200, 300])
[100 200 300]

C: массивы фиксированного типа

#include <stdio.h>
#include <stdint.h>

int main() {
    uint32_t c_arr[3] = {100, 200, 300};
    printf("%u %u %u\n", c_arr[0], c_arr[1], c_arr[2]);
    return 0;
}
100 200 300

PHP: pack/unpack функции

$data = pack('L*', 100, 200, 300);
$unpacked = unpack('L*', $data);
print_r($unpacked);
Array
(
    [1] => 100
    [2] => 200
    [3] => 300
)

JS Uint32Array function comments

En
Uint32Array Represents an array of 32-bit unsigned integers.