Maison > Article > interface Web > Découvrez les tableaux typés en JavaScript dans un article
Cet article vous fera découvrir le tableau typé en JavaScript pour voir sa composition, en quoi il est différent des tableaux ordinaires et son utilisation dans le développement Web.
Dans le langage JavaScript, nous devons tous être suffisamment familiers avec les tableaux pour savoir que les tableaux sont de nature dynamique et peuvent contenir n'importe quel objet JavaScript. Cependant, si vous avez déjà utilisé un autre langage comme le C, sachez que les tableaux ne sont pas de nature dynamique. Et vous ne pouvez stocker que des types de données spécifiques dans ce tableau. Après tout, cela garantit que le tableau est plus efficace du point de vue des performances. Cependant, le dynamisme des tableaux et la diversification des types d’informations stockées ne rendent pas réellement les tableaux JavaScript inefficaces. Grâce à l'optimisation du moteur JavaScript, la vitesse d'exécution des tableaux en JavaScript est en fait très rapide.
À mesure que les applications Web deviennent de plus en plus puissantes, nous commençons à devoir laisser les applications Web traiter et manipuler les données binaires brutes. Les tableaux JavaScript ne peuvent pas gérer ces données binaires brutes, nous avons donc introduit les tableaux typés JavaScript.
Un tableau typé est un objet très similaire à un tableau, mais il fournit un mécanisme pour écrire des données binaires brutes dans une mémoire tampon. Cette fonctionnalité est bien prise en charge par tous les principaux navigateurs, et ES6 l'a intégrée dans le framework principal JavaScript, qui donne également accès aux méthodes Array comme map()
, filter()
, etc. Je vous recommande fortement d'explorer les ressources mentionnées à la fin de cet article pour en savoir plus sur les tableaux typés.
Les tableaux typés se composent de deux parties principales, Buffer
et View
.
Buffer
Buffer
est un objet de type ArrayBuffer
, représentant un bloc de données. Ce bloc de données binaires brutes ne peut pas être consulté ou modifié individuellement. Vous vous demandez peut-être quelle utilisation peut être faite des objets de données inaccessibles ou inaccessibles. En fait, la vue est l'interface de lecture et d'écriture du tampon.
View
View
est un objet qui vous permet d'accéder et de modifier le contenu binaire brut stocké dans ArrayBuffer
. En général, il existe deux points de vue.
TypedArray
Instances d'objets
Ces types d'objets sont très similaires aux tableaux ordinaires, mais ne stockent que des données numériques d'un seul type. Des choses comme Int8
, Uint8
, Int16
, Float32
sont les types de données des tableaux typés. Le nombre dans le type représente le nombre de bits alloués au type de données. Par exemple, Int8
représente un entier de 8 bits.
Vous pouvez lire la Documentation de référence pour en savoir plus sur les types de données des tableaux typés. Une instance d'un objet
DataView
DataView
est une interface de bas niveau qui fournit une API getter
/ setter
pour lire et écrire des données arbitraires dans un tampon. Cela facilite grandement notre développement, en particulier lorsque nous devons gérer plusieurs types de données dans un seul tableau typé.
Un autre avantage de l'utilisation de DataView
est qu'il vous permet de contrôler le caractère boutien de vos données - les tableaux typés utilisent le caractère boutiste de la plateforme. Bien sûr, si votre programme s'exécute localement, cela ne posera pas de problème puisque votre appareil utilisera le même endianisme que le tableau d'entrée. Dans la plupart des cas, votre tableau saisi sera en petit-boutiste car Intel utilise le petit-boutiste. Étant donné qu'Intel est si courant dans les processeurs informatiques, la plupart du temps, cela ne posera pas de problème. Cependant, si des données codées en petit-boutiste sont transmises à un appareil utilisant un codage en gros-boutiste, cela provoquera des erreurs lors de la lecture, ce qui peut finalement entraîner une perte de données. Puisque DataView
vous donne le contrôle de la direction de l’endianité, vous pouvez l’utiliser si nécessaire.
Comme mentionné précédemment, les tableaux JavaScript normaux ont été optimisés par le moteur JavaScript, vous n'avez pas besoin d'utiliser des tableaux typés pour améliorer les performances car cela ne vous en apportera pas trop. mises à niveau. Mais certaines caractéristiques différencient les tableaux typés des tableaux ordinaires, ce qui peut expliquer pourquoi vous les choisissez.
Vous pouvez recevoir une réponse de données sous ArrayBuffer
en fonction de votre type de réponse.
const xhr = new XMLHttpRequest(); xhr.open('GET', exampleUrl); xhr.responseType = 'arraybuffer'; xhr.onload = function () { const arrayBuffer = xhr.response; // 处理数据 }; xhr.send();
Semblable à l'API XMLHttpRequest, l'API Fetch vous permet également de recevoir des réponses en ArrayBuffer
. Vous utilisez simplement la méthode arrayBuffer()
dans la réponse de l'API fetch et vous recevrez un ArrayBuffer
analysé en utilisant Promise
.
fetch(url) .then(response => response.arrayBuffer()) .then(arrayBuffer => { // 处理数据 });
L'élément HTML5 Canvas vous permet de restituer des formes 2D dynamiques et des images bitmap. Cet élément agit uniquement comme un conteneur pour les graphiques dessinés à l'aide de JavaScript. Le contexte 2D de
canvas vous permet de récupérer des données bitmap en tant qu'instance de Uint8ClampedArray
. Jetons un coup d'œil à l'exemple de code fourni par le Dr Axel :
const canvas = document.getElementById('my_canvas'); const context = canvas.getContext('2d'); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const uint8ClampedArray = imageData.data;
WebGL vous permet de restituer des graphiques 3D et 2D interactifs hautes performances. Il s'appuie fortement sur des tableaux typés car il traite les données brutes de pixels pour afficher les graphiques nécessaires sur le canevas.
Vous pouvez en savoir plus sur les bases de WebGL dans cet article.
Web Socket vous permet d'envoyer et de recevoir des données binaires brutes sous forme de blobs ou de tampons de tableau.
const socket = new WebSocket("ws://localhost:8080"); socket.binaryType = "arraybuffer"; // 监听 message socket.addEventListener("message", function (event) { const view = new DataView(event.data); // 处理接收数据 }); // 发送二进制数据 socket.addEventListener('open', function (event) { const typedArray = new Uint16Array(7); socket.send(typedArray.buffer); });
Bien que les débutants n'aient pas besoin d'une compréhension détaillée des tableaux typés, ils sont essentiels lorsque vous passez au développement JavaScript intermédiaire et avancé. Cela est principalement dû au fait que vous souhaiterez peut-être développer des applications plus complexes nécessitant l’utilisation de tableaux typés.
Pour en savoir plus sur les tableaux typés, explorez les liens de ressources ci-dessous.
Merci pour votre lecture et bonne programmation ! ! Ressources - typed-arrays-ccfa5ae8838d
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!