Detaillierte Einführung in ArrayBuffer in JavaScript_Javascript-Kenntnissen

Ich glaube, dass jeder Javascript-Lernende die verschiedenen grundlegenden Datentypen von JS verstehen wird. Dies ist ein sehr einfaches und einfaches Konzept, das nicht schwer zu erlernen ist Es ist gut. In diesem Artikel geht es jedoch nicht um das Array, das wir normalerweise sehen, sondern um ArrayBuffer.

Viele der Dinge, die ich schreibe, sind bewusst zusammengefasst, weil ich bestimmte spezifische Funktionen ausführen möchte. Sie können als Memos betrachtet werden, und das Gleiche gilt für diesen Artikel! Vor einiger Zeit habe ich mich mit der Web-Audio-API und dem Wissen über Sprachkommunikation beschäftigt. Der Inhalt konzentriert sich auf den Fluss von Audio-Streams zwischen den verschiedenen Knoten von AudioContext. Jetzt muss ich herausfinden, in welchem ​​Datenformat das Audio vorliegt Am Ende des Streams ist für mich ein tiefes Verständnis der ArrayBuffer-Forschung äußerst wichtig.

Array-Stack-Modell im Speicher

Array abrufen

So generieren Sie ein Array in Javascript:

Code kopieren Der Code lautet wie folgt:

[element0, element1, ..., elementN]
neues Array(element0, element1, ..., elementN)
neues Array(arrayLength)

Definieren Sie es direkt oder erstellen Sie ein Array über den Konstruktor. Natürlich können Sie auch andere Methoden verwenden:

Code kopieren Der Code lautet wie folgt:

"array".split("");
"array".match(/a|r/g);

Warten Sie, es gibt viele Möglichkeiten. Aber was die interne Struktur von Array ist, fürchte ich, dass vielen Menschen noch nicht ganz klar ist.

Stapelmodell

Wir können viele verschiedene Datentypen in das Array einfügen, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var arr = [21, "李京", new Date(), function(){}, , null];

Das obige Array enthält Zahlen, Zeichenfolgen, Objekte, Funktionen, undefiniert und null. Wir können die obige Datenschnittstelle konkret beschreiben:

Code kopieren Der Code lautet wie folgt:

Stapel
--------- Haufen
|. 21 |. --------------------
---------                                                                        |. „Li Jing“ | ---------                                                                                                                                                         |. [siehe] |--------->| ---------                                                                                                                                                         |. [siehe] |-----------------> -------- |
--------- |. |Funktion| |
|undefiniert|. |. |
---------                                                                        |. null |. ----
--------- Erstellt von Barret Lee

JavaScript-Datentypen sind in zwei Typen unterteilt, einen Werttyp und einen Referenztyp. Im Array-Speichermodell handelt es sich um einen Werttyp wie „Number“ und „String“. wird direkt auf den Stapel geschoben, während der Referenztyp nur einen Index auf den Wert schiebt. Um es in Bezug auf die C-Sprache zu erklären, wird nur der Zeiger auf die Daten gespeichert. Die Daten werden in einem bestimmten Bereich im Heap gespeichert . . Der Stapel ist nicht unabhängig und kann auch im Heap gespeichert werden.

Okay, das war's mit der Beschreibung von Array. Lassen Sie uns ausführlich über das damit verbundene Wissen von ArrayBuffer sprechen.

ArrayBuffer

Was ist das Web? Was sind die grundlegendsten Themen, die im Web diskutiert werden? Ich denke, es gibt zwei Punkte: Der eine ist Daten und der andere ist die Datenübertragung. Dies sollte etwas auf der oberen Ebene des Webs sein. Der in diesem Artikel besprochene ArrayBuffer ist der grundlegendste Datentyp. Er kann nicht einmal als Datentyp bezeichnet werden, sondern ist ein Datenelement, das mit anderen Methoden gelesen und geschrieben werden muss.

Offizielle Punktdefinition:

Der ArrayBuffer ist ein Datentyp, der zur Darstellung eines generischen Binärdatenpuffers mit fester Länge verwendet wird. Sie können den Inhalt eines ArrayBuffer nicht direkt bearbeiten, sondern ein ArrayBufferView-Objekt erstellen, das den Puffer in einem bestimmten Bereich darstellt formatieren und damit den Inhalt des Puffers lesen und schreiben.
Stellt einen Rohpuffer mit Binärdaten dar, der zum Speichern von Daten für verschiedene typisierte Arrays verwendet wird. ArrayBuffer kann nicht direkt gelesen oder geschrieben werden, aber der Rohpuffer kann nach Bedarf interpretiert werden, indem er an ein typisiertes Array oder DataView-Objekt übergeben wird.

