Je crois que chaque apprenant JavaScript comprendra divers types de données de base de JS. Les tableaux sont des combinaisons de données. Il s'agit d'un concept très basique et simple. Il n'a pas beaucoup de contenu et il n'est pas difficile de bien l'apprendre. Mais ce qui est important dans cet article n'est pas le tableau que nous voyons habituellement, mais le ArrayBuffer.
Beaucoup de choses que j'ai écrites sont délibérément résumées car elles veulent remplir certaines fonctions spécifiques. Ils peuvent être considérés comme des mémos, et il en va de même pour cet article! J'ai étudié les connaissances liées à l'API audio Web et à la communication vocale il y a quelque temps. Le contenu se concentre sur le flux de flux audio entre divers nœuds audio-text. Maintenant, j'ai besoin de comprendre quel type de format de données, l'audio du flux est, donc la recherche sur ArrayBuffer est particulièrement importante.
Modèle de pile de tableau en mémoire
Acquisition de l'arraie
Comment générer un tableau en javascript:
La copie de code est la suivante:
[é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 tableau via le constructeur, bien sûr, vous pouvez également utiliser d'autres moyens:
La copie de code est la suivante:
"Array" .split ("");
"Array" .match (/ a | r / g);
Attendez, il y a de nombreuses façons. Mais je crains que beaucoup de gens ne soient pas très clairs sur le type de structure de la matrice à l'intérieur.
Modèle de pile
Dans le tableau, nous pouvons mettre de nombreuses données de différents types de données, tels que:
La copie de code est la suivante:
var arr = [21, "li jing", new Date (), function () {} ,, null];
Le tableau ci-dessus contient des nombres, des chaînes, des objets, des fonctions, non définis et nuls à la fois. Nous pouvons décrire l'interface de données ci-dessus de manière concrète:
La copie de code est la suivante:
Empiler
+ ------------------------------------------------------------------------------------------------------------------------------
| 21 | + --------------------------- +
+ ---------- + | |
| "Li Jing" | | |
+ ---------- + | + --------- + |
| [Report] | -----------> | Objet | |
+ ---------- + | + --------- + |
| [Report] | ------------------> + --------- + |
+ ---------- + | | Fonction | |
| non défini | | + --------- + |
+ ---------- + | |
| NULL | + ------------------------- +
+ ----------- + créé par Barret Lee
Les types de données JavaScript sont divisés en deux types, l'un est le type de valeur et l'autre est le type de référence. Les types de référence communs incluent l'objet et le tableau. Dans le modèle de stockage du tableau, si les données de type de valeur sont comme le numéro et la chaîne, les données seront directement poussées dans la pile, tandis que le type de référence ne sera poussé que dans un index de la valeur. Le concept du langage C est de sauver le pointeur des données, et ces données sont stockées dans un certain bloc du tas. La pile n'est pas indépendante et la pile peut également être stockée dans la pile.
D'accord, c'est tout pour l'explication de la table. Parlons en détail des connaissances pertinentes de ArrayBuffer.
Arraybuffer
Qu'est-ce que le Web? Quel est le problème le plus élémentaire dont le Web doit discuter? Je pense qu'il y a deux points: l'un est des données et l'autre est la transmission des données. Quant à l'affichage des données, il est compliqué et cela devrait être quelque chose sur la couche supérieure du Web. Le ArrayBuffer à discuter dans cet article est le type de données le plus élémentaire, et il ne peut même pas être appelé un type de données. Il est facile à lire et à écrire d'une autre manière.
Définition des points officiels:
Le ArrayBuffer est un type de données qui est utilisé pour représenter un tampon de données binaire générique de longueur fixe. Vous ne pouvez pas manipuler directement le contenu d'un ArrayBuffer; Au lieu de cela, vous créez un objet ArrayBufferview qui représente le tampon dans un format spécifique, et l'utilisez pour lire et écrire le contenu du tampon.
Le tampon d'origine représentant des données binaires, qui sont utilisées pour stocker les données de divers types de tableaux. Le ArrayBuffer ne peut pas être lu ou écrit directement, mais il peut être transmis à un tableau tapé ou un objet DataView au besoin pour interpréter le tampon d'origine.
Il s'agit d'un tampon brut de données binaires. Bien que JavaScript soit un langage de type faible, il a lui-même des limites sur le type et la taille des données. Nous devons lire le contenu du tampon de manière ordonnée (écrivez-la) via une certaine structure de données.
Création d'un tampon original
Le constructeur ArrayBuffer peut créer un tampon brut:
La copie de code est la suivante:
var tampon = nouveau ArrayBuffer (30);
De la console Chrome, vous pouvez voir:
L'instance de tampon a un attribut Bytelgle, qui est utilisé pour obtenir la taille du tampon, une méthode de tranche qui n'est prise en charge que par IE11 + et iOS6 +, qui est utilisée pour intercepter la longueur du tampon.
La copie de code est la suivante:
Tranche ArrayBuffer (
Longsité non signé
non signé à long terme facultatif
));
Vous pouvez tester cette démo:
La copie de code est la suivante:
var tampon = nouveau ArrayBuffer (12);
var x = nouveau int32Array (tampon);
x [1] = 1234;
var Slice = buffer.slice (4);
var y = new int32Array (tranche);
console.log (x [1]);
console.log (y [0]);
x [1] = 6789;
console.log (x [1]);
console.log (y [0]);
Tableaux basés sur des données
Les types de tableaux typés représentent diverses vues des objets ArrayBuffer indexable et manipulés. Tous les types de tableaux ont des longueurs fixes.
La copie de code est la suivante:
Taille du nom (en octets) Description
Int8Array 1 8 bits Two's Complément Signed Integer
Uint8array 1 entier non signé 8 bits
INT16Array 2 16 bits Two's Complément Signed Integer
Uint16array 2 entier 16 bits non signé
INT32Array 4 32 bits Two's Complément Signed Integer
Uint32Array 4 32 bits entier non signé
Float32Array 4 32 bits IEEE Numéro de point flottant
Float64Array 8 64 bits IEEE Numéro de point flottant
INT est un entier, Uint est un plastique non signé et le flotteur est un type de point flottant. Ce sont les concepts de base du langage C, donc je ne les expliquerai pas en détail. Étant donné que ces structures visualisées sont similaires, cet article explique uniquement le type Float32Array et que les lecteurs peuvent en apprendre un par un.
Float32Array est très similaire au tableau, sauf que chaque élément est des données de points flottants 32 bits (4 octets). Float32Array Une fois créé, sa taille ne peut pas être modifiée.
Nous pouvons créer un float32Array directement:
La copie de code est la suivante:
var x = nouveau float32Array (2);
x [0] = 17;
console.log (x [0]); // 17
console.log (x [1]); // 0
console.log (x.length); // 2
Il doit y avoir un concept selon lequel il s'agit toujours d'un tableau, mais chaque élément du tableau est un type de données flottant 32 bits, par exemple:
La copie de code est la suivante:
var x = nouveau float32Array ([17, -45.3]);
console.log (x [0]); // 17
console.log (x [1]); // -45.2999923706055
console.log (x.length); // 2
Nous attribuons la valeur d'un tableau directement à x, l'objet Float32Array, puis il sera converti en un numéro de point flottant 32 bits avant le stockage.
Étant donné que chaque élément de ce tableau de classe est du même type, dans le modèle de pile, ils seront tous poussés dans la pile. Par conséquent, le tableau datanisé est un type de valeur, et ce n'est pas un type de référence! Cela doit être pris en compte et peut également être reflété dans les exemples suivants:
La copie de code est la suivante:
var x = nouveau float32Array ([17, -45.3]);
var y = new float32Array (x);
console.log (x [0]); // 17
console.log (x [1]); //-45.2999923706055
console.log (x.length); // 2
x [0] = -2;
console.log (y [0]); // 17, la valeur de y n'a pas changé
Copiez la valeur de x en y, modifiez x [0], Y [0] et il n'y a pas de changement.
En plus de la méthode ci-dessus, nous pouvons également créer un tableau datazed par d'autres moyens:
La copie de code est la suivante:
var tampon = nouveau ArrayBuffer (12);
var x = nouveau float32Array (tampon, 0, 2);
var y = nouveau float32Array (tampon, 4, 1);
x [1] = 7;
console.log (y [0]); // 7
Expliquez pourquoi 7 est retourné ici.
La copie de code est la suivante:
ArrayBuffer (12)
+ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | | | |
+ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
/ /
x (float32Array)
Compense: 0
Bytelngth: 4
Longueur: 2
ArrayBuffer (12)
+ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | | | |
+ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
/ /
y
Créé par Barret Lee
Avez-vous encore des questions après avoir lu l'illustration ci-dessus? Je ne pense pas avoir besoin de continuer à expliquer. L'unité de ArrayBuffer peut être considérée comme 1, tandis que l'unité de Float32Array est 4.
Objet DataView
L'objet DataView exploite des données plus méticuleusement, mais je ne pense pas que ce soit intéressant. Les différents tableaux basés sur des données mentionnés ci-dessus peuvent essentiellement satisfaire l'application, donc je vais simplement le mentionner ici, un exemple simple:
La copie de code est la suivante:
var tampon = nouveau ArrayBuffer (12);
var x = new DataView (tampon, 0);
x.sentInt8 (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 passer à http://www.javascripture.com/dataview pour des informations détaillées.
ArrayBuffer dans XHR2
ArrayBuffer est particulièrement largement utilisé. Qu'il s'agisse de WebSocket, WebAudio, Ajax, etc., tant que le processus frontal des mégadonnées ou souhaite améliorer les performances de traitement des données, ArrayBuffer doit être indispensable.
XHR2 n'est pas nouveau. Vous avez peut-être utilisé des fonctionnalités pertinentes, mais vous ne savez pas que c'est ce qu'est XHR2. La chose la plus importante est XHR.ResponSetype, qui est utilisée pour définir le format de données de la réponse. Les paramètres facultatifs sont: "Text", "ArrayBuffer", "Blob" ou "Document". Notez que le paramètre (ou ignorer) xhr.ResponSetype = '' définira la réponse sur "texte" par défaut. Il existe une relation correspondante comme ceci:
La copie de code est la suivante:
Demander une réponse
Texte Domstring
Arraybuffer ArrayBuffer
blob blob
document de document
Prenez un châtaignier:
La copie de code est la suivante:
var xhr = new 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 la propriété sur ArrayBuffer dans xhr.ResponSetype, afin que nous puissions utiliser un tableau basé sur des données pour accepter les données que nous obtenons!
résumé
Cet article présente principalement la façon dont Array est stocké dans le modèle de pile, et décrit également en détail le type de données binaires du ArrayBuffer, le tampon d'origine. Dans le développement Web, les données et le stockage de données sont une partie importante, j'espère attirer l'attention!
Il peut y avoir des erreurs dans le récit de cet article, veuillez les corriger davantage!