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

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

Базовые сведения о Float32Array

Float32Array представляет типизированный массив для хранения 32-битных чисел с плавающей запятой формата IEEE. Этот объект используется при работе с бинарными данными, высокопроизводительными вычислениями и взаимодействии с WebGL.

Конструктор поддерживает несколько вариантов создания:

  • Float32Array() — создает пустой массив
  • Float32Array(length) — создает массив заданной длины
  • Float32Array(typedArray) — создает массив из другого типизированного массива
  • Float32Array(object) — создает массив из итерируемого объекта
  • Float32Array(buffer, byteOffset, length) — создает представление буфера

Свойство BYTES_PER_ELEMENT возвращает размер элемента (всегда 4). Объект имеет методы аналогичные Array, включая map, filter, slice, но работает с фиксированной длиной.

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

Создание массива с нулевыми значениями:

const arr1 = new Float32Array(5);
console.log(arr1);
Float32Array(5) [0, 0, 0, 0, 0]

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

const arr2 = new Float32Array([1.1, 2.2, 3.3]);
console.log(arr2.length);
console.log(arr2[1]);
3
2.200000047683716

Работа с буфером:

const buffer = new ArrayBuffer(16);
const arr3 = new Float32Array(buffer, 4, 2);
arr3[0] = 42.5;
console.log(arr3.byteOffset);
console.log(arr3.byteLength);
4
8

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

JavaScript предоставляет другие типизированные массивы для различных числовых форматов:

  • Float64Array — 64-битные числа двойной точности
  • Int32Array — 32-битные целые числа
  • Uint8Array — 8-битные беззнаковые целые
  • Int16Array — 16-битные целые числа

Float32Array оптимален для графических вычислений где важна экономия памяти. Float64Array используется для математических расчетов требующих высокой точности. Int32Array подходит для целочисленных операций.

Частые ошибки

Попытка изменить размер после создания:

const arr = new Float32Array(3);
arr.length = 5; // Не работает
console.log(arr.length);
3

Неправильное использование буфера:

const buffer = new ArrayBuffer(8);
// Смещение должно быть кратно 4
const arr = new Float32Array(buffer, 3, 1);
RangeError: start offset is not valid

Потеря точности при преобразовании:

const jsArray = [0.1, 0.2];
const typedArr = new Float32Array(jsArray);
console.log(typedArr[0] + typedArr[1]);
0.30000001192092896

История изменений

Float32Array появился в ECMAScript 2015 без существенных изменений в последующих версиях. Методы типизированных массивов были стандартизированы и стали более согласованными с обычными массивами. Добавлена поддержка итераторов и методов копирования между массивами.

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

Векторные операции для графики:

Пример javascript
function normalize(vec) {
  const arr = new Float32Array(vec);
  let sum = 0;
  for(let i = 0; i < arr.length; i++) {
    sum += arr[i] * arr[i];
  }
  const magnitude = Math.sqrt(sum);
  return arr.map(v => v / magnitude);
}
console.log(normalize([3, 4]));
Float32Array(2) [0.6000000238418579, 0.800000011920929]

Работа с аудиоданными:

Пример javascript
// Генерация синусоидальной волны
const sampleRate = 44100;
const duration = 1;
const freq = 440;
const samples = new Float32Array(sampleRate * duration);
for(let i = 0; i < samples.length; i++) {
  samples[i] = Math.sin(2 * Math.PI * freq * i / sampleRate);
}
console.log(samples.slice(0, 5));
Float32Array(5) [0, 0.06264831805229187, 0.125, 0.18696144223213196, 0.248]

Матричные преобразования для WebGL:

Пример javascript
function createTranslationMatrix(dx, dy, dz) {
  return new Float32Array([
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    dx,dy,dz,1
  ]);
}
const translation = createTranslationMatrix(10, 5, 0);
console.log(translation);
Float32Array(16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10, 5, 0, 1]

Реализации в других языках

Python использует модуль array:

import array
arr = array.array('f', [1.5, 2.5, 3.5])
print(arr.tolist())
[1.5, 2.5, 3.5]

В языке C применяются обычные массивы:

float arr[5] = {1.1f, 2.2f, 3.3f};
printf("%zu", sizeof(arr)/sizeof(float));
5

PHP не имеет прямой аналогии, но можно использовать SplFixedArray с ограничениями.

JS Float32Array function comments

En
Float32Array Represents an array of 32-bit floating point numbers.