Es handelt sich um einen Rohpuffer für Binärdaten. Obwohl es sich bei JavaScript um eine schwach typisierte Sprache handelt, müssen wir den Inhalt des Puffers durch eine Art Datenstruktur ordnen (schreiben).

Erstellung von Rohpuffer

Ein Rohpuffer kann über den ArrayBuffer-Konstruktor erstellt werden:

Code kopieren Der Code lautet wie folgt:

var buffer = new ArrayBuffer(30);

Sie können auf der Chrome-Konsole sehen:

Die Pufferinstanz verfügt über ein ByteLength-Attribut, mit dem die Größe des Puffers ermittelt wird, und eine Slice-Methode, die nur von IE11 und ios6 unterstützt wird und zum Abfangen der Pufferlänge verwendet wird.

Code kopieren Der Code lautet wie folgt:

ArrayBuffer-Slice(
unsignierter langer Anfang
unsigniertes langes Ende Optional
);

Sie können diese DEMO testen:

Code kopieren Der Code lautet wie folgt:

var buffer = new ArrayBuffer(12);
var x = new Int32Array(buffer);
x[1] = 1234;
var Slice = buffer.slice(4);
var y = new Int32Array(slice);
console.log(x[1]);
console.log(y[0]);
x[1] = 6789;
console.log(x[1]);
console.log(y[0]);

Datenarray

Typisierte Array-Typen stellen verschiedene Ansichten von ArrayBuffer-Objekten dar, die indiziert und manipuliert werden können. Alle Array-Typen haben eine feste Länge.

Code kopieren Der Code lautet wie folgt:

Name Größe (in Bytes) Beschreibung
Int8Array 1 8-Bit-Zweierkomplement-Ganzzahl mit Vorzeichen
Uint8Array 1 8-Bit-Ganzzahl ohne Vorzeichen
Int16Array 2 16-Bit-Zweierkomplement-Ganzzahl mit Vorzeichen
Uint16Array 2 16-Bit-Ganzzahl ohne Vorzeichen
Int32Array 4 32-Bit-Zweierkomplement-Ganzzahl mit Vorzeichen
Uint32Array 4 32-Bit-Ganzzahl ohne Vorzeichen
Float32Array 4 32-Bit-IEEE-Gleitkommazahl
Float64Array 8 64-Bit-IEEE-Gleitkommazahl

Int ist ein Ganzzahltyp, Uint ist eine vorzeichenlose Ganzzahl und Float ist ein Gleitkommatyp. Dies sind grundlegende Konzepte in der C-Sprache, und ich werde sie nicht im Detail erklären. Da diese Visualisierungsstrukturen alle ähnlich sind, wird in diesem Artikel nur der Typ Float32Array erläutert, und der Leser kann aus einem Beispiel Rückschlüsse ziehen.

Float32Array ist Array sehr ähnlich, mit der Ausnahme, dass es sich bei jedem Element um 32-Bit-Gleitkommadaten (4 Byte) handelt. Sobald ein Float32Array erstellt wurde, kann seine Größe nicht mehr geändert werden.

Wir können direkt ein Float32Array erstellen:

Code kopieren Der Code lautet wie folgt:

var x = new Float32Array(2);
x[0] = 17;
console.log(x[0]); // 17
console.log(x[1]); // 0
console.log(x.length); // 2

Sie benötigen ein solches Konzept. Es ist immer noch ein Array, aber jedes Element im Array ist ein Float-32-Bit-Datentyp:

Code kopieren Der Code lautet wie folgt:

var x = new Float32Array([17, -45.3]);
console.log(x[0]); // 17
console.log(x[1]); // -45.29999923706055
console.log(x.length); // 2

Wir weisen den Wert eines Arrays direkt dem Float32Array-Objekt x zu und konvertieren ihn dann in eine 32-Bit-Gleitkommazahl, bevor wir ihn speichern.

Da jedes Element dieses Array-Typs vom gleichen Typ ist, werden sie im Stapelmodell alle auf den Stapel verschoben. Daher ist das Datenarray ein Werttyp und kein Referenztyp! Das soll Aufmerksamkeit erregen und lässt sich auch an den folgenden Beispielen widerspiegeln:

