ArrayBuffer en JavaScript | Explicado

En programación, un arreglo es una colección de elementos que pueden ser de cualquier tipo de dato y su longitud puede variar en tiempo de ejecución. Sin embargo, en algunos casos es necesario trabajar con bloques de memoria de tamaño fijo y para ello se utiliza la clase ArrayBuffer en JavaScript.

En este artículo, te explicaremos qué es un ArrayBuffer, cómo funciona y qué utilidad tiene en el desarrollo de aplicaciones web. Además, te mostraremos algunos ejemplos prácticos para que puedas entender mejor su uso.

📋 Aquí podrás encontrar✍

¿Qué es un ArrayBuffer?
Usando un ArrayBuffer en JavaScript
Ejemplos de uso de ArrayBuffer
Conclusión
Preguntas frecuentes

¿Qué es un ArrayBuffer?

Un ArrayBuffer es un objeto especial en JavaScript creado para manejar bloques de memoria de tamaño fijo. Es un tipo de objeto que permite almacenar datos binarios y es utilizado por otros objetos como TypedArray y DataView para acceder y manipular su contenido.

Al crear un ArrayBuffer, se asigna una cantidad específica de memoria sin inicializar que se puede utilizar para almacenar cualquier tipo de datos binarios, como enteros, flotantes y bytes. Para acceder a los datos binarios almacenados en un ArrayBuffer, se utilizan los objetos TypedArray y DataView.

Usando un ArrayBuffer en JavaScript

En JavaScript, el ArrayBuffer es un objeto global y se puede crear utilizando la sintaxis:

let buffer = new ArrayBuffer(tamaño);

Donde "tamaño" es el número de bytes que se quieren asignar al buffer.

Después de crear un ArrayBuffer, se pueden crear objetos TypedArray y DataView para acceder a su contenido. TypedArray proporciona una forma eficiente de trabajar con bloques de memoria y DataView permite acceder a datos individuales dentro del ArrayBuffer.

Además, la clase ArrayBuffer también tiene métodos integrados para copiar, comparar y concatenar bloques de memoria.

Ejemplos de uso de ArrayBuffer

Ejemplo 1: Creando un ArrayBuffer de 8 bytes y accediendo a su contenido

// Creamos un buffer de 8 bytes let buffer = new ArrayBuffer(8);


// Creamos una vista sin signo de 8 bits

let vista = new Uint8Array(buffer);
// Asignamos valores a cada byte del buffer

vista[0] = 1;

vista[1] = 2;

vista[2] = 3;

vista[3] = 4;

vista[4] = 5;

vista[5] = 6;

vista[6] = 7;

vista[7] = 8;

// Imprimimos los valores del buffer console.log(vista); // Output: Uint8Array [ 1, 2, 3, 4, 5, 6, 7, 8 ]

En este ejemplo, creamos un buffer de 8 bytes y accedemos a su contenido a través de una vista sin signo de 8 bits. Asignamos valores a cada byte y luego imprimimos el contenido del buffer.

Ejemplo 2: Concatenando dos ArrayBuffer

// Creamos dos buffers de 8 bytes let buffer1 = new ArrayBuffer(8); let buffer2 = new ArrayBuffer(8);


// Creamos una vista sin signo de 8 bits para cada buffer

let vista1 = new Uint8Array(buffer1);

let vista2 = new Uint8Array(buffer2);
// Asignamos valores a cada byte de los buffers

vista1[0] = 1;

vista1[1] = 2;

vista1[2] = 3;

vista1[3] = 4;
vista2[0] = 5;

vista2[1] = 6;

vista2[2] = 7;

vista2[3] = 8;
// Creamos un nuevo buffer de 16 bytes

let nuevoBuffer = new ArrayBuffer(16);
// Concatenamos los dos buffers en el nuevo buffer

let nuevaVista = new Uint8Array(nuevoBuffer);

nuevaVista.set(vista1);

nuevaVista.set(vista2, vista1.length);

// Imprimimos el contenido del nuevo buffer console.log(nuevaVista); // Output: Uint8Array [ 1, 2, 3, 4, 5, 6, 7, 8, 0, 0, 0, 0, 0, 0, 0, 0 ]

En este ejemplo, creamos dos buffers de 8 bytes cada uno y los concatenamos en un nuevo buffer de 16 bytes. Para ello, creamos una vista sin signo de 8 bits para cada buffer y asignamos valores a cada byte. Posteriormente, creamos un nuevo buffer y utilizamos el método set de TypedArray para concatenar los dos buffers en el nuevo buffer. Finalmente, imprimimos el contenido del nuevo buffer.

Conclusión

El ArrayBuffer es un objeto en JavaScript que permite trabajar con bloques de memoria de tamaño fijo. Es utilizado por otros objetos como TypedArray y DataView para acceder y manipular su contenido. En este artículo te hemos mostrado qué es un ArrayBuffer, cómo funciona y algunos ejemplos prácticos de su uso.

Si necesitas trabajar con bloques de memoria de tamaño fijo en tus aplicaciones web, el ArrayBuffer es una herramienta útil que puedes utilizar para manejar datos binarios eficientemente.

Preguntas frecuentes

¿Cuál es la diferencia entre ArrayBuffer y Array en JavaScript?

Un ArrayBuffer es un objeto creado para trabajar con bloques de memoria de tamaño fijo que almacenan datos binarios, mientras que un Array es un objeto que almacena cualquier tipo de datos y cuya longitud puede variar en tiempo de ejecución.

¿Es seguro utilizar ArrayBuffer en JavaScript?

Sí, es seguro utilizar ArrayBuffer en JavaScript ya que se utiliza una memoria asignada de forma segura en el objeto y no puede ser utilizada para afectar a otros procesos o aplicaciones.

¿Hay alguna limitación en el tamaño del ArrayBuffer en JavaScript?

En teoría, el tamaño del ArrayBuffer está limitado únicamente por la cantidad de memoria disponible en el sistema. Sin embargo, algunos navegadores pueden limitar el tamaño máximo permitido de los ArrayBuffer por razones de seguridad.

¿Cómo puedo convertir un ArrayBuffer en una cadena en JavaScript?

Para convertir un ArrayBuffer en una cadena en JavaScript, puedes utilizar el objeto TextDecoder. Por ejemplo:

let buffer = new ArrayBuffer(10); let vista = new Uint8Array(buffer);


vista[0] = 72;

vista[1] = 101;

vista[2] = 108;

vista[3] = 108;

vista[4] = 111;

vista[5] = 32;

vista[6] = 119;

vista[7] = 111;

vista[8] = 114;

vista[9] = 108; 
let decoder = new TextDecoder();

let cadena = decoder.decode(buffer);

console.log(cadena); // Output: "Hello world"