Tableaux

Un tableau est une collection ordonnée de valeurs. Les valeurs d'un tableau sont appelées éléments, et chaque élément est caractérisé par une position numérique dans le tableau, appelée index. Les tableaux en JavaScript ne sont pas typés : les éléments du tableau peuvent être de n'importe quel type, et différents éléments Le même tableau peut avoir différents types. Les éléments du tableau peuvent même être des objets ou d'autres tableaux, vous permettant de créer des structures de données complexes telles que des tableaux d'objets et des tableaux de tableaux.

Les index des tableaux JavaScript commencent à zéro et utilisent des entiers de 32 bits - le premier élément du tableau a l'index 0. Les tableaux JavaScript sont dynamiques : ils peuvent augmenter et diminuer en taille selon les besoins ; il n'est pas nécessaire de déclarer des tailles de tableau fixes lors de leur création, ni de réallouer de la mémoire lorsque leurs tailles changent.

Les tableaux en JavaScript sont une forme spécialisée d'objets, et les indices de tableau ne signifient guère plus que de simples noms de propriétés, qui, par coïncidence, sont des entiers.

Création de tableaux

Le moyen le plus simple de créer un tableau consiste à utiliser un littéral, qui est une simple liste d'éléments de tableau séparés par des virgules et entourés de crochets. Les valeurs d'un littéral de tableau ne doivent pas nécessairement être des constantes - elles peuvent être n'importe quelle expression, y compris des littéraux d'objet :

Var vide = ; // Tableau vide var number = ; // Tableau avec cinq éléments numériques var misc = [ 1.1, true, "a", ]; // 3 éléments différents types+ virgule finale var base = 1024 ; vartable = ; // Tableau avec variables var arrObj = [, ]; // 2 tableaux à l'intérieur contenant des objets

La syntaxe littérale du tableau vous permet d'insérer une virgule finale facultative, c'est-à-dire le littéral [,] correspond à un tableau avec deux éléments, pas trois.

Une autre façon de créer un tableau consiste à appeler le constructeur Array(). Vous pouvez appeler le constructeur de trois manières différentes :

Appelez le constructeur sans arguments :

Var arr = nouveau tableau ();

Dans ce cas, un tableau vide sera créé, équivalent au littéral.

Appelez le constructeur avec un seul argument numérique spécifiant la longueur du tableau :

Var arr = nouveau tableau (10);

Dans ce cas, un tableau vide de la longueur spécifiée sera créé. Cette forme d'appel du constructeur Array() peut être utilisée pour pré-allouer de la mémoire à un tableau si le nombre de ses éléments est connu à l'avance. Notez que cela ne stocke aucune valeur dans le tableau.

Spécifiez explicitement les valeurs des deux premiers éléments du tableau ou plus ou d'un élément non numérique dans l'appel du constructeur :

Var arr = nouveau tableau (5, 4, 3, 2, 1, "test");

Dans ce cas, les arguments du constructeur deviennent les valeurs des éléments du nouveau tableau. Utiliser des littéraux de tableau est presque toujours plus facile que d’utiliser le constructeur Array().

Lecture et écriture d'éléments de tableau

Les éléments du tableau sont accessibles à l’aide de l’opérateur. À gauche des crochets, il doit y avoir une référence à un tableau. À l’intérieur des parenthèses, il doit y avoir une expression arbitraire qui renvoie une valeur entière non négative. Cette syntaxe est utile à la fois pour lire et écrire la valeur d'un élément de tableau. Par conséquent, toutes les instructions JavaScript suivantes sont valides :

// Crée un tableau avec un élément var arr = ["world"]; // Lire l'élément 0 var value = arr; // Écrivez la valeur dans l'élément 1 arr = 3.14; // Écrivez la valeur dans l'élément 2 i = 2; arr[i] = 3; // Écrit la valeur dans l'élément 3 arr = "hello"; // Lire les éléments 0 et 2, écrire la valeur dans l'élément 3 arr] = arr;