Code kopieren Der Code lautet wie folgt:

var x = new Float32Array([17, -45.3]);
var y = new Float32Array(x);
console.log(x[0]); // 17
console.log(x[1]); //-45.29999923706055
console.log(x.length); // 2
x[0] = -2;
console.log(y[0]); // 17, der Wert von y hat sich nicht geändert

Kopieren Sie den Wert von x nach y, ändern Sie x[0], y[0] hat keine Änderung.

Zusätzlich zur oben genannten Methode können wir ein Datenarray auch auf andere Weise erstellen:

Code kopieren Der Code lautet wie folgt:

var buffer = new ArrayBuffer(12);
var x = new Float32Array(buffer, 0, 2);
var y = new Float32Array(buffer, 4, 1);
x[1] = 7;
console.log(y[0]); // 7

Erklären Sie, warum dies 7 zurückgibt.

Code kopieren Der Code lautet wie folgt:

ArrayBuffer(12)
- - - - - - - - - - - - -
|0|1|2|3|4|5|6|7|8| - - - - - - - - - - - - -
                                                                                       x (Float32Array)
Offset: 0
byteLength:4
Länge:2

       ArrayBuffer (12)

- - - - - - - - - - - - -
|0|1|2|3|4|5|6|7|8| - - - - - - - - - - - - -
                                                                                                   y

Erstellt von Barret Lee

Haben Sie nach dem Lesen des obigen Diagramms noch Fragen? Ich glaube nicht, dass ich es noch mehr erklären muss. Sie können sich die Einheit von ArrayBuffer als 1 vorstellen, während die Einheit von Float32Array 4 ist.

DataView-Objekt

Das DataView-Objekt verarbeitet Daten detaillierter, aber ich denke nicht, dass es interessant ist. Die oben genannten verschiedenen digitalisierten Arrays können grundsätzlich die Anwendungsanforderungen erfüllen, daher werde ich es hier nur kurz anhand eines einfachen Beispiels erwähnen:

Code kopieren

Der Code lautet wie folgt: var buffer = new ArrayBuffer(12); var x = new DataView(buffer, 0);

x.setInt8(0, 22);

x.setFloat32(1, Math.PI);
console.log(x.getInt8(0)); // 22
console.log(x.getFloat32(1)); // 3.1415927410125732

Wenn Sie interessiert sind, können Sie zu http://www.javascripture.com/DataView gehen, um mehr zu erfahren.

ArrayBuffer in XHR2

ArrayBuffer wird besonders häufig verwendet, egal ob WebSocket, WebAudio, Ajax usw. Solange das Front-End große Datenmengen verarbeitet oder die Datenverarbeitungsleistung verbessern möchte, muss ArrayBuffer unverzichtbar sein.

XHR2 ist nichts Neues. Vielleicht haben Sie verwandte Funktionen verwendet, wussten aber nicht, dass dies der Inhalt von XHR2 ist. Das Wichtigste ist xhr.responseType. Seine Funktion besteht darin, das Datenformat der Antwort festzulegen. Die optionalen Parameter sind: „text“, „arraybuffer“, „blob“ oder „document“. Beachten Sie, dass durch das Setzen (oder Weglassen) von xhr.responseType = '' die Antwort standardmäßig auf „text“ lautet. Hier gibt es eine solche Korrespondenz:

Code kopieren Der Code lautet wie folgt:

Antwort anfordern
text DOMString
arraybuffer ArrayBuffer
Blob Blob
Dokument Dokument

Geben Sie mir ein Beispiel:

Code kopieren Der Code lautet wie folgt:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
// this.response == uInt8Array.buffer
var uInt8Array = new Uint8Array(this.response); };

xhr.send();

Wir setzen das Attribut in xhr.responseType auf arraybuffer, damit wir das Datenarray verwenden können, um die Daten zu akzeptieren, die wir erhalten!

Zusammenfassung

Dieser Artikel stellt hauptsächlich die Speichermethode von Array im Stapelmodell vor und beschreibt auch ausführlich den binären Datentyp des ursprünglichen Puffers ArrayBuffer. In der Webentwicklung sind Daten und Datenspeicherung ein wichtiger Teil Aufmerksamkeit!

Die Beschreibung dieses Artikels kann Fehler enthalten, bitte korrigieren Sie mich!