Ausführliche Erklärung verschiedener binärer Objektbeziehungen in JavaScript

Vorwort

Modernes JavaScript muss sich komplexeren Szenarien stellen und es gibt mehr Arten der Datenübertragung, einschließlich binärer Übertragung. Um die Datenverarbeitung zu erleichtern und die Effizienz zu verbessern, wurde das ArrayBuffer-Objekt erstellt.

Bei der Verwendung werden Sie jedoch feststellen, dass es nicht nur ArrayBuffer gibt, sondern auch eine Reihe von Objekten wie TypedArray, DataView, Blob, FileReader usw., was die Leute hinsichtlich der Beziehung zwischen ihnen verwirren kann. Warum gibt es so viele Objekte? Mit diesen Fragen im Hinterkopf habe ich nach Informationen gesucht und versucht, die Zusammenhänge zu klären.

Beziehungen zwischen verschiedenen Objekten

ArrayBuffer

ArrayBuffer ist das grundlegendste Binärobjekt in JavaScript, das einen kontinuierlichen Speicherplatz in Bytes beschreibt.

const Puffer = neuer ArrayBuffer(32);

Auf diese Weise haben wir einen 32-Byte-Speicherbereich erstellt und können mit buffer.byteLength seine Länge überprüfen.

ArrayBuffer-Objekte können nur sehr wenig und sind nicht editierbar. Wenn Sie Daten bearbeiten müssen, müssen Sie zwei andere Objekte verwenden, TypedArray und

Datenansicht.

Typisiertes Array

TypedArray ist ein typisiertes Array. TypedArray selbst speichert keine Daten, sondern wird speziell zum Anzeigen von ArrayBuffer-Daten verwendet. Aus diesem Grund heißt es TypedArray. Es ist nicht der Name eines bestimmten Konstruktors, sondern ein allgemeiner Name für eine Gruppe von Konstruktoren.

• Int8Array: 1-Bit, 8-Bit vorzeichenbehaftete Ganzzahl
• Uint8Array: 1 Bit, 8-Bit-Ganzzahl ohne Vorzeichen
• Uint8ClampedArray: 1 Bit, 8-Bit vorzeichenlose Ganzzahl
• Int16Array: 2 Bit, 16-Bit-Ganzzahl ohne Vorzeichen
• Uint16Array: 2 Bit, 16-Bit vorzeichenloser Integer
• Int32Array: 4-Bit, 32-Bit vorzeichenlose Ganzzahl
• Uint32Array: 4-Bit, 32-Bit vorzeichenlose Ganzzahl
• Float32Array: 4 Bit, 32-Bit-Gleitkommazahl, nicht IEEE-konform
• Float64Array: 8-Bit, 64-Bit IEEE-Gleitkomma
• BigInt64Array: 8-Bit, 64-Bit binäre Ganzzahl mit Vorzeichen
• BigUint64Array: 8-Bit, 64-Bit vorzeichenlose Ganzzahl

Beim Erstellen können Sie Länge, typedArray, ArrayBuffer und Array übergeben. Natürlich können Sie nichts übergeben.

const uint1 = neues Uint8Array(8);
const uint2 = neues Uint16Array(neues Uint8Array(8));
const uint3 = neues Uint8Array(neuer ArrayBuffer(8));
const uint4 = neues Uint8Array([1, 2, 3]);
const uint5 = neues Uint8Array();

Im obigen typedArray wird, mit Ausnahme des bei der Erstellung übergebenen ArrayBuffer, während des neuen Prozesses ein neuer ArrayBuffer auf der untersten Ebene erstellt. Sie können arr.buffer verwenden, um auf den ArrayBuffer zuzugreifen, auf den es verweist.

Alle Operationen auf gewöhnlichen Arrays können in TypedArray verwendet werden. Da ArrayBuffer aber einen kontinuierlichen Speicherbereich beschreibt, können wir einen Wert nicht löschen, sondern nur 0 zuweisen. Es gibt keine Möglichkeit, die Concat-Methode zu verwenden.

Uint8ClampedArray

Uint8ClampedArray ist etwas Spezielles und behandelt positive und negative Überläufe unterschiedlich.