Permettez-moi de vous rappeler que les tableaux sont un type d'objet spécialisé. Les crochets utilisés pour accéder aux éléments du tableau agissent exactement de la même manière que les crochets utilisés pour accéder aux propriétés des objets. L'interpréteur JavaScript convertit les index numériques entre parenthèses en chaînes (l'index 1 devient la chaîne « 1 »), puis utilise les chaînes comme noms de propriété.

Il n'y a rien de spécial à convertir des index numériques en chaînes : vous pouvez faire la même chose avec des objets normaux :

Var obj = (); // Crée un objet simple obj = "one"; // Indexez-le avec des entiers

Le problème avec les tableaux est que lorsque vous utilisez des noms de propriété qui sont des entiers non négatifs, les tableaux déterminent automatiquement la valeur de la propriété length. Par exemple, ci-dessus, nous avons créé un tableau arr avec un seul élément. Il a ensuite attribué des valeurs à ses éléments aux index 1, 2 et 3. À la suite de ces opérations, la valeur de la propriété length du tableau est passée à 4.

Vous devez clairement distinguer les index d'un tableau des noms de propriétés d'objet. Tous les indices sont des noms de propriétés, mais seules les propriétés dont les noms sont représentés par des entiers sont des indices. Tous les tableaux sont des objets et vous pouvez leur ajouter des propriétés avec n'importe quel nom. Toutefois, si vous touchez des propriétés qui sont des indices de tableau, les tableaux répondent en mettant à jour la valeur de la propriété length si nécessaire.

Veuillez noter que les nombres négatifs et non entiers peuvent être utilisés comme indices de tableau. Dans ce cas, les nombres sont convertis en chaînes, qui sont utilisées comme noms de propriétés.

Ajout et suppression d'éléments de tableau

Nous avons déjà vu que le moyen le plus simple d'ajouter des éléments à un tableau est d'attribuer des valeurs à de nouveaux indices. Vous pouvez également utiliser la méthode push() pour ajouter un ou plusieurs éléments à la fin d'un tableau :

Var arr = ; // Crée un tableau vide arr.push("zero"); // Ajoute une valeur à la fin arr.push("one",2); // Ajoute deux valeurs supplémentaires

Vous pouvez également ajouter un élément à la fin du tableau en attribuant une valeur à l'élément arr. La méthode unshift() peut être utilisée pour insérer un élément au début d'un tableau, ce qui déplace les éléments existants du tableau vers des positions d'index plus élevées.

Vous pouvez supprimer des éléments du tableau à l'aide de l'opérateur delete, tout comme les propriétés d'objet classiques :

Var arr = ; supprimer l'arrêt ; 2 en arr; // faux, l'index 2 du tableau n'est pas défini arr.length; // 3 : l'opérateur delete ne modifie pas la propriété length du tableau

La suppression d'un élément est similaire (mais légèrement différente) à l'attribution de la valeur non définie à cet élément. Notez que l'application de l'opérateur delete à un élément du tableau ne modifie pas la valeur de la propriété length ni ne décale pas les éléments avec des index plus élevés pour combler le vide laissé par la suppression de l'élément.

Il est également possible de supprimer des éléments à la fin d'un tableau en attribuant simplement une nouvelle valeur à la propriété length. Les tableaux ont une méthode pop() (à l'opposé de push()), qui réduit la longueur du tableau de 1 et renvoie la valeur de l'élément supprimé. Il existe également une méthode shift() (à l'opposé de unshift()), qui supprime l'élément au début du tableau. Contrairement à l'opérateur delete, la méthode shift() déplace tous les éléments vers une position inférieure à leur index actuel.

Enfin, il existe une méthode splice() polyvalente qui vous permet d'insérer, de supprimer et de remplacer des éléments de tableaux. Il modifie la valeur de la propriété length et déplace les éléments du tableau vers des index inférieurs ou supérieurs selon les besoins. Nous examinerons toutes ces méthodes un peu plus tard.

