`ArrayBuffer` in JavaScript

Dieser Artikel erklärt ArrayBuffer in JavaScript.

Wir werden alles über ArrayBuffer erklären, von den Grundlagen bis zur Nutzung, verwandten Typen und praktischen Anwendungen.

YouTube Video

ArrayBuffer in JavaScript

Das ArrayBuffer von JavaScript ist ein Objekt zur Verarbeitung von niedrigstufigen Binärdaten und besonders nützlich für die Manipulation von Binärdaten in WebAPIs, Dateioperationen und Netzwerkkommunikation.

Was ist ArrayBuffer

ArrayBuffer ist eine Datenstruktur zur Verarbeitung von Binärdaten mit fester Länge. Es ermöglicht die Verarbeitung von rohen Binärdaten, die von regulären JavaScript-Arrays oder -Objekten nicht verarbeitet werden können.

ArrayBuffer kann Daten nicht direkt manipulieren. Stattdessen werden Daten über TypedArray oder DataView, die auf einem ArrayBuffer basieren, gelesen und geschrieben.

ArrayBuffer ist besonders nützlich in den folgenden Situationen.

• Bei der Verarbeitung von Binärdaten, die aus dem Netzwerk empfangen wurden
• Wenn eine effiziente Datenfreigabe in Web Worker erforderlich ist.
• Beim Durchführen von Bildverarbeitung oder 3D-Rendering mit Canvas oder WebGL.
• Beim Bearbeiten von Dateien (insbesondere Binärdateien).

Erstellen eines ArrayBuffer

Zuerst beginnen wir damit, wie man eine Instanz von ArrayBuffer erstellt. ArrayBuffer reserviert Speicher in Byte-Einheiten, daher gibt man die Größe bei der Erstellung an.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• In diesem Beispiel wird ein Puffer von 16 Bytes reserviert. Dieser Puffer enthält noch keine Daten.

Datenmanipulation mit TypedArray

Man kann nicht direkt auf ein ArrayBuffer zugreifen, daher verwendet man ein TypedArray, um Daten zu lesen und zu schreiben. TypedArray bietet verschiedene Typen von Ansichten wie Int8Array und Float32Array, die einen effizienten Zugriff auf Binärdaten ermöglichen.

Beispiel mit Int8Array

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42

• Int8Array kann Daten in jedem Byte speichern, wodurch der Puffer 8 Elemente enthalten kann. Auf diese Weise können Sie durch die Verwendung verschiedener Ansichten die Daten effizient manipulieren.

Andere Beispiele für TypedArray

JavaScript bietet verschiedene Typen von TypedArray. Wenn Sie beispielsweise 32-Bit-unsigned-Integer verarbeiten möchten, verwenden Sie Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• Uint32Array kann Daten in 4-Byte-Einheiten speichern, daher kann der Puffer vier Elemente enthalten. Es ist wichtig, das passende TypedArray basierend auf dem Datentyp zu wählen, den Sie verarbeiten.

Flexible Datenmanipulation mit DataView

TypedArray kann nur Daten eines festen Typs verarbeiten, aber mit DataView können Sie Daten beliebiger Typen an beliebiger Stelle schreiben. Dies ist besonders nützlich, wenn Sie mit Puffern arbeiten, die gemischte Datentypen enthalten.

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

Mit DataView können Sie einen Byte-Offset angeben und Daten verschiedener Typen lesen oder schreiben. Dies ist sehr nützlich, wenn komplexe binäre Strukturen wie Netzwerkprotokolle oder Dateiformate verarbeitet werden.

Berücksichtigung der Endian-Reihenfolge

Bei der Verwendung von DataView müssen Sie auch auf die Endian-Reihenfolge (Byte-Reihenfolge) achten. Je nach Computerarchitektur kann die Reihenfolge, in der Daten im Speicher abgelegt werden, unterschiedlich sein. DataView-Methoden bieten Optionen, um die Endian-Reihenfolge anzugeben.

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

Wenn Sie die Endian-Reihenfolge nicht korrekt angeben, könnten Daten in unterschiedlichen Umgebungen falsch interpretiert werden. Daher ist besondere Vorsicht bei der Netzwerkkommunikation oder bei Dateioperationen geboten.

Anwendungen von ArrayBuffer

ArrayBuffer ist ein leistungsstarkes Werkzeug, das häufig in der Webentwicklung und in Browser-APIs verwendet wird. Sehen wir uns einige Anwendungsbeispiele an.

Empfangen und Verarbeiten von Binärdaten

Zum Beispiel können Sie Binärdaten von einem Server mit XMLHttpRequest oder der fetch-API abrufen und als ArrayBuffer verarbeiten.

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });

• In diesem Beispiel werden Bilddaten vom Server abgerufen und als Uint8Array verarbeitet. Auf diese Weise können Sie Daten, die vom Server empfangen werden, mit ArrayBuffer verarbeiten.

Einsatz in WebGL

In WebGL wird ArrayBuffer verwendet, um Binärdaten wie Vertexdaten und Farbdaten effizient zu verarbeiten.

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

• In diesem Beispiel wird Float32Array verwendet, um die Vertex-Koordinaten eines Rechtecks zu definieren und an einen WebGL-Puffer zu senden.

Speicherverwaltung und ArrayBuffer

ArrayBuffer verwaltet Speicher auf Byte-Ebene, was es sehr effizient macht, jedoch muss man auch vorsichtig mit der Speicherverwaltung umgehen. Beim Umgang mit großen Binärdaten ist es wichtig, ungenutzte ArrayBuffer korrekt freizugeben. Auch wenn JavaScript die Speicherbereinigung automatisch durchführt, kann ein weiterhin referenzierter ArrayBuffer Speicherlecks verursachen.

Zusammenfassung

ArrayBuffer bildet die Grundlage für die Verarbeitung von Binärdaten in JavaScript. Durch die Kombination von TypedArray und DataView ist es möglich, Binärdaten effizient und flexibel zu verarbeiten. Sie sind unverzichtbare Werkzeuge in der Webentwicklung, insbesondere in vielen Situationen, die den Umgang mit Binärdaten wie Netzwerkkommunikation und WebGL erfordern. Durch das richtige Verständnis und den angemessenen Einsatz können Sie Leistung und Effizienz verbessern.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video