Ich glaube, dass jeder JavaScript -Lernende verschiedene grundlegende Datentypen von JS verstehen wird. Arrays sind Datenkombinationen. Dies ist ein sehr einfaches und einfaches Konzept. Es hat nicht viel Inhalt und es ist nicht schwierig, es gut zu lernen. Was in diesem Artikel jedoch wichtig ist, ist nicht das Array, das wir normalerweise sehen, sondern der ArrayBuffer.
Viele der Dinge, die ich geschrieben habe, werden absichtlich zusammengefasst, weil sie bestimmte spezifische Funktionen erfüllen möchten. Sie können als Memos angesehen werden, und dasselbe gilt für diesen Artikel! Ich habe das Wissen im Zusammenhang mit Web -Audio -API und Sprachkommunikation vor einiger Zeit untersucht. Der Inhalt konzentriert sich auf den Fluss von Audioströmen zwischen verschiedenen Audiocontext -Knoten. Jetzt muss ich verstehen, welches Datenformat das Audio für den Stream ist, daher ist die Forschung zu ArrayBuffer besonders wichtig.
Array -Stack -Modell im Speicher
Arrays Akquisition
So generieren Sie ein Array in JavaScript:
Die Codekopie lautet wie folgt:
[Element0, Element1, ..., Elementn]
Neuarray (Element0, Element1, ..., Elementn)
Neuarray (ArrayLength)
Definieren Sie es direkt oder erstellen Sie ein Array durch den Konstruktor. Natürlich können Sie auch andere Mittel verwenden:
Die Codekopie lautet wie folgt:
"Array" .Split ("");
"Array" .Match (/a | r/g);
Warten Sie, es gibt viele Möglichkeiten. Aber ich fürchte, viele Menschen sind nicht sehr klar darüber, in welcher Art von Struktur sich das Array befindet.
Stapelmodell
Im Array können wir viele Daten unterschiedlicher Datentypen einstellen, wie z. B.:
Die Codekopie lautet wie folgt:
var arr = [21, "li jing", New Date (), function () {}, null];
Das obige Array enthält Zahlen, Zeichenfolgen, Objekte, Funktionen, undefinierte und null gleichzeitig. Wir können die obige Datenschnittstelle konkret beschreiben:
Die Codekopie lautet wie folgt:
Stapel
+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| 21 | +-------------------------+
+ ----------+ | |
| "Li Jing" | | |
+ ----------+ | + ----------+ |
| [Siehe] | -----------> | Objekt | |
+ ----------+ | + ----------+ |
| [Siehe] | ------------------>+ ---------+ |
+ ----------+ | | Funktion | |
| undefiniert | | + ----------+ |
+ ----------+ | |
| NULL | +--------------------------+
+ -----------+ Erstellt von Barret Lee
JavaScript -Datentypen sind in zwei Typen unterteilt, einer ist der Werttyp und der andere ist der Referenztyp. Gemeinsame Referenztypen umfassen Objekt und Array. Im Speichermodell des Arrays werden die Daten direkt in den Stapel gedrückt, während der Referenztyp nur in einen Index des Wertes gedrückt wird. Das Konzept der C -Sprache besteht darin, nur den Zeiger der Daten zu speichern, und diese Daten werden in einem bestimmten Block des Haufens gespeichert. Der Stapel ist nicht unabhängig und der Stapel kann auch im Stapel gespeichert werden.
Okay, das ist alles für die Erklärung von Array. Sprechen wir im Detail über die relevanten Kenntnisse von ArrayBuffer.
ArrayBuffer
Was ist das Web? Was ist das grundlegendste Problem, über das das Web diskutiert wird? Ich denke, es gibt zwei Punkte: Einer ist Daten und der andere ist die Datenübertragung. Die Anzeige von Daten ist kompliziert und dies sollte etwas auf der oberen Ebene des Webs sein. Der in diesem Artikel erörterte ArrayBuffer ist der grundlegendste Datentyp und kann nicht einmal als Datentyp bezeichnet werden. Es ist leicht zu lesen und auf andere Weise zu schreiben.
Definition von offiziellen Punkten:
Der ArrayBuffer ist ein Datentyp, der verwendet wird, um einen generischen Binärdatenpuffer mit fester Länge darzustellen. Sie können den Inhalt eines ArrayBuffer nicht direkt manipulieren. Stattdessen erstellen Sie ein ArraybufferView -Objekt, das den Puffer in einem bestimmten Format darstellt, und verwenden diese, um den Inhalt des Puffers zu lesen und zu schreiben.
Der ursprüngliche Puffer, der Binärdaten darstellt, die zum Speichern von Daten verschiedener Arten von Arrays verwendet werden. Der ArrayBuffer kann nicht direkt gelesen oder geschrieben werden, kann jedoch nach Bedarf an ein typisiertes Array- oder Dataview -Objekt übergeben werden, um den Originalpuffer zu interpretieren.
Es ist ein roher Puffer von Binärdaten. Obwohl JavaScript eine schwache Sprache ist, hat es selbst Einschränkungen für den Typ und die Größe der Daten. Wir müssen den Inhalt des Puffers ordentlich durch eine bestimmte Datenstruktur lesen (schreiben).
Erstellung von Originalpuffer
Der ArrayBuffer -Konstruktor kann einen Rohpuffer erstellen:
Die Codekopie lautet wie folgt:
var buffer = new ArrayBuffer (30);
Aus der Chromkonsole können Sie sehen:
Die Pufferinstanz hat ein ByoneLength -Attribut, mit dem die Puffergröße, eine Slice -Methode, nur von IE11+ und iOS6+ unterstützt wird, mit der die Pufferlänge abgefangen wird.
Die Codekopie lautet wie folgt:
ArrayBuffer Slice (
nicht signierter Beginn
nicht signiertes langes Ende optional
);
Sie können diese Demo testen:
Die Codekopie lautet wie folgt:
var buffer = new ArrayBuffer (12);
var x = new int32Array (puffer);
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]);
Datenbasierte Arrays
Typed Array -Typen stellen verschiedene Ansichten von indexierbaren und manipulierten Arraybuffer -Objekten dar. Alle Array -Typen haben feste Längen.
Die Codekopie lautet wie folgt:
Namensgröße (in Bytes) Beschreibung
Int8Array 1 8-Bit Two's Complement Signed Ganzzahl
Uint8Array 1 8-Bit-nicht signierte Ganzzahl
Int16Array 2 16-Bit Two's Complement Signed Ganzzahl
Uint16Array 2 16-Bit Unsigned Ganzzahl
INT32Array 4 32-Bit Two's Complement Signed Integer
Uint32Array 4 32-Bit Unsigned Ganzzahl
Float32Array 4 32-Bit IEEE Floating Point Number
Float64Array 8 64-Bit IEEE Floating Point Number
Int ist eine Ganzzahl, Uint ist ein nicht signierter Kunststoff, und Float ist ein schwimmender Punkttyp. Dies sind die grundlegenden Konzepte in der C -Sprache, daher werde ich sie nicht im Detail erklären. Da diese angesehenen Strukturen ähnlich sind, erklärt dieser Artikel nur den Float32Array -Typ und die Leser können einzeln daraus lernen.
Float32Array ist Array sehr ähnlich, außer dass jedes Element ein 32-Bit-(-4-Byte-) Gleitkomma-Daten ist. Float32Array Einmal erstellt, kann seine Größe nicht geändert werden.
Wir können direkt einen Float32Array erstellen:
Die Codekopie 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
Es muss ein Konzept bestehen, dass es sich immer noch um ein Array handelt, aber jedes Element im Array ist ein 32-Bit-Datentyp, zum Beispiel:
Die Codekopie 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 X, dem Float32Array-Objekt, zu, und wird dann vor dem Speicher in eine 32-Bit-Schwimmpunktzahl konvertiert.
Da jedes Element dieses Klassenarrays im Stapelmodell vom gleichen Typ ist, werden sie alle in den Stapel gedrückt. Daher ist das detaillierte Array ein Werttyp und es ist kein Referenztyp! Dies sollte zur Kenntnis genommen werden und kann auch in den folgenden Beispielen reflektiert werden:
Die Codekopie 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 hat sich der Wert von y nicht geändert
Kopieren Sie den Wert von x nach y, ändern Sie x [0], y [0] und es gibt keine Änderung.
Zusätzlich zur obigen Methode können wir auf andere Weise ein detailliertes Array erstellen:
Die Codekopie lautet wie folgt:
var buffer = new ArrayBuffer (12);
var x = new Float32Array (Puffer, 0, 2);
var y = new Float32Array (Puffer, 4, 1);
x [1] = 7;
console.log (y [0]); // 7
Erklären Sie, warum 7 hierher zurückgegeben wird.
Die Codekopie 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 der obigen Illustration noch Fragen? Ich glaube nicht, dass ich weiterhin erklären muss. Die Einheit von ArrayBuffer kann als 1 angesehen werden, während die Einheit von Float32Array 4 ist.
Dataview -Objekt
Das Dataview -Objekt betreibt Daten akribärer, aber ich finde es nicht interessant. Die verschiedenen oben genannten datenbasierten Arrays können die Anwendung grundsätzlich erfüllen. Ich erwähne sie hier einfach ein einfaches Beispiel:
Die Codekopie 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 für detaillierte Informationen zu http://www.javascripture.com/dataview übergehen.
ArrayBuffer in xhr2
ArrayBuffer ist besonders weit verbreitet. Egal, ob es sich um WebSocket, Webaudio, AJAX usw. handelt, solange der Front-End-Prozess Big Data oder die Leistung der Datenverarbeitung verbessern möchte, muss ArrayBuffer unverzichtbar sein.
Xhr2 ist nicht neu. Möglicherweise haben Sie relevante Funktionen verwendet, aber Sie wissen nicht, dass dies das ist, was XHR2 ist. Das Wichtigste ist der XHR.responSetype, mit dem das Datenformat der Antwort festgelegt wird. Die optionalen Parameter sind: "Text", "ArrayBuffer", "Blob" oder "Dokument". Beachten Sie, dass die Einstellung (oder das Ignorieren) xhr.responsetype = '' standardmäßig die Antwort auf "Text" festlegt. Es gibt eine entsprechende Beziehung wie diese:
Die Codekopie lautet wie folgt:
Antwort Antwort
Textdomstring
ArrayBuffer ArrayBuffer
Blob Blob
Dokumentdokument
Nehmen Sie eine Kastanie:
Die Codekopie lautet wie folgt:
var xhr = new xmlhttprequest ();
xhr.open ('get', '/path/to/image.png', true);
xhr.responsetype = 'arrayBuffer';
xhr.onload = Funktion (e) {
// this.response == uint8array.buffer
var uint8array = new Uint8Array (this.Response);
};
xhr.send ();
Wir setzen die Eigenschaft auf ArrayBuffer in xhr.responsetype, sodass wir ein datenbasiertes Array verwenden können, um die von uns erhaltenen Daten zu akzeptieren!
Zusammenfassung
In diesem Artikel wird hauptsächlich vorgestellt, wie Array im Stapelmodell gespeichert wird, und beschreibt auch im Detail den binären Datentyp des ArrayBuffer, den Originalpuffer. In der Webentwicklung sind Daten und Datenspeicher ein wichtiger Bestandteil. Ich hoffe, Aufmerksamkeit zu erregen!
In der Erzählung dieses Artikels kann es Fehler geben. Bitte korrigieren Sie sie mehr!