Tableaux multidimensionnels

JavaScript ne prend pas en charge les « vrais » tableaux multidimensionnels, mais il constitue un bon moyen de les simuler à l’aide de tableaux de tableaux. Pour accéder à un élément de données dans un tableau de tableaux, utilisez simplement l'opérateur deux fois.

Par exemple, supposons que la matrice variable soit un tableau de tableaux de nombres. Chaque élément de matrice[x] est un tableau de nombres. Pour accéder à un nombre spécifique dans un tableau, vous pouvez utiliser l'expression matrice[x][y]. Ci-dessous se trouve exemple spécifique, Où tableau bidimensionnel utilisé comme table de multiplication :

// Crée un tableau multidimensionnel var table = new Array(10); // Il y a 10 lignes dans le tableau pour (var i = 0; i

Méthodes de la classe Array

La norme ECMAScript 3 définit Array.prototype comme un ensemble fonctions pratiques pour travailler avec des tableaux, qui sont disponibles en tant que méthodes de n'importe quel tableau. Ces méthodes seront présentées dans les sous-sections suivantes.

méthode join()

La méthode Array.join() convertit tous les éléments du tableau en chaînes, les joint et renvoie la chaîne résultante. En argument facultatif, vous pouvez passer une chaîne à la méthode qui sera utilisée pour séparer les éléments dans la chaîne résultat. Si aucune chaîne de délimiteur n’est spécifiée, une virgule est utilisée. Par exemple, le fragment suivant donne la chaîne « 1,2,3 » :

Var arr = ; arr.join(); // "1,2,3" arr.join("-"); // "1-2-3"

méthode inverse()

La méthode Array.reverse() inverse l'ordre des éléments dans un tableau et renvoie un tableau réorganisé. La permutation est effectuée directement dans le tableau d'origine, c'est-à-dire Cette méthode ne crée pas un nouveau tableau avec les éléments réorganisés, mais les réorganise plutôt dans un tableau déjà existant. Par exemple, l'extrait suivant, utilisant les méthodes reverse() et join(), donne la chaîne « 3,2,1 » :

Var arr = ; arr.reverse().join(); // "3,2,1"

méthode trier()

La méthode Array.sort() trie les éléments du tableau source et renvoie le tableau trié. Si la méthode sort() est appelée sans arguments, le tri est effectué par ordre alphabétique (les éléments sont temporairement convertis en chaînes pour comparaison si nécessaire). Les éléments non définis sont déplacés vers la fin du tableau.