Bei anderen Daten außerhalb der Grenzen wird nur der Abschnitt ganz rechts (niedrigstes Bit) beibehalten und die Überlaufdaten werden verworfen. Uint8ClampedArray speichert Daten außerhalb der Grenzen jedoch als 255 und negative Zahlen als 0.

Konvertierung zwischen Zeichen

TypedArray übergibt Zeichenfolgen nicht direkt, daher müssen sie zuerst transkodiert werden.

Zeichenfolge → Unit8Array

 const string = "Hallo";
Uint8Array.from(string.split(""), (e) => e.charCodeAt(0));

Unit8Array → Zeichenfolge

 // TextDecoder-Objekt verwenden const u8 = Uint8Array.of(72, 101, 108, 108, 111);
neuer TextDecoder().decode(u8);
// Konvertieren mit fromCharCode const u8 = Uint8Array.of(72, 101, 108, 108, 111);
Array.from(u8, (e) => String.fromCharCode(e)).join("");

Datenansicht

Mit Ausnahme der uint2-Variable sind alle oben genannten Daten von einem einzigen Datentyp. Das uint2-Objekt speichert zwei Datentypen in einem Speicherabschnitt, der als zusammengesetzte Ansicht bezeichnet wird. Die Datentypen in JavaScript sind oft nicht so einfach und es wäre problematischer, nur mit TypedArray zu arbeiten, daher gibt es ein DataView-Objekt. DataView hat mehr Operationsmethoden als TypedArray.

const Puffer = neuer ArrayBuffer(8);
const dataView = neue DataView(Puffer);

Bietet die Methoden getInt8, getUint8, getInt16, getUint16, getInt32, getUint32, getFloat32, getFloat64.

Es gibt zwei Parameter, der erste ist die Abschnittsposition und der zweite ist die Byte-Reihenfolge, die nicht erforderlich ist. Der Rückgabewert sind die Byte-Daten an der entsprechenden Position.

const d1 = dataView.getUint8(1);
const d2 = dataView.getUint8(1, true);

Die Byteposition ist leicht zu verstehen. Die Bytereihenfolge kann unter „Bytereihenfolge verstehen“ nachgelesen werden. Im Allgemeinen lautet sie:

• Big Endian: Das höchstwertige Byte kommt zuerst, das niedrigstwertige Byte zuletzt. So lesen und schreiben Menschen Zahlen.
• Little Endian: Das niederwertigste Byte kommt zuerst und das höchstwertige Byte kommt zuletzt, d. h. es wird in der Form 0x1122 gespeichert.

Standardmäßig wird die Big-Endian-Bytereihenfolge verwendet. Wenn Sie die Little-Endian-Bytereihenfolge verwenden möchten, müssen Sie „true“ übergeben.

Auf diese Weise verfügen wir über eine grundlegende Lösung zum Lesen und Schreiben von Binärdateien. Tatsächliche Anwendungsszenarien beinhalten jedoch häufig komplexere Daten, sodass Objekte wie Blob und FileReader für bestimmte Szenarien abgeleitet werden.

Klecks

Blob ist die Abkürzung für Binary Large Object.

Der Unterschied zwischen ArrayBuffer und Blob besteht darin, dass ArrayBuffer reine Binärdaten sind, während Blob Binärdaten mit MIME-Typ sind. Und es ist einfach, Blob-Objekte aus String, ArrayBuffer, TypedArray, DataView und Blob zu generieren.

const blob1 = new Blob(["hallo"], { type: "text/plain" });
const blob2 = neuer Blob([neuer Uint8Array([72, 101, 108, 108, 111]), " ", "Welt"], { Typ: "Text/Plain" });

Eigentum:

• Größe: Die Größe des zu lesenden Objekts in Bytes.
• Typ: MIME-Typ zum Lesen und Schreiben

Verfahren:

• Slice: Extrahiert ein Blob-Segment.

URL

Während der Entwicklung erhalten wir Binärdaten des Bildes, die wir in Base64 konvertieren und in src schreiben können. Wenn die Datenmenge jedoch groß ist oder es sich um Videodaten handelt, überschreiten sie die zulässige Länge. Wir können URL.createObjectURL verwenden, um einfach eine Ressourcen-URL zu erstellen.

const url = URL.createObjectURL(blob1);

