Introduction détaillée à ArrayBuffer dans les compétences JavaScript

Je crois que chaque apprenant javascript comprendra les différents types de données de base de JS. Un tableau est une combinaison de données. C'est un concept très basique et simple, il n'a pas beaucoup de contenu et il n'est pas difficile à apprendre. ça compte bien. Mais ce sur quoi cet article se concentre n’est pas le Array que nous voyons habituellement, mais ArrayBuffer.

Beaucoup de choses que j'écris sont volontairement résumées car je souhaite remplir certaines fonctions spécifiques. Elles peuvent être considérées comme des mémos, et il en va de même pour cet article ! Il y a quelque temps, j'ai étudié l'API Web Audio et les connaissances liées à la communication vocale. Le contenu se concentre sur le flux de flux audio entre les différents nœuds d'AudioContext. Je dois maintenant savoir à quel type de format de données se trouve l'audio. la fin du flux, j'ai donc une compréhension approfondie d'ArrayBuffer. La recherche est extrêmement importante.

Modèle de pile de tableaux en mémoire

Obtenir un tableau

Comment générer un tableau en Javascript :

Copier le code Le code est le suivant :

[élément0, élément1, ..., élémentN]

nouveau tableau (élément0, élément1, ..., élémentN)

nouveau tableau (arrayLength)

Définissez-le directement, ou créez un Array via le constructeur. Bien sûr, vous pouvez également utiliser d'autres méthodes :

Copier le code Le code est le suivant :

"tableau".split("");

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

Attendez, il existe plusieurs façons. Mais quelle est la structure interne d'Array, je crains que beaucoup de gens ne soient pas encore très clairs.

Modèle de pile

Nous pouvons mettre de nombreux types de données différents dans le tableau, tels que :

Copier le code Le code est le suivant :

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

Le tableau ci-dessus contient des nombres, des chaînes, des objets, des fonctions, non définis et nuls. Nous pouvons décrire concrètement l'interface de données ci-dessus :

Copier le code Le code est le suivant :

Pile
--------- Tas
| 21 | --------------------
---------                                                                       | "Li Jing" | ---------                                                                                                                                                                | [référer] |---------->| Objet |
---------                                                                                                                                                                |[référer] |------------------> -------- |
---------                                                                                                      | | |indéfini| |
---------                                                                       | nul | -------------------
--------- Créé par Barret Lee

Les types de données JavaScript sont divisés en deux types, l'un est le type valeur et l'autre est le type référence. Les types de référence courants sont Object et Array. Dans le modèle de stockage de tableau, s'il s'agit d'un type valeur tel que Number et String. sera poussé directement sur la pile, tandis que le type référence ne poussera qu'un index vers la valeur. Pour l'expliquer en termes de langage C, seul le pointeur vers les données est enregistré. Les données sont stockées dans une certaine plage du tas. . La pile n'est pas indépendante et peut également être stockée dans le tas.

D'accord, c'est tout pour la description d'Array. Parlons en détail des connaissances pertinentes d'ArrayBuffer.

ArrayBuffer

Qu’est-ce que le Web ? Quelles sont les questions les plus fondamentales à aborder sur le Web ? Je pense qu'il y a deux points, l'un concerne les données et l'autre la transmission des données. Quant à l'affichage des données, c'est compliqué. Cela devrait être quelque chose sur la couche supérieure du Web. L'ArrayBuffer dont il est question dans cet article est le type de données le plus basique. Il ne peut même pas être appelé un type de données. Il s'agit d'un élément de données qui doit être lu et écrit via d'autres méthodes.

Définition officielle du point :

L'ArrayBuffer est un type de données utilisé pour représenter un tampon de données binaires générique de longueur fixe. Vous ne pouvez pas manipuler directement le contenu d'un ArrayBuffer, mais vous créez un objet ArrayBufferView qui représente le tampon dans un objet spécifique. format, et utilisez-le pour lire et écrire le contenu du tampon.
Représente un tampon brut de données binaires utilisé pour stocker les données de divers tableaux typés. ArrayBuffer ne peut pas être lu ou écrit directement, mais le tampon brut peut être interprété selon les besoins en le transmettant à un tableau typé ou à un objet DataView.

Il s'agit d'un tampon brut de données binaires. Bien que JavaScript soit un langage faiblement typé, il a lui-même des restrictions sur le type et la taille des données. Nous devons trier le contenu du tampon via une sorte de structure de données. (écrire).

Création de tampon brut

Un tampon brut peut être créé via le constructeur ArrayBuffer :

Copier le code Le code est le suivant :

var tampon = nouveau ArrayBuffer(30);

Vous pouvez voir depuis la console Chrome :

L'instance de tampon a un attribut byteLength, qui est utilisé pour obtenir la taille du tampon, et une méthode slice, qui n'est prise en charge que par IE11 et ios6, et est utilisée pour intercepter la longueur du tampon.

Copier le code Le code est le suivant :

Tranche ArrayBuffer (

début long non signé

extrémité longue non signée Facultatif

);

Vous pouvez tester cette DEMO :

Copier le code Le code est le suivant :

var tampon = nouveau ArrayBuffer(12);

var x = nouveau 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]);

Tableau de données

Les types de tableaux typés représentent différentes vues des objets ArrayBuffer qui peuvent être indexés et manipulés. Tous les types de tableaux ont une longueur fixe.

Copier le code Le code est le suivant :

Nom Taille (en octets) Description 

Int8Array 1 Entier signé en complément à deux de 8 bits