Pour trier dans un ordre autre que alphabétique, vous pouvez transmettre une fonction de comparaison comme argument à la méthode sort(). Cette fonction définit lequel de ses deux arguments doit apparaître en premier dans la liste triée. Si le premier argument doit précéder le second, la fonction de comparaison doit renvoyer un nombre négatif. Si le premier argument doit suivre le second dans un tableau trié, alors la fonction doit renvoyer un nombre supérieur à zéro. Et si deux valeurs sont équivalentes (c'est-à-dire que leur ordre n'a pas d'importance), la fonction de comparaison doit renvoyer 0 :

Var arr = ; arr.sort(); // ordre alphabétique: 1111, 222, 33, 4 arr.sort(function(a,b) ( // Ordre numérique : 4, 33, 222, 1111 retourner a-b; // Renvoie la valeur 0 // en fonction de l'ordre de tri de a et b )); // Trier dans le sens opposé, du plus grand au plus petit arr.sort(function(a,b) (return b-a));

Remarquez à quel point il est pratique d'utiliser une fonction sans nom dans cet extrait. La fonction de comparaison n’est utilisée qu’ici, il n’est donc pas nécessaire de lui donner un nom.

méthode concat()

La méthode Array.concat() crée et renvoie un nouveau tableau contenant les éléments du tableau d'origine sur lequel concat() a été appelé et les valeurs de tous les arguments passés à concat(). Si l'un de ces arguments est lui-même un tableau, ses éléments sont ajoutés au tableau renvoyé. Il convient cependant de noter que transformer récursivement un tableau de tableaux en tableau unidimensionnel n'arrive pas. La méthode concat() ne modifie pas le tableau d'origine. Voici quelques exemples :

Var arr = ; arr.concat(4, 5); // Retourne arr.concat(); // Retour arr.concat(,) // Retour arr.concat(4, ]) // Retour ]

Méthode tranche()

La méthode Array.slice() renvoie une tranche, ou sous-tableau, du tableau spécifié. Les deux arguments de méthode spécifient le début et la fin du fragment renvoyé. Le tableau renvoyé contient l'élément dont le numéro est spécifié dans le premier argument, ainsi que tous les éléments suivants, jusqu'à (mais non compris) l'élément dont le numéro est spécifié dans le deuxième argument.

Si un seul argument est donné, le tableau renvoyé contient tous les éléments de la position de début à la fin du tableau. Si l'un des arguments est négatif, il détermine le numéro d'élément par rapport à la fin du tableau. Ainsi, l'argument -1 correspond au dernier élément du tableau et l'argument -3 correspond au troisième élément du tableau à partir de la fin. Voici quelques exemples:

Var arr = ; arr.slice(0,3); // Retourne arr.slice(3); // Retourne arr.slice(1,-1); // Retourne arr.slice(-3,-2); // Retour

Méthode splice()

La méthode Array.splice() est méthode universelle, qui insère ou supprime des éléments d'un tableau. Contrairement aux méthodes slice() et concat(), la méthode splice() modifie le tableau d'origine sur lequel elle a été appelée. Notez que les méthodes splice() et slice() ont des noms très similaires, mais effectuent des opérations complètement différentes.

La méthode splice() peut supprimer des éléments d'un tableau, insérer de nouveaux éléments ou faire les deux en même temps. Les éléments du tableau sont décalés si nécessaire pour créer une séquence continue après insertion ou suppression.

Le premier argument de la méthode splice() spécifie la position dans le tableau à partir de laquelle l'insertion et/ou la suppression seront effectuées. Le deuxième argument spécifie le nombre d'éléments qui doivent être supprimés (coupés) du tableau. Si le deuxième argument est omis, tous les éléments du tableau depuis le spécifié jusqu'à la fin du tableau sont supprimés. La méthode splice() renvoie un tableau des éléments supprimés ou (si aucun élément n'a été supprimé) un tableau vide.

Les deux premiers arguments de la méthode splice() spécifient les éléments du tableau à supprimer. Ces arguments peuvent être suivis de n'importe quel nombre d'arguments supplémentaires spécifiant les éléments à insérer dans le tableau, en commençant à la position spécifiée dans le premier argument.

Var arr = ; arr.splice(4); // Retour, arr = arr.splice(1,2); // Retour, arr = arr.splice(1,1); // Retour ; arr = arr = ; arr.splice(2,0,"a", "b"); // Retour ; arr =

Méthodes push() et pop()

Les méthodes push() et pop() vous permettent de travailler avec des tableaux comme s'il s'agissait de piles. La méthode push() ajoute un ou plusieurs nouveaux éléments à la fin du tableau et renvoie sa nouvelle longueur. La méthode pop() effectue l'opération inverse : elle supprime le dernier élément du tableau, réduit la longueur du tableau et renvoie la valeur supprimée. Notez que ces deux méthodes modifient le tableau d'origine plutôt que d'en créer une copie modifiée.

Méthodes unshift() et shift()

