Tableaux Typés JavaScript
Tableaux Typés
Les tableaux typés ont été conçus pour gérer des données binaires .
Contrairement aux tableaux classiques, les tableaux typés sont des tampons de longueur fixe .
Les tableaux typés stockent des éléments de types fixes , comme des entiers de 8 bits ou des nombres de 32 bits.
Exemples
Créez un tableau typé de 5 octets :
const myArr = new Uint8Array(5); Créez un tableau typé à partir d'un tableau :
const myArr = new Uint8Array([0,1,2,3,4]); Créez un tableau typé à partir d'une liste de nombres :
const myArr = Uint8Array.of(0,1,2,3,4); Créez un tableau typé à partir d'un tableau :
const myArr = Uint8Array.from([0,1,2,3,4]); Avantages des Tableaux Typés
Les tableaux typés ont été conçus pour fournir un moyen efficace de gérer des données binaires, contrairement aux tableaux JavaScript traditionnels qui peuvent contenir des éléments de types de données mixtes.
Les tableaux typés sont de la mémoire brute, ce qui permet à JavaScript de les passer directement à n'importe quelle fonction sans avoir à convertir les données en une autre représentation.
Les tableaux typés sont nettement plus rapides que les tableaux classiques pour passer des données à des fonctions capables d'utiliser des données binaires brutes. Ils sont particulièrement adaptés pour :
-
WebGL et Canvas :
Rendu graphique rapide et traitement d'images. -
APIs de Fichiers :
Lecture et écriture rapides de fichiers locaux. -
APIs Multimédia :
Gestion rapide des données audio et vidéo. -
WebSockets :
Transfert efficace de données binaires sur le réseau.
Remarque
Les tableaux typés offrent un moyen de gérer des données binaires aussi efficacement que les tableaux en C.
APIs de Navigateur Supportant les Tableaux Typés
Exemple de Fetch API
fetch(url)
.then(request => request.arrayBuffer())
.then(arrayBuffer =>...);
Exemple de Canvas
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; Différences par rapport aux Tableaux Normaux
-
Longueur Fixe :
Les tableaux typés ne peuvent pas être redimensionnés dynamiquement à l'aide de méthodes comme push() ou pop(). -
Restriction de Type :
Les éléments doivent respecter le type de données spécifié du tableau typé. -
Tampon Sous-jacent :
Les tableaux typés sont des vues dans un ArrayBuffer, permettant la manipulation directe des données binaires.
Types de Tableaux Typés
| Nom | Min | Max | Octets | Type |
|---|---|---|---|---|
| Int8Array | -128 | 127 | 1 | octet |
| Uint8Array | 0 | 255 | 1 | octet |
| Uint8ClampedArray | 0 | 255 | 1 | octet |
| Int16Array | -32768 | 32767 | 2 | short |
| Uint16Array | 0 | 65535 | 2 | unsigned short |
| Int32Array | -2147483648 | 2147483647 | 4 | long |
| Uint32Array | 0 | 4294967295 | 4 | unsigned long |
| BigInt64Array | -2 63 | 2 63 - 1 | 8 | bigint |
| BigUint64Array | 0 | 2 64 - 1 | 8 | unsigned bigint |
| Float16Array | -65504 | 65504 | 2 | demi non restreint |
| Float32Array | -3.4e38 | 3.4e38 | 4 | float non restreint |
| Float64Array | -1.8e308 | 1.8e308 | 8 | double non restreint |
Entiers 8 Bits
| Nom | Type de Données | Plage |
|---|---|---|
| Int8Array | Entier signé (octet) | -128/127 |
| Uint8Array | Entier non signé (octet) | 0/255 |
| Uint8ClampedArray | Entier non signé (octet) | 0/255 |
Exemples
Créez un tableau typé de 10 entiers signés de 8 bits (format octet) :
const myArr = new Int8Array(10); Créez un tableau typé de 10 entiers non signés de 8 bits (format octet) :
const myArr = new Uint8Array(10); Créez un tableau typé de 10 entiers non signés de 8 bits (format clamped) :
const myArr = new Uint8ClampedArray(10); Uint8Array vs Uint8ClampedArray
La différence entre un Uint8Array et un Uint8ClampedArray réside dans la manière dont les valeurs sont ajoutées.
Si vous définissez un élément dans un Uint8ClampedArray à une valeur en dehors de la plage 0-255, il sera par défaut fixé à 0 ou 255.
Un tableau typé prendra simplement les 8 premiers bits de la valeur.
Remarque
Les tableaux typés ne sont pas des tableaux.
isArray() sur un tableau typé renvoie faux.
De nombreuses méthodes de tableau (comme push et pop) ne sont pas prises en charge par les tableaux typés.
Entiers 16 Bits
| Nom | Type de Données | Plage |
|---|---|---|
| Int16Array | Entier court | -32768/32767 |
| Uint16Array | Entier court non signé | 0/65535 |
Exemples
Créez un tableau typé de 10 entiers signés de 16 bits (format court) :
const myArr = new Int16Array(10); Créez un tableau typé de 10 entiers non signés de 16 bits (format court non signé) :
const myArr = new Uint16Array(10); Entiers 32 Bits
| Nom | Type de Données | Plage |
|---|---|---|
| Int32Array | Entier long signé | -2147483648 / 2147483647 |
| Uint32Array | Entier long non signé | 0 / 4294967295 |
Exemples
Créez un tableau typé de 10 entiers signés de 32 bits (format long) :
const myArr = new Int32Array(10); Créez un tableau typé de 10 entiers non signés de 32 bits (format long non signé) :
const myArr = new Uint32Array(10); Entiers 64 Bits
| Nom | Type de Données | Plage |
|---|---|---|
| BigInt64Array | Grand entier signé | -2 63 /2 63 -1 |
| BigUint64Array | Grand entier non signé | 0/2 64 |
Exemples
Créez un tableau typé de 10 entiers signés de 64 bits (format bigint) :
const myArr = new BigInt64Array(10); Créez un tableau typé de 10 entiers non signés de 64 bits (format bigint) :
const myArr = new BigUint64Array(10); Nombres à Virgule Flottante
| Nom | Description | Plage |
|---|---|---|
| Float16Array | Précision demi - 3 chiffres décimaux significatifs | -65504 / 65504 |
| Float32Array | Précision normale - 7 chiffres décimaux significatifs | -3.4e38 / 3.4e38 |
| Float64Array | Double précision - 15 chiffres décimaux significatifs | -1.8e308 / 1.8e308 |
Comme spécifié par la norme ECMAScript , l'arithmétique en JavaScript doit être effectuée en utilisant l'arithmétique à virgule flottante double précision :
Exemples
Créez un tableau typé de 10 nombres à virgule flottante en format 16 bits (demi précision) :
const myArr = new Float16Array(10); Créez un tableau typé de 10 nombres à virgule flottante en format 32 bits (précision normale) :
const myArr = new Float32Array(10); Créez un tableau typé de 10 nombres à virgule flottante en format 64 bits (double précision) :
const myArr = new Float64Array(10); En savoir plus :
Support des Navigateurs
Les Tableaux Typés sont une fonctionnalité ES6 .
ES6 est entièrement pris en charge dans tous les navigateurs modernes depuis juin 2017 :
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| Mai 2016 | Avr 2017 | Juin 2017 | Sep 2016 | Juin 2016 |