Uint8Array 1 entier non signé de 8 bits

Int16Array 2 Entier signé en complément à deux 16 bits

Uint16Array 2 Entier non signé de 16 bits

Int32Array 4 Entier signé en complément à deux 32 bits

Uint32Array 4 Entier non signé de 32 bits

Float32Array 4 Nombre à virgule flottante IEEE 32 bits

Float64Array 8 Nombre à virgule flottante IEEE 64 bits

Int est un type entier, Uint est un entier non signé et Float est un type à virgule flottante. Ce sont des concepts de base du langage C, et je ne les expliquerai pas en détail. Étant donné que ces structures de visualisation sont toutes similaires, cet article explique uniquement le type Float32Array et les lecteurs peuvent tirer des conclusions à partir d'un exemple.

Float32Array est très similaire à Array, sauf que chaque élément est une donnée à virgule flottante de 32 bits (4 octets). Une fois qu'un Float32Array est créé, sa taille ne peut pas être modifiée.

On peut créer directement un Float32Array :

Copier le code Le code est le suivant :

var x = nouveau Float32Array(2);

x[0] = 17;

console.log(x[0]); // 17

console.log(x[1]); // 0

console.log(x.longueur); // 2

Vous devez avoir un tel concept. Il s'agit toujours d'un tableau, mais chaque élément du tableau est un type de données Float 32 bits :

Copier le code Le code est le suivant :

var x = nouveau Float32Array([17, -45.3]);

console.log(x[0]); // 17

console.log(x[1]); // -45.29999923706055

console.log(x.longueur); // 2

Nous attribuons la valeur d'un tableau directement à l'objet Float32Array x, puis le convertissons en un nombre à virgule flottante de 32 bits avant de le stocker.

Comme chaque élément de ce type de tableau est du même type, dans le modèle de pile, ils seront tous poussés sur la pile. Par conséquent, le tableau de données est un type valeur, pas un type référence ! Cela devrait attirer l'attention, et cela peut également se refléter dans les exemples suivants :

Copier le code Le code est le suivant :

var x = nouveau Float32Array([17, -45.3]);

var y = nouveau Float32Array(x);

console.log(x[0]); // 17

console.log(x[1]); //-45.29999923706055

console.log(x.longueur); // 2

x[0] = -2;

console.log(y[0]); // 17, la valeur de y n'a pas changé

Copiez la valeur de x dans y, modifiez x[0], y[0] n'a aucun changement.

En plus de la méthode ci-dessus, nous pouvons également créer un tableau de données d'autres manières :

Copier le code Le code est le suivant :

var tampon = nouveau ArrayBuffer(12);

var x = nouveau Float32Array(buffer, 0, 2);

var y = nouveau Float32Array(buffer, 4, 1);

x[1] = 7;

console.log(y[0]); // 7

Expliquez pourquoi cela renvoie 7.

Copier le code Le code est le suivant :

ArrayBuffer(12)
- - - - - - - - - - - - -
|0|1|2|3|4|5|6|7|8| - - - - - - - - - - - - -
x (Float32Array)
Décalage：0
octetLongueur：4
longueur : 2

ArrayBuffer (12)

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

Créé par Barret Lee

Après avoir lu le schéma ci-dessus, avez-vous encore des questions ? Je ne pense pas avoir besoin d'expliquer davantage. Vous pouvez considérer l’unité d’ArrayBuffer comme 1, tandis que l’unité de Float32Array est 4.

Objet DataView

L'objet DataView opère sur les données de manière plus détaillée, mais je ne pense pas que ce soit intéressant. Les différents tableaux numérisés mentionnés ci-dessus peuvent essentiellement répondre aux exigences de l'application, je vais donc le mentionner brièvement ici, avec un exemple simple :

Copier le code

Le code est le suivant : var tampon = nouveau ArrayBuffer(12); var x = nouveau 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

Si vous êtes intéressé, vous pouvez vous rendre sur http://www.javascripture.com/DataView pour en savoir plus.

ArrayBuffer dans XHR2

ArrayBuffer est particulièrement largement utilisé, qu'il s'agisse de WebSocket, WebAudio, Ajax, etc., tant que le front-end traite du big data ou souhaite améliorer les performances de traitement des données, ArrayBuffer doit être indispensable.

XHR2 n'est pas une nouveauté. Peut-être avez-vous utilisé des fonctionnalités associées mais ne saviez pas qu'il s'agissait du contenu de XHR2. La chose la plus importante est xhr.responseType. Sa fonction est de définir le format des données de la réponse. Les paramètres facultatifs sont : "text", "arraybuffer", "blob" ou "document". Notez que définir (ou omettre) xhr.responseType = '' donnera par défaut la réponse à "text". Il y a une telle correspondance ici :

Copier le code Le code est le suivant :

Demander une réponse

envoyer un SMS à DOMString

arraybuffer ArrayBuffer

blob blob

document Document

Donnez-moi un exemple :

Copier le code Le code est le suivant :

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

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

xhr.send();

Nous définissons l'attribut dans xhr.responseType sur arraybuffer, afin que nous puissions utiliser le tableau de données pour accepter les données que nous obtenons !

Résumé

Cet article présente principalement la méthode de stockage d'Array dans le modèle de pile, et décrit également en détail le type de données binaires du tampon ArrayBuffer d'origine. Dans le développement Web, les données et le stockage de données sont un élément important. attention!

Il peut y avoir des erreurs dans la description de cet article, merci de me corriger !

Introduction détaillée à ArrayBuffer dans les compétences JavaScript_javascript