Les méthodes unshift() et shift() se comportent presque de la même manière que push() et pop(), sauf qu'elles insèrent et suppriment des éléments au début du tableau plutôt qu'à la fin. La méthode unshift() déplace les éléments existants vers des index plus grands pour libérer de l'espace, ajoute le ou les éléments au début du tableau et renvoie la nouvelle longueur du tableau. La méthode shift() supprime et renvoie le premier élément du tableau, décalant tous les éléments suivants d'une position vers le bas pour occuper l'espace libéré au début du tableau.

Les tableaux sont l'un des types de variables les plus couramment utilisés qui vous permettent de stocker de nombreuses valeurs séquentielles en « un seul endroit ». Cependant, en ce qui concerne JavaScript, des améliorations sont possibles.

Dans cet article, nous examinerons trois techniques peu connues qui peuvent être utilisées lorsque vous travaillez avec des tableaux.

1. Ajout de propriétés personnalisées aux tableaux

Si vous utilisez la recherche pour trouver la définition d'un tableau dans Langage JavaScript, alors la plupart des sources affirmeront que ce type La valeur d'une variable est représentée sous forme d'objet.

De manière générale, la plupart des éléments que nous rencontrons en JavaScript sont des objets. Il serait juste de noter que le langage contient également des types de données « primitifs », mais leurs valeurs sont en quelque sorte utilisées dans les propriétés des objets.

2. Accéder aux éléments du tableau dans une boucle

Puisque les indices de tableau ne peuvent prendre que des valeurs positives, le comptage commence à zéro. Nous pourrons ensuite utiliser cet index pour accéder à l'élément du tableau à une itération de boucle donnée.

ECMAScript6 a introduit un moyen de faire défiler un tableau sans utiliser d'index, mais via une nouvelle boucle for…of.

La boucle for...of est conçue pour parcourir les éléments d'un tableau sans affecter l'index de l'élément.

Var ary = ["orange","pomme","litchi"]; for (let item of ary)( console.log(item); ) // "orange", "apple", "lychee" À titre de comparaison : sortie des indices d'élément dans une boucle for. var ary = ["orange","pomme","litchi"]; pour (var élément = 0; élément< ary.length; item++){ console.log(item); } // 0, 1, 2

3. Le nombre d'éléments n'est pas la dimension du tableau

Lorsque nous parlons de la taille d’un tableau, nous y pensons généralement comme au nombre d’éléments qui y sont stockés. En fait, ce n'est pas tout à fait vrai : la propriété length est calculée en fonction de l'indice maximum de l'élément.

La propriété de longueur est très ambiguë. Pour le vérifier, il suffit de regarder les manipulations suivantes :

Var aire = ; ary.longueur = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

Dans le dernier exemple, il suffisait de placer l'élément en cinquième position, ce qui faisait que la longueur du tableau devenait 6. Si vous pensez que les index de 0 à 4 seront créés automatiquement, vous vous tromperez. Cela peut être vérifié à l’aide de l’opérateur in.

Var aire = ; ary.longueur = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 en ary); // FAUX

Dans ce cas, il serait juste d'appeler le tableau ary « clairsemé ».

Nous pouvons également manipuler la propriété length pour découper les tableaux. L'exemple ci-dessous montre « perdre » l'élément à l'index 5 en décrémentant la propriété length du tableau ary.

Var aire = ; ary.longueur = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.longueur = 2; console.log(ary.length); // 2 console.log(ary); // indéfini

• Traduction

