Nun, es ist tatsächlich ein Objekt, zum Beispiel können wir ein Array wie dieses erstellen:
var array = new Array (10);
Die Kraft und Allmacht von JavaScript -Arrays bringen uns Bequemlichkeit. Aber im Allgemeinen:
Allround-Dinge können in verschiedenen Umgebungen verwendet werden, sind jedoch nicht unbedingt für verschiedene Umgebungen geeignet.
Typedarray ist genau das, was passiert ist, um das Problem zu lösen, dass Arrays zu viele Dinge in JavaScript machen.
HerkunftTypeDarray ist ein üblicher Puffertyp mit fester Länge, mit dem Binärdaten im Puffer gelesen werden können.
Es wird in der WebGL -Spezifikation eingeführt, um das Problem der Binärdaten der JavaScript -Verarbeitung zu lösen.
Typedarray wurde von den meisten modernen Browsern unterstützt. Beispielsweise können Sie TypeDarray mit der folgenden Methode erstellen:
// Erstellen Sie einen 8-Byte-Arraybuffer
var b = new ArrayBuffer (8);
// Erstellen Sie eine Referenz von B, Typ int32, die Startposition ist 0 und die Endposition ist das Ende des Puffer
var v1 = new int32Array (b);
// Erstellen Sie eine Referenz von B, der Typ ist uint8, die Startposition ist 2 und die Endposition ist das Ende des Puffer
var v2 = new Uint8Array (b, 2);
// Erstellen Sie eine Referenz von B, Typ int16, die Startposition 2 und die Gesamtlänge 2 beträgt 2
var v3 = new int16Array (b, 2, 2);
Das gepufferte und erstellte Referenzlayout lautet:
| Variable | Index | |||||||
|---|---|---|---|---|---|---|---|---|
| Anzahl der Bytes | ||||||||
| B = | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| Anzahl der Indizes | ||||||||
| v1 = | 0 | 1 | ||||||
| v2 = | 0 | 1 | 2 | 3 | 4 | 5 | ||
| v3 = | 0 | 1 | ||||||
Dies bedeutet, dass das 0. Element des V1-Arrays vom Typ INT32 die 0-3-Bytes von Typ-ArrayBuffer usw. ist.
KonstruktorOben erstellen wir TypeDarray über ArrayBuffer, und tatsächlich bietet Typedarray 3 Konstruktoren, um seine Instanz zu erstellen.
Typedarray (nicht signierte lange Länge)
Erstellen Sie ein neues Typedarray mit der festen Länge.
Typedarray (Typedarray Array)
Typedarray (Typ [] Array)
Erstellen Sie ein neues Typedarray, jedes Element wird gemäß dem Array initialisiert und das Element wird entsprechend konvertiert.
TypedArray (ArrayBuffer -Puffer, optional vorzeichenloses langes ByteSet, optionale nicht signierte lange Länge)
Erstellen Sie ein neues Typedarray als Verweis auf den Puffer, byteoffset als Startversatz und Länge als Länge.
Daher erstellen wir normalerweise auf folgende Weise TypeDarray:
var array = new Uint8Array (10);
oder:
var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
DatenbetriebTypedArray bietet vier Methoden: Setter, Getter, Set und Subarray für Datenoperationen.
Gibt das Element des angegebenen Index zurück.
Setter void Set (nicht signierter langer Index, Typwert )Legt das Element des angegebenen Index auf den angegebenen Wert fest.
Void -Set ( Typedarray -Array, optional nicht signierter langer Offset) Void -Set ( Typ [] Array, optional nicht signierter langer Offset)Legen Sie den Wert gemäß dem Array ein, Offset ist die Offset -Position.
TypeDarray subarray (lang anfangen, optionales langes Ende)Gibt ein neues Typedarray mit dem Startbit und dem End -Bit -Ende zurück.
Zum Beispiel können Leseelemente verwendet werden : var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); Warn (Array [4]); // 5 Einstellelemente können verwendet werden : var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); Warn (Array [4]); // 5Array [4] = 12; alarm (Array [4]); // 12 Erhalten Sie eine Kopie und Sie können verwenden : var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); var array2 = Array.Subarray (0); Array -Typ| Typ | Größe | beschreiben | Web -IDL -Typ | Typ c |
|---|---|---|---|---|
Int8Array | 1 | 8-Bit signierte Ganzzahl | byte | signed char |
Uint8Array | 1 | 8-Bit nicht signierte Ganzzahl | octet | unsigned char |
Uint8ClampedArray | 1 | 8-Bit nicht signierte Ganzzahl (geklemmt) | octet | unsigned char |
Int16Array | 2 | 16-Bit signierte Ganzzahl | short | short |
Uint16Array | 2 | 16-Bit nicht signierte Ganzzahl | unsigned short | unsigned short |
Int32Array | 4 | 32-Bit signierte Ganzzahl | long | int |
Uint32Array | 4 | 32-Bit nicht signierte Ganzzahl | unsigned long | unsigned int |
Float32Array | 4 | 32-Bit-IEEE-schwimmende Punktzahl | unrestricted float | float |
Float64Array | 8 | 64-Bit-IEEE-Schwimmpunktzahl | unrestricted double | double |
Diejenigen, die Leinwand gespielt haben, sind sich möglicherweise vertraut.
Da das in Imagedata verwendete Array zum Speichern von Bilddaten vom Typ uint8clampedarray ist.
Zum Beispiel:
var context = document.createelement (canvas) .getContext (2d); var imagedata = context.createimeragedata (100, 100); console.log (Imagedata.data); Es wird in Firebug als :Warum typeDarray verwenden?Uint8Clampedarray {0 = 0, 1 = 0, 2 = 0, More ...}
Wir wissen, dass Zahlen in JavaScript 64-Bit-schwimmende Punktzahlen sind. Für ein binäres Bild (jedes Pixel wird als 8-Bit-Unsigned-Ganzzahl gespeichert), wenn Sie seine Daten in einem JavaScript-Array verwenden möchten, entspricht es der Verwendung des Bildes des Bildes, um die Daten eines Bildes zu speichern, das offensichtlich unwissenschaftlich ist. TypedArray kann uns helfen, nur 1/8 des ursprünglichen Speichers zu verwenden, um Bilddaten zu speichern.
Oder für Websocket ist es auch eine teurere Möglichkeit, mit Base64 zu übertragen, und der Umschalten auf binäre Übertragung kann ein besserer Weg sein.
Natürlich hat Typedarray mehr Vorteile, z. B. eine bessere Leistung. Lassen Sie uns einige kleine Tests durchführen, um dies zu überprüfen.
Die am Test teilnehmenden Browser sind :TEST1: Sequentielle LesegeschwindigkeitsleseFirefox 17.0.1 und Chrom 23.0.1271.97m
var timearray1 = [];
var timearray2 = [];
Funktion check1 () {
var array = new Uint8Clampedarray (5000000);
für (var i = array.length; i-;) {
Array [i] = math.floor (math.random () * 100);
}
var temp;
var time1 = (neues Datum ()). GetTime ();
für (var i = array.length; i-;) {
temp = array [i];
}
var time2 = (neues Datum ()). GetTime ();
console.log (time2 - time1);
timeArray1.push (time2 - time1);
}
Funktion check2 () {
var Array2 = Neuarray (5000000);
für (var i = array2.Length; i-;) {
array2 [i] = math.floor (math.random () * 100);
}
var temp;
var time3 = (neues Datum ()). GetTime ();
für (var i = array2.Length; i-;) {
temp = array2 [i];
}
var time4 = (neues Datum ()). GetTime ();
console.log (time4 - time3);
timeArray2.push (time4 - time3);
}
Funktionstimer (__ Spaß, __Time, __callback) {
var jetzt = 0;
Funktion begin () {
var timeout = setTimeout (function () {
if (jetzt! == __Time) {
jetzt ++;
__Spaß();
beginnen();
}anders{
if (timearray1.length && timearray2.Length) {
console.log ("TimeArray1 ==" + TimeArray1 + ", Durchschnitt ==" + Durchschnitt (TimeArray1));
console.log ("TimeArray2 ==" + TimeArray2 + ", Durchschnitt ==" + Durchschnitt (TimeArray2));
}
__callback && __callback ();
}
}, 100);
}
beginnen();
}
Funktion Durchschnitt (__ Array) {
var total = 0;
für (var i = __array.length; i-;) {
Gesamt += __Array [i];
}
return (Total / __Array.length);
}
Timer (check1, 10, function () {
Timer (check2, 10);
});
Es ist ersichtlich, dass die Lesegeschwindigkeit von Uint8Clampedarray deutlich schneller ist als die von Array (je länger die Stange, desto mehr Zeit dauert).
Test2: zufällige Lektüre//…
Funktion check1 () {
var array = new Uint8Clampedarray (5000000);
für (var i = array.length; i-;) {
Array [i] = math.floor (math.random () * 100);
}
var temp;
var time1 = (neues Datum ()). GetTime ();
für (var i = array.length; i-;) {
temp = array [math.floor (math.random () * 5000000)];
}
var time2 = (neues Datum ()). GetTime ();
console.log (time2 - time1);
timeArray1.push (time2 - time1);
}
Funktion check2 () {
var Array2 = Neuarray (5000000);
für (var i = array2.Length; i-;) {
array2 [i] = math.floor (math.random () * 100);
}
var temp;
var time3 = (neues Datum ()). GetTime ();
für (var i = array2.Length; i-;) {
temp = array2 [math.floor (math.random () * 5000000)];
}
var time4 = (neues Datum ()). GetTime ();
console.log (time4 - time3);
timeArray2.push (time4 - time3);
}
//…
Der Uint8Clampedarray liest schneller als Array.
Test3: sequenzielles Schreiben//…
Funktion check1 () {
var array = new Uint8Clampedarray (5000000);
var time1 = (neues Datum ()). GetTime ();
für (var i = array.length; i-;) {
Array [i] = math.floor (math.random () * 100);
}
var time2 = (neues Datum ()). GetTime ();
console.log (time2 - time1);
timeArray1.push (time2 - time1);
}
Funktion check2 () {
var Array2 = Neuarray (5000000);
var time3 = (neues Datum ()). GetTime ();
für (var i = array2.Length; i-;) {
array2 [i] = math.floor (math.random () * 100);
}
var time4 = (neues Datum ()). GetTime ();
console.log (time4 - time3);
timeArray2.push (time4 - time3);
}
//…
Test4: Operation kopieren (U8C bis U8C und Array nach U8C)//…
Funktion check1 () {
var array = new Uint8Clampedarray (5000000);
für (var i = array.length; i-;) {
Array [i] = math.floor (math.random () * 100);
}
var temp;
var array2 = new Uint8Clampedarray (5000000);
var time1 = (neues Datum ()). GetTime ();
Array2.set (Array);
var time2 = (neues Datum ()). GetTime ();
console.log (time2 - time1);
timeArray2.push (time2 - time1);
}
Funktion check2 () {
var Array = New Array (5000000);
für (var i = array.length; i-;) {
Array [i] = math.floor (math.random () * 100);
}
var temp;
var array2 = new Uint8Clampedarray (5000000);
var time1 = (neues Datum ()). GetTime ();
Array2.set (Array);
var time2 = (neues Datum ()). GetTime ();
console.log (time2 - time1);
timeArray2.push (time2 - time1);
}
//…
Es ist zu erkennen, dass U8C -Kopieren auf U8C viel schneller ist als das Kopieren von Array in U8C.