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.

Tableaux typés

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.

Composition

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.

Ce qui les différencie des tableaux normaux

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 permet de traiter des données binaires brutes
• Étant donné que les types de données qu'ils gèrent sont limités, il est plus facile pour votre moteur d'optimiser les tableaux typés que les tableaux ordinaires, car l'optimisation des tableaux ordinaires est en fait un processus très compliqué.
• Il n'y a aucune garantie que les tableaux ordinaires seront toujours optimisés, car votre moteur peut décider de ne pas optimiser pour diverses raisons.

Utilisation dans le développement Web

API XMLHttpRequest

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();

Fetch API

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 => {
   // 处理数据
});

HTML Canvas

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

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

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

Auteur original : Mahdhi Rezvi

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation
•  ! !

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!