`ArrayBuffer` en JavaScript

Este artículo explica el uso de ArrayBuffer en JavaScript.

Explicaremos todo sobre ArrayBuffer, desde los conceptos básicos hasta su uso, tipos relacionados y aplicaciones prácticas.

YouTube Video

ArrayBuffer en JavaScript

ArrayBuffer de JavaScript es un objeto para manejar datos binarios de bajo nivel y es particularmente útil para manipular datos binarios en WebAPIs, operaciones de archivos y comunicaciones de red.

Qué es ArrayBuffer

ArrayBuffer es una estructura de datos para manejar datos binarios de longitud fija. Permite manejar datos binarios en bruto que no pueden ser manejados por arrays u objetos regulares de JavaScript.

ArrayBuffer por sí solo no puede manipular datos directamente. En su lugar, los datos se leen y escriben utilizando TypedArray o DataView basados en un ArrayBuffer.

ArrayBuffer es especialmente útil en las siguientes situaciones.

• Cuando se procesan datos binarios recibidos de la red
• Cuando se requiere un intercambio eficiente de datos en Web Worker.
• Cuando se realiza procesamiento de imágenes o renderizado 3D con Canvas o WebGL.
• Cuando se manipulan archivos (especialmente archivos binarios).

Creando un ArrayBuffer

Primero, comencemos con cómo crear una instancia de ArrayBuffer. ArrayBuffer asigna memoria en unidades de bytes, por lo que debes especificar su tamaño al crearlo.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• En este ejemplo, se asigna un búfer de 16 bytes. Este búfer aún no contiene ningún dato.

Manipulando datos con TypedArray

No puedes acceder directamente a un ArrayBuffer, por lo que debes usar un TypedArray para leer y escribir datos. TypedArray proporciona diferentes tipos de vistas como Int8Array y Float32Array, lo que permite un acceso eficiente a los datos binarios.

Ejemplo usando Int8Array

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42

• Int8Array puede almacenar datos en cada byte, permitiendo que el búfer contenga 8 elementos. De esta manera, al usar diferentes tipos de vistas, puedes manipular los datos de manera eficiente.

Otros ejemplos de TypedArray

JavaScript tiene varios tipos de TypedArray. Por ejemplo, si deseas manejar enteros sin signo de 32 bits, utilizas Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• Uint32Array puede almacenar datos en unidades de 4 bytes, por lo que el búfer puede contener cuatro elementos. Es importante elegir el TypedArray adecuado según el tipo de datos que estés manejando.

Manipulación flexible de datos usando DataView

TypedArray solo puede manejar datos de un tipo fijo, pero usando DataView, puedes escribir datos de cualquier tipo en cualquier ubicación. Esto es particularmente útil cuando se trabaja con búferes que contienen tipos de datos mixtos.

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

Usando DataView, puedes especificar un desplazamiento en bytes y leer o escribir datos de varios tipos. Esto es muy útil cuando se manejan estructuras binarias complejas como protocolos de red o formatos de archivo.

Consideración del orden de bytes (Endianness)

Al usar DataView, también es necesario prestar atención al endianness (orden de los bytes). Dependiendo de la arquitectura del ordenador, el orden en que se almacenan los datos en la memoria puede variar. Los métodos de DataView tienen opciones para especificar la endianidad.

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

Si no especifica la endianidad correcta, los datos pueden no interpretarse correctamente en diferentes entornos. Por ello, es especialmente importante tener precaución en la comunicación de redes o en las operaciones de archivos.

Aplicaciones de ArrayBuffer

ArrayBuffer es una herramienta poderosa que se utiliza a menudo en el desarrollo web y las APIs de navegadores. Veamos algunos ejemplos de aplicaciones.

Recepción y Procesamiento de Datos Binarios

Por ejemplo, puede recuperar datos binarios de un servidor usando XMLHttpRequest o la API fetch y manejarlos como un ArrayBuffer.

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });

• En este ejemplo, los datos de una imagen se obtienen del servidor y se manejan como un Uint8Array. De esta forma, puede procesar los datos recibidos del servidor utilizando ArrayBuffer.

Uso en WebGL

En WebGL, ArrayBuffer se utiliza para manejar eficientemente datos binarios como datos de vértices y datos de color.

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

• En este ejemplo, se utiliza Float32Array para definir las coordenadas de los vértices de un rectángulo y enviarlas a un búfer de WebGL.

Gestión de Memoria y ArrayBuffer

ArrayBuffer gestiona la memoria a nivel de bytes, lo que lo hace muy eficiente, pero también es necesario ser cuidadoso con la gestión de la memoria. Cuando se manejan datos binarios grandes, es importante liberar adecuadamente los ArrayBuffer que no se estén utilizando. Aunque JavaScript realiza automáticamente la recolección de basura, si un ArrayBuffer sigue siendo referenciado, esto puede causar fugas de memoria.

Resumen

ArrayBuffer proporciona la base para el procesamiento de datos binarios en JavaScript. Combinando TypedArray y DataView, es posible manejar datos binarios de manera eficiente y flexible. Son herramientas indispensables en el desarrollo web, especialmente en muchas situaciones que implican el manejo de datos binarios como la comunicación en red y WebGL. Al comprenderlas correctamente y usarlas adecuadamente, puede mejorar el rendimiento y la eficiencia.

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