Eh bien, c'est en fait un objet, par exemple, nous pouvons créer un tableau comme celui-ci:
var array = nouveau tableau (10);
La puissance et la toute-puissance des tableaux JavaScript nous apportent la commodité. Mais de manière générale:
Des choses polyvalentes peuvent être utilisées dans divers environnements, mais elles ne conviennent pas nécessairement à divers environnements.
TypedArray est précisément ce qui est arrivé pour résoudre le problème que les tableaux font trop de choses en JavaScript.
origineTypedArray est un type de tampon de longueur fixe commun qui permet la lecture de données binaires dans le tampon.
Il est introduit dans la spécification WebGL pour résoudre le problème des données binaires de traitement JavaScript.
TypedArray a été soutenu par la plupart des navigateurs modernes. Par exemple, vous pouvez créer TypedArray en utilisant la méthode suivante:
// Créer un arraybuffer de 8 byte
var b = nouveau ArrayBuffer (8);
// Créer une référence de B, type int32, la position de départ est 0 et la position finale est la fin du tampon
var v1 = new int32Array (b);
// Créer une référence de B, le type est uint8, la position de départ est 2 et la position finale est la fin du tampon
var v2 = new uint8Array (b, 2);
// Créer une référence de B, type int16, la position de départ est 2 et la longueur totale est 2
var v3 = new int16Array (b, 2, 2);
La disposition de référence tamponnée et créée est:
| variable | indice | |||||||
|---|---|---|---|---|---|---|---|---|
| Nombre d'octets | ||||||||
| b = | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| Nombre d'index | ||||||||
| v1 = | 0 | 1 | ||||||
| v2 = | 0 | 1 | 2 | 3 | 4 | 5 | ||
| v3 = | 0 | 1 | ||||||
Cela signifie que le 0ème élément du tableau V1 de type INT32 est les 0-3 octets de Type ArrayBuffer, etc.
ConstructeurCi-dessus, nous créons TypedArray via ArrayBuffer, et en fait, TypedArray fournit 3 constructeurs pour créer son instance.
TypedArray (longue longueur non signée)
Créez un nouveau TypedArray avec la longueur étant sa longueur fixe.
TypedArray (TypedArray Array)
TypedArray (Type [] Array)
Créez un nouveau TypedArray, chaque élément est initialisé en fonction du tableau et l'élément est converti en conséquence.
TypedArray (tampon ArrayBuffer, facultatif non signé, long byteoffset, facultatif de longue longueur non signé)
Créez un nouveau TypedArray comme référence au tampon, ByteOffset comme décalage et longueur de départ comme longueur.
Nous créons donc généralement des TypedArray de la manière suivante:
var array = new Uint8Array (10);
ou:
Var Array = New Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
Opération de donnéesTypedArray fournit quatre méthodes: Setter, Getter, SET et sous-réseau pour les opérations de données.
Renvoie l'élément de l'indice spécifié.
Setter void Set (index long non signé, valeur de type )Définit l'élément de l'index spécifié à la valeur spécifiée.
SET VOID ( TypedArray Array, Facultatif Unsigned Offset non signé) SET VOID ( Type [] TableDéfinissez la valeur en fonction du tableau, le décalage est la position de décalage.
TypedArray Subarray (Long Begin, Facultatif Long Fin)Renvoie un nouveau TypedArray avec le début de début et l'extrémité du bit de fin.
Par exemple, les éléments de lecture peuvent être utilisés : Var Array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); alerte (tableau [4]); // 5 Les éléments de réglage peuvent être utilisés : Var Array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); alerte (tableau [4]); // 5Array [4] = 12; alerte (tableau [4]); // 12 Obtenez une copie et vous pouvez utiliser : var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); var array2 = array.subarray (0); type de tableau| taper | taille | décrire | Type d'IDL Web | Type C |
|---|---|---|---|---|
Int8Array | 1 | Entier signé 8 bits | byte | signed char |
Uint8Array | 1 | Entier non signé 8 bits | octet | unsigned char |
Uint8ClampedArray | 1 | Entier non signé 8 bits (serré) | octet | unsigned char |
Int16Array | 2 | Entier signé 16 bits | short | short |
Uint16Array | 2 | Entier non signé 16 bits | unsigned short | unsigned short |
Int32Array | 4 | Entier signé 32 bits | long | int |
Uint32Array | 4 | Entier non signé 32 bits | unsigned long | unsigned int |
Float32Array | 4 | Numéro de point flottant de l'IEEE 32 bits | unrestricted float | float |
Float64Array | 8 | Numéro de point flottant IEEE 64 bits | unrestricted double | double |
Ceux qui ont joué sur toile peuvent se sentir familiers.
Parce que le tableau utilisé dans iMagedata pour stocker les données d'image est de type uint8clampedArray.
Par exemple:
var context = Document.CreateElement (canvas) .getContext (2d); var imagedata = context.createImagedata (100, 100); console.log (imagedata.data); Il est affiché dans Firebug comme :Pourquoi utiliser TypedArrayUint8clampedArray {0 = 0, 1 = 0, 2 = 0, plus ...}
Nous savons que les chiffres en JavaScript sont des numéros de points flottants 64 bits. Pour une image binaire (chaque pixel est stocké comme un entier non signé 8 bits), si vous souhaitez utiliser ses données dans un tableau JavaScript, il équivaut à utiliser 8 fois la mémoire de l'image pour stocker les données d'une image, ce qui n'est évidemment pas scientifique. TypedArray peut nous aider à utiliser uniquement 1/8 de la mémoire d'origine pour stocker les données d'image.
Ou pour WebSocket, c'est également un moyen plus coûteux de transférer avec Base64, et passer à un transfert binaire peut être un meilleur moyen.
Bien sûr, TypedArray a plus d'avantages, comme avoir de meilleures performances. Faisons quelques petits tests pour le vérifier.
Les navigateurs participant au test sont :Test1: lecture de vitesse de lecture séquentielleFirefox 17.0.1 et Chrome 23.0.1271.97m
var timeArray1 = [];
var timeArray2 = [];
Fonction Check1 () {
var array = new uint8clampedArray (5000000);
pour (var i = array.length; i -;) {
array [i] = math.floor (math.random () * 100);
}
Var Temp;
var time1 = (new Date ()). getTime ();
pour (var i = array.length; i -;) {
temp = array [i];
}
var time2 = (new Date ()). getTime ();
console.log (time2 - time1);
TIMEARRAY1.PUSH (TIME2 - TIME1);
}
Fonction Check2 () {
var array2 = nouveau tableau (5000000);
pour (var i = array2.length; i -;) {
array2 [i] = math.floor (math.random () * 100);
}
Var Temp;
var time3 = (new Date ()). getTime ();
pour (var i = array2.length; i -;) {
temp = array2 [i];
}
var time4 = (new Date ()). getTime ();
console.log (time4 - time3);
timeArray2.push (time4 - time3);
}
Fonction Timer (__ Fun, __time, __Callback) {
var maintenant = 0;
fonction début () {
var timeout = setTimeout (function () {
si (maintenant! == __time) {
maintenant ++;
__amusant();
commencer();
}autre{
if (timearray1.length && timearray2.length) {
Console.log ("TIMEARRAY1 ==" + TIMEARRAY1 + ", moyenne ==" + moyenne (TIMEARRAY1));
Console.log ("TIMEARRAY2 ==" + TIMEARRAY2 + ", moyenne ==" + moyenne (TIMEARRAY2));
}
__Callback && __Callback ();
}
}, 100);
}
commencer();
}
Fonction moyenne (__ Array) {
var total = 0;
pour (var i = __array.length; i -;) {
Total + = __Array [i];
}
return (total / __array.length);
}
Timer (Check1, 10, fonction () {
minuterie (chèque2, 10);
});
On peut voir que la vitesse de lecture de Uint8ClampedArray est nettement plus rapide que celle du tableau (plus la barre est longue, plus il faut de temps).
Test2: lecture aléatoire//…
Fonction Check1 () {
var array = new uint8clampedArray (5000000);
pour (var i = array.length; i -;) {
array [i] = math.floor (math.random () * 100);
}
Var Temp;
var time1 = (new Date ()). getTime ();
pour (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);
}
Fonction Check2 () {
var array2 = nouveau tableau (5000000);
pour (var i = array2.length; i -;) {
array2 [i] = math.floor (math.random () * 100);
}
Var Temp;
var time3 = (new Date ()). getTime ();
pour (var i = array2.length; i -;) {
temp = array2 [math.floor (math.random () * 5000000)];
}
var time4 = (new Date ()). getTime ();
console.log (time4 - time3);
timeArray2.push (time4 - time3);
}
//…
Le Uint8ClampedArray se lit plus rapidement que le tableau.
Test3: écriture séquentielle//…
Fonction Check1 () {
var array = new uint8clampedArray (5000000);
var time1 = (new Date ()). getTime ();
pour (var i = array.length; i -;) {
array [i] = math.floor (math.random () * 100);
}
var time2 = (new Date ()). getTime ();
console.log (time2 - time1);
TIMEARRAY1.PUSH (TIME2 - TIME1);
}
Fonction Check2 () {
var array2 = nouveau tableau (5000000);
var time3 = (new Date ()). getTime ();
pour (var i = array2.length; i -;) {
array2 [i] = math.floor (math.random () * 100);
}
var time4 = (new Date ()). getTime ();
console.log (time4 - time3);
timeArray2.push (time4 - time3);
}
//…
Test4: Copier l'opération (U8C vers U8C et Array vers U8C)//…
Fonction Check1 () {
var array = new uint8clampedArray (5000000);
pour (var i = array.length; i -;) {
array [i] = math.floor (math.random () * 100);
}
Var Temp;
var array2 = new uint8clampedArray (5000000);
var time1 = (new Date ()). getTime ();
array2.set (array);
var time2 = (new Date ()). getTime ();
console.log (time2 - time1);
TIMEARRAY2.PUSH (TIME2 - TIME1);
}
Fonction Check2 () {
Var Array = nouveau tableau (5000000);
pour (var i = array.length; i -;) {
array [i] = math.floor (math.random () * 100);
}
Var Temp;
var array2 = new uint8clampedArray (5000000);
var time1 = (new Date ()). getTime ();
array2.set (array);
var time2 = (new Date ()). getTime ();
console.log (time2 - time1);
TIMEARRAY2.PUSH (TIME2 - TIME1);
}
//…
On peut voir que la copie U8C vers U8C est beaucoup plus rapide que la copie du tableau vers U8C.