Introducción: Los arreglos en Java y C++ son estructuras de datos, que son contiguas de tamaño fijo y almacenan datos homogéneos. Estos arreglos utilizan contigüidad y almacenamiento en caché para mejorar el rendimiento, reduciendo así el tiempo de acceso aleatorio. Sin embargo, las arrays de JavaScript son bestias diferentes. A diferencia de los arreglos típicos, son dinámicos, dispersos y no homogéneos. Esto al principio da una presunción de su bajo rendimiento (debido a la incapacidad de las funciones de almacenamiento en caché), pero bajo el capó las cosas son diferentes. Los motores Javascript son bestias increíblemente inteligentes. Siempre que los datos no sean dispersos y sean homogéneos, Javascript los almacena de forma transparente en bloques de memoria contiguos. Por lo tanto, se comporta un poco como las arrays típicas y nos brinda un rendimiento mejorado.
Necesidad de TypedArrays: aunque las arrays de Javascript funcionaron bien, pero con mejoras en las aplicaciones web debido a la adición de WebGL, Sockets, etc., se necesitaba una mejora en el rendimiento. Se requería que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar. Aquí es donde TypedArrays entra en escena. Pero surge la pregunta: si el motor de JavaScript puede optimizar las cosas que hay debajo, ¿por qué necesitamos TypesArrays? Para responder a esto, necesitamos saber cómo se comportan los números y las arrays de JavaScript. En realidad, todos los números en JavaScript van a números de coma flotante de 64 bits de acuerdo con el estándar IEEE-754, que no es tan eficiente. Sin embargo, TypedArraysnos permite tener bloques contiguos de 8, 16 , 32 y 64 bits para enteros con y sin signo, así como números flotantes de 32 y 64 bits.
Esto nos permite ser más eficientes ya que especifica cuánta cantidad de memoria se utilizará y también ayuda en la transferencia de datos binarios en el formato esperado.
Usos de TypedArrays: si queremos transferir datos binarios como un formato entero contiguo de 16 bits en lugar de un punto flotante convencional de 64 bits, TypedArrays será eficiente. En palabras más simples, con TypedArrays, estamos creando arreglos con su contenido estrictamente controlado.
Ejemplo 1: supongamos que desea renderizar algunos gráficos 3D en la web. Esto requiere poder transferir una array de números, digamos valores de píxeles como RGB, o algunos datos a una interfaz nativa, que necesitaba que tuviera un tamaño específico (para RGBA en (0,255) ). Pero para TypedArrays, habríamos implementado una gran cantidad de manejo de datos para asegurarnos de que las cosas funcionen correctamente, y eso también en formato de coma flotante de 64 bits.
Javascript
<script>
// pixelData array with pixel values
const pixelData = [143, 1432, 728,
913, 182, 64, 023, 343, 183, 194]
// To convert pixel data into RGBA range ie. (0,255)
const clampedRGBA = new Uint8ClampedArray(pixelData);
console.log("Clamped PixelData: " + clampedRGBA)
</script>
Producción:
Clamped PixelData: 143,255,255,255,182,64,19,255,183,194
Explicación: el resultado anterior muestra la facilidad con la que se fijan los valores de píxel mediante Uint8ClampedArray sin necesidad de ningún manejo de datos explícito.
Ejemplo 2: En este ejemplo, veremos cómo podemos adjuntar vistas de array tipificadas y DataViews al búfer para leer el contenido del archivo especificado. Muchas API utilizan TypedArrays como FileReader.prototype.readAsArrayBuffer() . El FileReader puede leer el contenido de los archivos como un ArrayBuffer.
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<input type="file" onchange='readFile(event)' />
<br><br>
<textarea cols="50" rows="10"></textarea>
<script>
var readFile = function (event) {
var input = event.target;
var text = "";
var reader = new FileReader();
reader.onload = function () {
var arrayBuffer = reader.result;
var idView = new Uint8Array(arrayBuffer);
idView.forEach(function (alpha) {
// console.log(String.fromCharCode(alpha))
text = text + String.fromCharCode(alpha)
});
console.log(text);
document.getElementsByTagName(
'textarea')[0].innerText = text;
};
reader.readAsArrayBuffer(input.files[0]);
};
</script>
</body>
</html>
Producción:
Explicación: el ejemplo anterior nos muestra cómo, con la ayuda de la API FileReader y las vistas TypedArray, podemos ver el contenido del archivo o blob.
Publicación traducida automáticamente
Artículo escrito por mohdzaid07ali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA