Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

JavaScript typed arrays

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

 
Typed Arrays in JavaScript sind Array-ähnliche Objekte, die den Zugriff auf Binäre Rohdaten ermöglichen. 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 Typed Arrays im JavaScript-Code zu manipulieren.
 
Typed Arrays sollten nicht mit den normalen Arrays verwechselt werden. Ein Aufruf von Array.isArray() liefert false zurück. Außerdem werden nicht alle Array-Methoden wie beispielsweise push und pop unterstützt.
 

Buffers and views: typed array architecture

Um maximal Flexibilität und Effizienz zu schaffen, spalten JavaScript Typed-Arrays  die Durchführung zwischen Buffers und Views. Ein Buffer (vom ArrayBuffer Objekt durchgeführt) ist ein Objekt, das eine Menge Daten verkörpert. Dazu gehört kein echtes Format, und keine Mechanismus wird angeboten, auf den Inhalt zuzugreifen. Um Zugang zu diesem Speicher zu schaffen, muss man ein "View" benutzen. Ein View liefert einen Kontext, der diese Daten ein echtes, typisiertes Array umwandelt. Genauer gesagt, gibt dieses Kontext ein Typ, Addressabstand und die Anzahl der Elemente an.

Typed arrays in an ArrayBuffer

ArrayBuffer

 

Der ArrayBuffer ist ein Datentyp, der einen generischen, binärischen Datenpuffer mit festgelegte Länge darstellt. Es ist nicht möglich, der Inhalt dieses Puffers (ArrayBuffer) direkt zu bearbeiten, sondern bringt man einen DataView hervor. Dadurch wird den Puffer als ein spezifisches Format dargestellt, das benutzt wird, um den Inhalt des Puffers zu modifizieren und lesen.

Typed array views

"Typed Array Views" haben selbst beschreibende Namen, und bieten Views für alle die alltägliche Typen, wie Int8Uint32Float64 und so weiter. Es gibt auch einen spezialen Typed Array View: Uint8ClampedArray. Der begrenzt die Werte zwischen 0 und 255, was nützlich (als Beispiel) fur Canvas data processing ist.

Type Size in bytes Description Web IDL type Equivalent C type
Int8Array 1 8-bit two's complement signed integer byte int8_t
Uint8Array 1 8-bit unsigned integer octet uint8_t
Uint8ClampedArray 1 8-bit unsigned integer (clamped) octet uint8_t
Int16Array 2 16-bit two's complement signed integer short int16_t
Uint16Array 2 16-bit unsigned integer unsigned short uint16_t
Int32Array 4 32-bit two's complement signed integer long int32_t
Uint32Array 4 32-bit unsigned integer unsigned long uint32_t
Float32Array 4 32-bit IEEE floating point number unrestricted float float
Float64Array 8 64-bit IEEE floating point number unrestricted double double

DataView

Der DataView ist ein low-level Interface, das Getter und Setter zum Lesen und Schreiben beliebiger Daten in den Buffer anbietet. Das ist zum Beispiel nützlich, wenn man mit verschiedenen Datentypen arbeiten muss. "Typed Array Views" 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 Typed Arrays

FileReader.prototype.readAsArrayBuffer()
Die FileReader.prototype.readAsArrayBuffer() Methode liest den Inhalt aus einem gegebenen Blob oder einer Datei.
XMLHttpRequest.prototype.send()
Die send() Methode einer XMLHttpRequest-Instanz unterstützt nun Typed Arrays und ArrayBuffer 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

Views als Buffer benutzen

Als erstes muss ein Buffer erstellt werden, hier mit einer festgelegten Läneg von 16 Bytes:

var buffer = new ArrayBuffer(16);

Jetzt haben wir einen Block des Speichers mit Bytes, die mit 0 vor-initialisiert sind. Darüber hinaus lässt sich nicht viel damit anstellen. Wir können überprüfen, ob er wirklich 16 Bytes lange 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 einen View erzeugen. Wir erstellen einen View, der die Daten in dem Buffer als ein Array von vorzeichenlosen 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 à 4 Bytes sind 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].

Note: The data structure alignment in a C structure is platform-dependent. Take precautions and considerations for these padding differences.

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 2017 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

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: Adowrath, schlagi123, sspringer82, fscholz, rogerraetzel
 Zuletzt aktualisiert von: Adowrath,