Array
-Objekte wachsen und verkleinern sich dynamisch und können jeden beliebigen JavaScript-Wert aufnehmen. JavaScript-Engines führen Optimierungen durch, damit diese Arrays schnell verarbeitet werden können. Da aber Applikationen immer mächtiger werden und neue Features wie Audio- und Videobearbeitung oder der Zugriff auf Rohdaten mit WebSockets hinzugefügt werden, gibt es Situationen, in denen es hilfreich ist diese binären Rohdaten schnell und einfach über typisierte Arrays im JavaScript-Code zu manipulieren.Array.isArray()
liefert false zurück. Außerdem werden nicht alle Array-Methoden wie beispielsweise push und pop unterstützt.Puffer und Sichten: Architektur typisierter Arrays
Um maximale Flexibilität und Effizienz zu schaffen, spalten typisierte Arrays in JavaScript die Durchführung in Puffer und Sichten. Ein Puffer (vom ArrayBuffer
-Objekt durchgeführt) ist ein Objekt, das eine Menge von Daten verkörpert. Dazu gehört kein echtes Format und es wird kein Mechanismus angeboten, um auf den Inhalt zuzugreifen. Um Zugang zu diesem Speicher zu schaffen, muss man eine Sicht benutzen. Eine Sicht liefert einen Kontext, der diese Daten in ein echtes, typisiertes Array umwandelt. Genauer gesagt gibt dieser Kontext einen Datentypen, einen Versatz und die Anzahl der Elemente an.
ArrayBuffer
Der ArrayBuffer
ist ein Datentyp, der einen generischen, binären Datenpuffer mit festgelegter Länge darstellt. Es ist nicht möglich den Inhalt dieses Puffers (ArrayBuffer) direkt zu bearbeiten; stattdessen erstellt man selbst eine Sicht durch ein typisiertes Array oder eine DataView
. Dadurch wird der Puffer als ein spezifisches Format dargestellt, das benutzt wird, um den Inhalt des Puffers zu modifizieren und lesen.
Sichten von typisierten Arrays
Sichten, die durch typisierte Arrays erstellt wurden, haben selbst beschreibende Namen, und bieten Sichten für alle gebräuchlichen numerischen Typen wie Int8
, Uint32
, Float64
usw. an. Es gibt auch eine spezielle Sicht von typisierten Arrays, nämlich das Uint8ClampedArray
. Dieses begrenzt die Werte auf 0 bis 255, was nützlich beispielsweise für die Datenverarbeitung einer Leinwand ist.
Type | Value Range | Size in bytes | Description | Web IDL type | Equivalent C type |
---|---|---|---|---|---|
Int8Array |
-128 to 127 |
1 | 8-bit two's complement signed integer | byte |
int8_t |
Uint8Array |
0 to 255 |
1 | 8-bit unsigned integer | octet |
uint8_t |
Uint8ClampedArray |
0 to 255 |
1 | 8-bit unsigned integer (clamped) | octet |
uint8_t |
Int16Array |
-32768 to 32767 |
2 | 16-bit two's complement signed integer | short |
int16_t |
Uint16Array |
0 to 65535 |
2 | 16-bit unsigned integer | unsigned short |
uint16_t |
Int32Array |
-2147483648 to 2147483647 |
4 | 32-bit two's complement signed integer | long |
int32_t |
Uint32Array |
0 to 4294967295 |
4 | 32-bit unsigned integer | unsigned long |
uint32_t |
Float32Array |
1.2 ×10-38 to 3.4 ×1038 |
4 | 32-bit IEEE floating point number (7 significant digits e.g., 1.1234567 ) |
unrestricted float |
float |
Float64Array |
5.0 ×10-324 to 1.8 ×10308 |
8 | 64-bit IEEE floating point number (16 significant digits e.g., 1.123...15 ) |
unrestricted double |
double |
BigInt64Array |
-263 to 263-1 |
8 | 64-bit two's complement signed integer | bigint |
int64_t (signed long long) |
BigUint64Array |
0 to 264-1 |
8 | 64-bit unsigned integer | bigint |
uint64_t (unsigned long long) |
DataView
Die DataView
(zu deutsch "Daten-Sicht") ist ein low-level Interface, das Getter und Setter zum Lesen und Schreiben beliebiger Daten in den Buffer anbietet. Das ist beispielsweise nützlich wenn man mit verschiedenen Datentypen arbeiten muss. Sichten von typisierten Arrays sind in der nativen Byte-Reihenfolge Ihrer Plattform (siehe Endianness. Mit einem DataView
können Sie die Byte-Reihenfolge kontrollieren. Standardmässig ist Big-Endian eingestellt, Sie können es in den Gettern und Settern auf Little-Endian umstellen.
Web APIs mit typisierten Arrays
FileReader.prototype.readAsArrayBuffer()
- Die
FileReader.prototype.readAsArrayBuffer()
Methode liest den Inhalt aus einem gegebenenBlob
oder einerDatei
. XMLHttpRequest.prototype.send()
- Die
send()
Methode einerXMLHttpRequest
-Instanz unterstützt nun Typed Arrays undArrayBuffer
Objekte als Argument. ImageData.data
- Ein
Uint8ClampedArray
welches die Daten in der RGBA-Reihenfolge enthält, mit Integer-Werten zwischen 0 und 255 inklusiv.
Beispiele
Sichten als Puffer benutzen
Als erstes muss ein Puffer erstellt werden, hier mit einer festgelegten Länge von 16 Bytes:
var buffer = new ArrayBuffer(16);
Jetzt haben wir einen Speicherblock mit Bytes, die mit 0 vorinitialisiert sind. Darüber hinaus lässt sich nicht viel damit anstellen. Wir können überprüfen, ob er wirklich 16 Bytes lang ist, und das war's auch schon.
if (buffer.byteLength === 16) {
console.log("Yes, it's 16 bytes.");
} else {
console.log("Oh no, it's the wrong size!");
}
Bevor wir wirklich damit arbeiten können, müssen wir eine Sicht erzeugen. Wir erstellen eine Sicht, der die Daten in dem Puffer als ein Array von vorzeichenbehafteten 32-Bit-Integern sieht.
var int32View = new Int32Array(buffer);
Jetzt können wir auf die Elemente in dem Array wie in jedem normalen Array zugreifen.
for (var i = 0; i < int32View.length; i++) {
int32View[i] = i * 2;
}
Der obige Code füllt die 4 Einträge in dem Array (4 Einträge mit je 4 Bytes ergeben 16 Bytes insgesamt) mit den Werten 0, 2, 4 und 6.
Multiple views on the same data
Things start to get really interesting when you consider that you can create multiple views onto the same data. For example, given the code above, we can continue like this:
var int16View = new Int16Array(buffer);
for (var i = 0; i < int16View.length; i++) {
console.log("Entry " + i + ": " + int16View[i]);
}
Here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we output all the values in the buffer as 16-bit integers. Now we get the output 0, 0, 2, 0, 4, 0, 6, 0.
You can go a step farther, though. Consider this:
int16View[0] = 32;
console.log("Entry 0 in the 32-bit array is now " + int32View[0]);
The output from this is "Entry 0 in the 32-bit array is now 32". In other words, the two arrays are indeed simply views on the same data buffer, treating it as different formats. You can do this with any view types.
Working with complex data structures
By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from WebGL, data files, or C structures you need to use while using js-ctypes.
Consider this C structure:
struct someStruct {
unsigned long id;
char username[16];
float amountDue;
};
You can access a buffer containing data in this format like this:
var buffer = new ArrayBuffer(24);
// ... read the data into the buffer ...
var idView = new Uint32Array(buffer, 0, 1);
var usernameView = new Uint8Array(buffer, 4, 16);
var amountDueView = new Float32Array(buffer, 20, 1);
Then you can access, for example, the amount due with amountDueView[0]
.
Conversion to normal arrays
After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the Array
prototype. This can done using Array.from
, or using the following code where Array.from
is unsupported.
var typedArray = new Uint8Array([1, 2, 3, 4]),
normalArray = Array.prototype.slice.call(typedArray);
normalArray.length === 4;
normalArray.constructor === Array;
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
Typed Array Specification | Veraltet | Abgelöst von ECMAScript 6. |
ECMAScript 2015 (6th Edition, ECMA-262) Die Definition von 'TypedArray Objects' in dieser Spezifikation. |
Standard | Initiale Definition im ECMA-Standard. |
ECMAScript Latest Draft (ECMA-262) Die Definition von 'TypedArray Objects' in dieser Spezifikation. |
Entwurf |
Browser compatibility
Chrome 7 includes support for ArrayBuffer
, Float32Array
, Int16Array
, and Uint8Array
. Chrome 9 and Firefox 15 add support for DataView
objects. Internet Explorer 10 supports all types except Uint8ClampedArray
and ArrayBuffer.prototype.slice
which are present starting in Internet Explorer 11.
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 7.0 | 4.0 (2) | 10 | 11.6 | 5.1 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.0 | (Ja) | 4.0 (2) | 10 | 11.6 | 4.2 |