• I. Itérer sur des tableaux réels
• méthode forEach et méthodes associées
• pour la boucle
• Utilisation appropriée pour...en boucle
• for...of boucle (utilisation implicite de l'itérateur)
• Utilisation explicite de l'itérateur
• Utiliser des méthodes pour parcourir des tableaux réels
• Convertir en un vrai tableau
• Une note sur les objets d'exécution

I. Énumération des tableaux réels ce moment Il existe trois façons de parcourir les éléments d'un tableau réel :

méthode Array.prototype.forEach ;

classique pour la boucle

une boucle for...in "correctement" construite.

De plus, bientôt, avec l'avènement du nouveau standard ECMAScript 6 (ES 6), deux méthodes supplémentaires sont attendues :

boucle for...of (utilisation implicite de l'itérateur) ;

utilisation explicite de l'itérateur.

1. La méthode forEach et les méthodes associées Si votre projet est conçu pour prendre en charge les fonctionnalités de la norme ECMAScript 5 (ES5), vous pouvez utiliser l'une de ses innovations : la méthode forEach.

Exemple d'utilisation :
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
De manière générale, l'utilisation de forEach nécessite de connecter la bibliothèque d'émulation es5-shim pour les navigateurs qui ne supportent pas nativement cette méthode. Ceux-ci incluent IE 8 et supérieur premières versions, qui sont encore utilisés ici et là.

L'avantage de forEach est qu'il n'est pas nécessaire de déclarer des variables locales pour stocker l'index et la valeur de l'élément actuel du tableau, puisqu'elles sont automatiquement transmises à la fonction de rappel en tant qu'arguments.

Si vous vous inquiétez du coût possible d'un rappel sur chaque élément, ne vous inquiétez pas et lisez ceci.

ForEach est conçu pour parcourir tous les éléments d'un tableau, mais en plus, ES5 propose plusieurs méthodes plus utiles pour parcourir tout ou partie des éléments et effectuer certaines actions sur eux :

• each - renvoie true si pour chaque élément du tableau le rappel renvoie une valeur qui peut être convertie en true .
• some - renvoie true si pour au moins un élément du tableau, le rappel renvoie une valeur qui peut être convertie en true.
• filter - crée un nouveau tableau qui inclut les éléments du tableau d'origine pour lesquels le rappel renvoie true .
• map - crée un nouveau tableau composé des valeurs renvoyées par le rappel.
• réduire - réduit un tableau à une valeur unique, en appliquant un rappel à chaque élément du tableau tour à tour, en commençant par le premier (peut être utile pour calculer la somme des éléments du tableau et d'autres fonctions récapitulatives).
• réduireRight - fonctionne de la même manière que réduire, mais parcourt les éléments dans l'ordre inverse.

2. Pour la boucle Bon vieux pour les règles:

Var a = ["a", "b", "c"]; indice var ; pour (indice = 0; indice< a.length; ++index) { console.log(a); }
Si la longueur du tableau est constante tout au long de la boucle et que la boucle elle-même appartient à une section de code critique en termes de performances (ce qui est peu probable), vous pouvez alors utiliser une version « plus optimale » de for qui stocke la longueur du tableau. :

Var a = ["a", "b", "c"]; var index, len ; pour (index = 0, len = a.length; index< len; ++index) { console.log(a); }
En théorie, ce code devrait s'exécuter un peu plus vite que le précédent.

Si l'ordre des éléments n'est pas important, alors vous pouvez aller encore plus loin en termes d'optimisation et vous débarrasser de la variable de stockage de la longueur du tableau, en changeant l'ordre de recherche à l'inverse :

Var a = ["a", "b", "c"]; indice var ; pour (index = a.length - 1; index >= 0; --index) ( console.log(a); )
Cependant, dans les moteurs JavaScript modernes, de tels jeux d'optimisation ne signifient généralement rien.

3. Utilisation appropriée d'une boucle for...in S'il vous est conseillé d'utiliser une boucle for...in, rappelez-vous que parcourir des tableaux n'est pas ce à quoi elle est destinée. Contrairement à une idée fausse courante, la boucle for...in ne parcourt pas les indices d'un tableau, mais plutôt les propriétés énumérables d'un objet.

Cependant, dans certains cas, comme l'itération sur des tableaux clairsemés, for...in peut être utile, à condition de prendre des précautions, comme le montre l'exemple ci-dessous :

// a - tableau clairsemé var a = ; une = "une" ; une = "b" ; une = "c" ; for (var clé dans a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key