Bueno, en realidad es un objeto, por ejemplo, podemos crear una matriz como esta:
varilla var = nueva matriz (10);
El poder y la omnipotencia de las matrices de JavaScript nos traen conveniencia. Pero en general:
Las cosas integrales se pueden usar en varios entornos, pero no son necesariamente adecuadas para diversos entornos.
TypedArray es precisamente lo que sucedió para resolver el problema de que las matrices hacen demasiadas cosas en JavaScript.
origenTypedArray es un tipo de búfer de longitud fija común que permite la lectura de datos binarios en el búfer.
Se introduce en la especificación de WebGL para resolver el problema de los datos binarios de procesamiento de JavaScript.
TypedArray ha sido apoyado por la mayoría de los navegadores modernos. Por ejemplo, puede crear typedArray utilizando el siguiente método:
// crear un arraybuffer de 8 bytes
var b = new ArrayBuffer (8);
// Crear una referencia de B, tipo int32, la posición inicial es 0 y la posición final es el final del búfer
var v1 = new Int32Array (b);
// Crear una referencia de B, el tipo es Uint8, la posición inicial es 2 y la posición final es el final del búfer
var v2 = new Uint8Array (b, 2);
// Crear una referencia de B, tipo INT16, la posición inicial es 2 y la longitud total es 2
var v3 = new Int16Array (b, 2, 2);
El diseño de referencia buffado y creado es:
| variable | índice | |||||||
|---|---|---|---|---|---|---|---|---|
| Número de bytes | ||||||||
| b = | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| Número de índices | ||||||||
| v1 = | 0 | 1 | ||||||
| v2 = | 0 | 1 | 2 | 3 | 4 | 5 | ||
| v3 = | 0 | 1 | ||||||
Esto significa que el elemento 0 de la matriz V1 de tipo int32 es el 0-3 bytes de tipo ArrayBuffer, y así sucesivamente.
ConstructorArriba creamos TypedArray a través de ArrayBuffer, y de hecho, TypedArray proporciona 3 constructores para crear su instancia.
TypedArray (longitud larga sin firmar)
Cree un nuevo TypedArray con longitud siendo su longitud fija.
TypedArray (matriz typedArray)
TypedArray (type [] matriz)
Cree un nuevo typedArray, cada elemento se inicializa de acuerdo con la matriz y el elemento se convierte en consecuencia.
TypedArray (búfer de arraybuffer, byteffset largo sin firmar opcional, longitud de largo no firmada opcional)
Cree un nuevo typedArray como referencia al búfer, Byteoffset como su desplazamiento inicial y longitud como longitud.
Por lo tanto, generalmente creamos TypedArray de la siguiente manera:
varilla var = new Uint8Array (10);
o:
Var Array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
Operación de datosTypedArray proporciona cuatro métodos: setter, getter, set y subarrray para operaciones de datos.
Devuelve el elemento del índice especificado.
Setter Void Set (índice largo sin firmar, valor de tipo )Establece el elemento del índice especificado al valor especificado.
Conjunto vacío (matriz typedArray , compensación larga sin firmar opcional) conjunto void ( type [] matriz, desplazamiento largo sin firmar opcional)Establezca el valor de acuerdo con la matriz, el desplazamiento es la posición de desplazamiento.
TypedArray Subarrray (Long Begin, extremo largo opcional)Devuelve un nuevo typedArray con el comienzo de inicio y el bit final finaliza.
Por ejemplo, se pueden usar elementos de lectura : Var Array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); alerta (matriz [4]); // se pueden usar 5 elementos de configuración : Var Array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); alerta (matriz [4]); // 5Array [4] = 12; alerta (matriz [4]); // 12 Obtenga una copia y puede usar : Var Array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); var array2 = array.subarray (0); tipo de matriz| tipo | tamaño | describir | Tipo de IDL web | Tipo C |
|---|---|---|---|---|
Int8Array | 1 | Entero firmado de 8 bits | byte | signed char |
Uint8Array | 1 | Integer Unsigned de 8 bits | octet | unsigned char |
Uint8ClampedArray | 1 | Integer Unsigned de 8 bits (sujetado) | octet | unsigned char |
Int16Array | 2 | Entero firmado de 16 bits | short | short |
Uint16Array | 2 | Entero sin firmar de 16 bits | unsigned short | unsigned short |
Int32Array | 4 | Entero firmado de 32 bits | long | int |
Uint32Array | 4 | Integer Unsigned de 32 bits | unsigned long | unsigned int |
Float32Array | 4 | Número de punto flotante IEEE de 32 bits | unrestricted float | float |
Float64Array | 8 | Número de punto flotante IEEE de 64 bits | unrestricted double | double |
Aquellos que han jugado lienzo pueden sentirse familiarizados.
Debido a que la matriz utilizada en iMagedata para almacenar datos de imagen es de tipo uint8ClampedArray.
Por ejemplo:
var context = document.createElement (Canvas) .getContext (2d); var imagedata = context.createImagedata (100, 100); console.log (imagedata.data); Se muestra en Firebug como :¿Por qué usar TypedArray?Uint8ClampedArray {0 = 0, 1 = 0, 2 = 0, más ...}
Sabemos que los números en JavaScript son números de puntos flotantes de 64 bits. Para una imagen binaria (cada píxel se almacena como un entero sin firmar de 8 bits), si desea usar sus datos en una matriz de JavaScript, es equivalente a usar 8 veces la memoria de la imagen para almacenar los datos de una imagen, que obviamente no es científico. TypedArray puede ayudarnos solo a usar 1/8 de la memoria original para almacenar datos de imagen.
O para WebSocket, también es una forma más costosa de transferir con Base64, y cambiar a la transferencia binaria puede ser una mejor manera.
Por supuesto, TypedArray tiene más beneficios, como tener un mejor rendimiento. Hagamos algunas pequeñas pruebas para verificar esto.
Los navegadores que participan en la prueba son :Test1: Lectura de velocidad de lectura secuencialFirefox 17.0.1 y Chrome 23.0.1271.97m
var timearray1 = [];
var timearray2 = [];
función check1 () {
Var Array = new Uint8ClampedArray (5000000);
for (var i = array.length; i-;) {
matriz [i] = math.floor (math.random () * 100);
}
var temp;
var tiempo1 = (nueva fecha ()). getTime ();
for (var i = array.length; i-;) {
temp = array [i];
}
var time2 = (new Date ()). GetTime ();
console.log (Time2 - Time1);
timearray1.push (Time2 - Time1);
}
función check2 () {
var array2 = nueva matriz (5000000);
para (var i = array2.length; i-;) {
array2 [i] = math.floor (math.random () * 100);
}
var temp;
var tiempo3 = (nueva fecha ()). getTime ();
para (var i = array2.length; i-;) {
temp = array2 [i];
}
var tiempo4 = (nueva fecha ()). getTime ();
console.log (Time4 - Time3);
timearray2.push (Time4 - Time3);
}
Tiempo de tiempo de función (__ diversión, __time, __callback) {
var ahora = 0;
función begin () {
VAR TIMEOUT = SETTIMEOUT (function () {
if (ahora! == __time) {
ahora ++;
__divertido();
comenzar();
}demás{
if (timearray1.length && timearray2.length) {
console.log ("timearray1 ==" + timearray1 + ", promedio ==" + promedio (timearray1));
console.log ("timearray2 ==" + timearray2 + ", promedio ==" + promedio (timearray2));
}
__callback && __callback ();
}
}, 100);
}
comenzar();
}
promedio de funciones (__ matriz) {
var en total = 0;
para (var i = __array.length; i-;) {
Total += __array [i];
}
return (total / __array.length);
}
temporizador (check1, 10, function () {
temporizador (chech2, 10);
});
Se puede ver que la velocidad de lectura de Uint8ClampedArray es significativamente más rápida que la de la matriz (cuanto más tiempo sea la barra, más tiempo lleva).
Test2: lectura aleatoria// ...
función check1 () {
Var Array = new Uint8ClampedArray (5000000);
for (var i = array.length; i-;) {
matriz [i] = math.floor (math.random () * 100);
}
var temp;
var tiempo1 = (nueva fecha ()). getTime ();
for (var i = array.length; i-;) {
temp = array [math.floor (math.random () * 5000000)];
}
var time2 = (new Date ()). GetTime ();
console.log (Time2 - Time1);
timearray1.push (Time2 - Time1);
}
función check2 () {
var array2 = nueva matriz (5000000);
para (var i = array2.length; i-;) {
array2 [i] = math.floor (math.random () * 100);
}
var temp;
var tiempo3 = (nueva fecha ()). getTime ();
para (var i = array2.length; i-;) {
temp = array2 [math.floor (math.random () * 5000000)];
}
var tiempo4 = (nueva fecha ()). getTime ();
console.log (Time4 - Time3);
timearray2.push (Time4 - Time3);
}
// ...
El Uint8ClampedArray se lee más rápido que la matriz.
Test3: escritura secuencial// ...
función check1 () {
Var Array = new Uint8ClampedArray (5000000);
var tiempo1 = (nueva fecha ()). getTime ();
for (var i = array.length; i-;) {
matriz [i] = math.floor (math.random () * 100);
}
var time2 = (new Date ()). GetTime ();
console.log (Time2 - Time1);
timearray1.push (Time2 - Time1);
}
función check2 () {
var array2 = nueva matriz (5000000);
var tiempo3 = (nueva fecha ()). getTime ();
para (var i = array2.length; i-;) {
array2 [i] = math.floor (math.random () * 100);
}
var tiempo4 = (nueva fecha ()). getTime ();
console.log (Time4 - Time3);
timearray2.push (Time4 - Time3);
}
// ...
Test4: Operación de copia (U8C a U8C y Array a U8C)// ...
función check1 () {
Var Array = new Uint8ClampedArray (5000000);
for (var i = array.length; i-;) {
matriz [i] = math.floor (math.random () * 100);
}
var temp;
var array2 = new Uint8ClampedArray (5000000);
var tiempo1 = (nueva fecha ()). getTime ();
array2.set (matriz);
var time2 = (new Date ()). GetTime ();
console.log (Time2 - Time1);
timearray2.push (Time2 - Time1);
}
función check2 () {
VAR array = nueva matriz (5000000);
for (var i = array.length; i-;) {
matriz [i] = math.floor (math.random () * 100);
}
var temp;
var array2 = new Uint8ClampedArray (5000000);
var tiempo1 = (nueva fecha ()). getTime ();
array2.set (matriz);
var time2 = (new Date ()). GetTime ();
console.log (Time2 - Time1);
timearray2.push (Time2 - Time1);
}
// ...
Se puede ver que copiar U8C a U8C es mucho más rápido que copiar matriz a U8C.