TypedArray en JavaScript

Este artículo explica TypedArray en JavaScript.

Explicaremos en detalle el concepto básico de TypedArray, cada tipo, cómo usarlos y casos de uso específicos.

YouTube Video

TypedArray en JavaScript

TypedArray en JavaScript es un objeto para manejar de manera eficiente datos binarios en búfer. TypedArray asigna y manipula memoria basada en tipos de datos específicos. A diferencia de los arreglos normales, TypedArray solo puede contener datos binarios de tamaño fijo, no tipos de datos arbitrarios.

La estructura básica de TypedArray

Los principales componentes de un TypedArray son el ArrayBuffer y el propio TypedArray.

• ArrayBuffer: Un búfer de tamaño fijo que asigna datos binarios en memoria. Este búfer es simplemente un área de datos y no se puede leer ni escribir directamente.
• TypedArray: Un objeto envoltorio que aplica un tipo de dato específico al búfer, permitiendo el acceso y la manipulación de datos.

Ejemplo de uso básico

El siguiente es un ejemplo de cómo crear un ArrayBuffer y luego crear un TypedArray basado en él.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• En este ejemplo, se crea un ArrayBuffer y luego se crea un Uint8Array basado en ese búfer. Cada elemento se trata como un entero sin signo de 8 bits, almacenando valores solo dentro del rango especificado.

Tipos de TypedArray

Existen diferentes tipos de TypedArray para cada tipo de dato. Los principales son los siguientes.

Estos TypedArray son eficientes en memoria y son efectivos para manejar grandes cantidades de datos.

Manipulación de TypedArrays

Puedes acceder a los datos en un TypedArray utilizando índices, al igual que en un array normal, pero también se proporcionan varios métodos especiales.

Estableciendo valores

En un TypedArray, puedes asignar múltiples valores a la vez usando el método set.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Este código utiliza el método set para asignar varios valores a la vez a un Int16Array, y muestra cada elemento en la consola.

Obteniendo un subarray

Para obtener una parte de un TypedArray como un subarreglo, utiliza el método subarray. Esto referencia el mismo búfer que el TypedArray original.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Este código recupera un rango específico de elementos de un Int16Array utilizando el método subarray y muestra el subarreglo en la consola.

Copiando buffers

El búfer de un TypedArray también se puede copiar a otro TypedArray. Usando el método set, puedes copiar desde una posición específica.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Este código copia el contenido de un Uint8Array a otro arreglo utilizando el método set, y muestra el arreglo copiado en la consola.

Usando DataView

Mientras que un TypedArray maneja búferes con un tipo de dato fijo, DataView es una interfaz que permite la manipulación flexible de datos binarios con desplazamientos y tipos de datos arbitrarios. Esto permite mezclar diferentes tipos dentro del mismo búfer.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Este código utiliza un DataView para escribir diferentes tipos de datos—enteros de 32 bits y números de punto flotante de 32 bits—en el mismo búfer y verifica los resultados.

• DataView ofrece mayor flexibilidad de acceso a los datos que TypedArray y es especialmente útil cuando se trabaja con archivos en formato binario o protocolos de red.

Casos de uso de TypedArray

TypedArray se utiliza principalmente para manejar grandes cantidades de datos binarios de manera eficiente. Los casos de uso específicos incluyen los siguientes:.

Procesamiento de imágenes

TypedArray se utiliza al manipular la información de los píxeles de los datos de imagen. Usando Uint8Array, puedes conservar los valores RGBA de cada píxel y realizar edición y procesamiento de imágenes.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Este código crea datos de imagen con un ancho de 100 y alto de 100 en formato RGBA utilizando un Uint8Array, y establece todos los píxeles en rojo.

Interfaz con WebAssembly

TypedArray se utiliza para intercambiar datos binarios entre JavaScript y WebAssembly. Compartiendo el espacio de memoria de JavaScript y WebAssembly mediante ArrayBuffer, es posible realizar un intercambio de datos rápido.

Procesamiento de datos de audio y video

TypedArray desempeña un papel importante en el procesamiento de audio y video. Puedes almacenar las formas de onda de datos de audio en Float32Array para realizar reproducción y procesamiento.

Conclusión

TypedArray es una herramienta poderosa para manejar grandes cantidades de datos binarios de manera eficiente. Es especialmente útil en aplicaciones críticas para el rendimiento, como el procesamiento de imágenes, WebAssembly y el procesamiento de datos de audio/video. TypedArray tiene una API similar a los arrays regulares, pero hay restricciones relacionadas con el uso de memoria y los tipos de datos, por lo que se requiere una diferenciación adecuada en su uso.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video