Es wird eine Ressourcen-URL ähnlich wie blob:https://example.com/a6728d20-2e78-4497-9d6c-0ed61b93f11e generiert, die zur Verwendung direkt in src geschrieben werden kann.

Verwenden Sie URL.revokeObjectURL(url), um die Referenz zu zerstören und den Speicherverbrauch freizugeben, wenn dieser nicht verwendet wird.

Daten lesen

Wenn wir die Daten anzeigen möchten, gibt es zwei Möglichkeiten.

Die erste Methode verwendet das Response-Objekt, um String-Daten oder ArrayBuffer-Daten direkt zu lesen.

const responseText = warte auf neue Antwort (blob2).text();
const responseBuf = warte auf neue Antwort (blob2).arrayBuffer();

Die zweite Methode verwendet das FileReader-Objekt.

Konstante Leser = neuer FileReader();
reader.onload = Funktion (e) {
    Konsole.log(Leser.Ergebnis);
};
Leser.readAsText(blob2);

Datei

Die Datei erbt von Blob und fügt dateibezogene Attributinformationen hinzu.

• Name: Dateiname
• lastModified: Der Zeitstempel der letzten Änderungszeit
• lastModifiedDate: Datumsobjekt mit der letzten Änderungszeit
• webkitRelativePath: Der Pfad zur Datei. Diese Eigenschaft wird festgelegt, wenn in der Eingabe ein Verzeichnis ausgewählt wird. Dies ist keine Standardfunktion.

Dateiliste

Das FileList-Objekt ist eine Sammlung von File-Objekten. Erscheint normalerweise in:

• <input type="file">-Steuerelement, wobei das Dateiattribut eine Dateiliste ist
• Das im Drag-Ereignis generierte DataTransfer-Objekt, wobei die Dateieigenschaft eine FileList ist

Eigentum:

• Länge: Sie können die Anzahl der Dateien in der aktuellen Dateiliste abrufen.

Verfahren:

• item(index): kann verwendet werden, um die Dateidaten an der angegebenen Indexposition abzurufen. Im Allgemeinen wird stattdessen direkt FileList[index] verwendet.

Dateileser

FileReader wurde im Abschnitt Blob erwähnt. Tatsächlich wird das FileReader-Objekt speziell zum Lesen von Blob-Objekten, einschließlich erweiterter Dateiobjekte, verwendet.

Eigentum:

• Ergebnis: Der Inhalt der Datei.
• readyState: Status. 0: Nicht geladen; 1: Wird geladen; 2: Laden abgeschlossen.
• error: Fehlermeldung beim Laden der Daten.

Ereignis:

• onload: Wird nach erfolgreichem Laden ausgelöst.
• onerror: Wird ausgelöst, wenn ein Ladefehler auftritt.
• onabort: Wird ausgelöst, wenn der Ladevorgang unterbrochen wird.
• onloadend: Wird ausgelöst, nachdem der Ladevorgang abgeschlossen ist.
• onloadstart: Wird ausgelöst, wenn der Ladevorgang beginnt.
• onprogress: Wird während des Ladens ausgelöst.

Verfahren:

• readAsText(blob, "utf-8"): Gibt Daten in Textform zurück. Der zweite Parameter kann die Textkodierung festlegen.
• readAsDataURL(blob): Gibt die Daten als Daten-URL zurück.
• readAsArrayBuffer(blob): Gibt Daten als ArrayBuffer zurück.
• Abbrechen: Vorgang abbrechen.

Die Daten werden wie im obigen Beispiel in Textform zurückgegeben:

Konstante Leser = neuer FileReader();
reader.onload = Funktion (e) {
    Konsole.log(Leser.Ergebnis);
};
Leser.readAsText(blob2);

Ressourcen zum Thema

• MDN-bezogene Schlüsselwörter
• Modernes JavaScript-Tutorial Teil 3: Binäre Daten, Dateien
• Ruan Yifeng – Kapitel zum JavaScript-Tutorial zum Browsermodell

Zusammenfassen

Damit ist dieser Artikel über verschiedene binäre Objektbeziehungen in JavaScript abgeschlossen. Weitere relevante Inhalte zu binären Objektbeziehungen in JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!