Aujourd'hui, dans la cinquième partie de la traduction du cours JavaScript, nous allons parler des tableaux et des boucles. Les tableaux sont utilisés pour résoudre de nombreux problèmes. Travaille souvent avec des tableaux à l'aide de boucles.
→
Partie 1: premier programme, fonctionnalités linguistiques, normes→
Partie 2: style de code et structure du programme→
Partie 3: variables, types de données, expressions, objets→
Partie 4: caractéristiques→
Partie 5: tableaux et boucles→
Partie 6: exceptions, points-virgules, littéraux génériques→
Partie 7: mode strict, ce mot-clé, événements, modules, calculs mathématiques→
Partie 8: Présentation des fonctionnalités d'ES6→
Partie 9: Présentation des normes ES7, ES8 et ES9
Tableaux
Les tableaux, objets de type
Array , évoluent avec d'autres mécanismes du langage. Ce sont des listes de valeurs numérotées.
Le premier élément du tableau a un index (clé) de 0; cette approche est utilisée dans de nombreux langages de programmation.
Dans cette section, nous considérerons les méthodes modernes de travail avec les tableaux.
▍Initialisation des tableaux
Voici quelques façons d'initialiser des tableaux.
const a = [] const a = [1, 2, 3] const a = Array.of(1, 2, 3) const a = Array(6).fill(1)
Afin d'accéder à un élément individuel du tableau, utilisez une construction composée de crochets qui contiennent l'index de l'élément du tableau. Les éléments du tableau peuvent être lus ou écrits.
const a = [1, 2, 3] console.log(a)
Le constructeur de
Array pour déclarer des tableaux n'est pas recommandé.
const a = new Array()
Cette méthode ne doit être utilisée que lors de la déclaration de
tableaux typés .
▍Obtenir la longueur du tableau
Pour connaître la longueur d'un tableau, vous devez vous référer à sa propriété
length .
const l = a.length
▍Vérification d'un tableau à l'aide de la méthode every ()
La méthode du tableau
every() peut être utilisée pour organiser la vérification de tous leurs éléments en utilisant une certaine condition. Si tous les éléments du tableau remplissent la condition, la fonction renverra
true , sinon elle renverra
false .
Cette méthode reçoit une fonction qui prend les arguments
currentValue (élément de tableau actuel),
index (index de l'élément de tableau actuel) et
array (le tableau lui-même). Il peut également prendre une valeur facultative, utilisée comme
this lors de l'exécution de la fonction qui lui est transmise.
Par exemple, vérifiez si les valeurs de tous les éléments du tableau sont supérieures à 10.
const a = [11, 12, 13] const b = [5, 6, 25] const test = el => el > 10 console.log(a.every(test))
Ici, dans la fonction
test() , nous ne sommes intéressés que par le premier argument qui lui est passé, nous le déclarons donc, en spécifiant uniquement le paramètre
el , dans lequel la valeur correspondante tombera.
▍ Vérification d'un tableau à l'aide de la méthode some ()
Cette méthode est très similaire à la méthode
every() , mais elle retourne
true si au moins un des éléments du tableau satisfait la condition spécifiée par la fonction qui lui est passée.
▍Créez un tableau basé sur un tableau existant à l'aide de la méthode map ()
La méthode
map() des tableaux vous permet d'itérer sur les tableaux, en appliquant à chaque élément transmis à cette méthode une fonction qui convertit l'élément et crée de nouveaux tableaux à partir des valeurs reçues. Voici, par exemple, comment obtenir un nouveau tableau, qui est le résultat de la multiplication de tous les éléments du tableau d'origine par 2.
const a = [1, 2, 3] const double = el => el * 2 const doubleA = a.map(double) console.log(a)
▍ Filtrage d'un tableau à l'aide de la méthode filter ()
La méthode
filter() est similaire à la méthode
map() , mais elle vous permet de créer de nouveaux tableaux contenant uniquement les éléments des tableaux d'origine qui remplissent la condition spécifiée par la méthode
filter() passée à la fonction.
▍ méthode Reduce ()
La méthode
reduce() vous permet d'appliquer une fonction donnée à l'accumulateur et à chaque valeur du tableau, en réduisant le tableau à une seule valeur (cette valeur peut avoir un type primitif ou objet). Cette méthode prend une fonction de conversion et une valeur de batterie initiale facultative. Prenons un exemple.
const a = [1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { return accumulator * currentValue }, 1) console.log(a)
Ici, nous recherchons le produit de tous les éléments du tableau décrit à l'aide d'un littéral, définissant la valeur initiale de l'accumulateur 1.
▍ Énumération d'un tableau à l'aide de la méthode forEach ()
La méthode
forEach() des tableaux peut être utilisée pour itérer sur les valeurs des tableaux et pour effectuer certaines actions sur eux, spécifiées par la fonction passée à la méthode. Par exemple, nous affichons, un à la fois, les éléments du tableau dans la console.
const a = [1, 2, 3] a.forEach(el => console.log(el))
Si vous devez arrêter ou interrompre la boucle lors de l'itération sur un tableau, alors lorsque vous utilisez
forEach() devrez
forEach() une exception. Par conséquent, si au cours de la résolution d'un certain problème, il peut être nécessaire d'interrompre le cycle, il est préférable de choisir une autre manière d'itérer les éléments du tableau.
▍Sélection d'un tableau à l'aide de l'opérateur for ... of
L'opérateur
for...of est apparu dans la norme ES6. Il vous permet d'itérer sur des objets itérables (y compris des tableaux). Voici comment l'utiliser.
const a = [1, 2, 3] for (let v of a) { console.log(v) }
À chaque itération de la boucle, l'élément suivant du tableau
a entre dans la variable
v .
▍ Énumération d'un tableau à l'aide de l'instruction for
L'instruction
for vous permet d'organiser des boucles, qui, en particulier, peuvent être utilisées pour parcourir (ou initialiser) des tableaux en accédant à leurs éléments par index. En règle générale, l'indice de l'élément suivant est obtenu à l'aide d'un compteur de boucles.
const a = [1, 2, 3] for (let i = 0; i < a.length; i += 1) { console.log(a[i]) }
Si, pendant l'exécution de la boucle, vous devez ignorer son itération, vous pouvez utiliser la commande
continue . Pour terminer prématurément le cycle, vous pouvez utiliser la commande
break . Si vous utilisez la commande
return dans une boucle, par exemple, située dans une certaine fonction, la boucle et la fonction se termineront et la valeur retournée avec
return ira à l'endroit où la fonction a été appelée.
▍ Méthode @@ itérateur
Cette méthode est apparue dans la norme ES6. Il vous permet d'obtenir le soi-disant "itérateur d'un objet" - un objet qui dans ce cas vous permet d'organiser une itération des éléments du tableau. Un itérateur de tableau peut être obtenu en utilisant le symbole (ces symboles sont appelés "symboles connus")
Symbol.iterator . Après avoir reçu l'itérateur, vous pouvez accéder à sa méthode
next() , qui, à chaque appel, renvoie une structure de données contenant l'élément suivant du tableau.
const a = [1, 2, 3] let it = a[Symbol.iterator]() console.log(it.next().value)
Si vous appelez la méthode
next() fois le dernier élément du tableau atteint, elle renverra, en tant que valeur de l'élément,
undefined . L'objet renvoyé par la méthode
next() contient la
value et les propriétés
done . La propriété
done valeur
false jusqu'à ce que le dernier élément du tableau soit atteint. Dans notre cas, si nous l'appelons.next
it.next() pour la quatrième fois, il renverra l'objet
{ value: undefined, done: true } , tandis que dans les trois appels précédents, cet objet ressemblerait à
{ value: , done: false } .
La méthode du tableau
entries() renvoie un itérateur qui vous permet d'itérer sur les paires clé-valeur du tableau.
const a = [1, 2, 3] let it = a.entries() console.log(it.next().value)
La méthode
keys() vous permet d'itérer sur les clés d'un tableau.
const a = [1, 2, 3] let it = a.keys() console.log(it.next().value)
▍Ajout d'éléments à la fin d'un tableau
Pour ajouter des éléments à la fin du tableau, utilisez la méthode
push() .
a.push(4)
▍Ajout d'éléments au début du tableau
Pour ajouter des éléments au début du tableau, utilisez la méthode
unshift() .
a.unshift(0) a.unshift(-2, -1)
▍ Suppression des éléments du tableau
Vous pouvez supprimer un élément de la fin du tableau tout en renvoyant cet élément à l'aide de la méthode
pop() .
a.pop()
De même, en utilisant la méthode
shift() , vous pouvez supprimer un élément du début du tableau.
a.shift()
La même chose, mais indiquant déjà la position de la suppression des éléments et leur nombre, se fait en utilisant la méthode
splice() .
a.splice(0, 2)
▍ Suppression des éléments du tableau et insertion d'autres éléments à la place
Afin d'utiliser une opération pour supprimer certains éléments du tableau et insérer d'autres éléments à la place, la méthode familière
splice() est utilisée.
Par exemple, ici, nous supprimons 3 éléments du tableau à partir de l'index 2, après quoi nous ajoutons deux autres éléments au même endroit:
const a = [1, 2, 3, 4, 5, 6] a.splice(2, 3, 'a', 'b') console.log(a)
▍Combiner plusieurs tableaux
Pour combiner plusieurs tableaux, vous pouvez utiliser la méthode
concat() , qui renvoie un nouveau tableau.
const a = [1, 2] const b = [3, 4] const c = a.concat(b) console.log(c)
▍Trouver des éléments dans un tableau
Dans la norme ES5, la méthode
indexOf() est apparue, qui retourne l'index de la première occurrence de l'élément de tableau souhaité. Si l'élément est introuvable dans le tableau,
-1 est renvoyé.
const a = [1, 2, 3, 4, 5, 6, 7, 5, 8] console.log(a.indexOf(5))
La méthode
lastIndexOf() renvoie l'index de la dernière occurrence de l'élément dans le tableau, ou
-1 si l'élément n'est pas trouvé.
const a = [1, 2, 3, 4, 5, 6, 7, 5, 8] console.log(a.lastIndexOf(5))
Dans ES6, la méthode
find() des tableaux est apparue, qui effectue une recherche de tableau en utilisant la fonction qui lui est transmise. Si la fonction renvoie
true , la méthode renvoie la valeur du premier élément trouvé. Si l'élément est introuvable, la fonction retournera
undefined .
Son utilisation peut se présenter comme suit.
a.find(x => x.id === my_id)
Ici, dans un tableau contenant des objets, un élément est recherché, dont la propriété
id est égale à celle spécifiée.
La méthode
findIndex() est similaire à
find() , mais elle retourne l'index de l'élément trouvé ou
undefined .
La méthode
includes() est apparue dans ES7, ce qui vous permet de vérifier la présence d'un certain élément dans un tableau. Il renvoie
true ou
false , trouvant ou ne trouvant pas un élément intéressant le programmeur.
a.includes(value)
En utilisant cette méthode, il est possible de vérifier la présence de certains éléments et non du tableau entier, mais seulement d'une partie de celui-ci, en commençant par l'index spécifié lors de l'appel de cette méthode. L'index est spécifié à l'aide du deuxième paramètre facultatif de cette méthode.
a.includes(value, i)
▍ Obtention d'un fragment d'un tableau
Afin d'obtenir une copie d'un fragment du tableau en tant que nouveau tableau, vous pouvez utiliser la méthode
slice() . Si cette méthode est appelée sans arguments, le tableau renvoyé sera une copie complète de l'original. Il prend deux paramètres facultatifs. Le premier définit l'indice de départ du fragment, le second définit la fin. Si l'index de fin n'est pas spécifié, le tableau est copié de l'index de début spécifié vers la fin.
const a = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(a.slice(4))
▍Sort array
Pour organiser le tri des éléments du tableau par ordre alphabétique (
0-9A-Za-z ), la méthode
sort() est utilisée sans lui passer d'arguments.
const a = [1, 2, 3, 10, 11] a.sort() console.log(a)
Vous pouvez transmettre une fonction à cette méthode qui définit l'ordre de tri. La fonction accepte, pour la comparaison de deux éléments, les paramètres
a et
b . Il renvoie un nombre négatif si
a inférieur à
b selon un critère, 0 s'ils sont égaux et un nombre positif si
a supérieur à
b . Lors de l'écriture d'une fonction similaire pour trier des tableaux numériques, elle peut renvoyer le résultat de la soustraction de
a et
b . Ainsi, renvoyer le résultat de l'évaluation de l'expression
a - b signifie trier le tableau dans l'ordre croissant, renvoyer le résultat de l'évaluation de l'expression
b - a triera le tableau dans l'ordre décroissant.
const a = [1, 10, 3, 2, 11] console.log(a.sort((a, b) => a - b))
Pour inverser la séquence des éléments du tableau, vous pouvez utiliser la méthode
reverse() . Comme
sort() , il modifie le tableau pour lequel il est appelé.
▍Obtenir une représentation sous forme de chaîne d'un tableau
Pour obtenir une représentation sous forme de chaîne d'un tableau, vous pouvez utiliser sa
toString() .
a.toString()
Un résultat similaire est donné par la méthode
join() , appelée sans arguments.
a.join()
Pour cela, comme argument, vous pouvez passer les éléments séparateurs.
const a = [1, 10, 3, 2, 11] console.log(a.toString())
▍Création de copies de tableaux
Pour créer une copie du tableau en copiant les valeurs du tableau d'origine dans le nouveau tableau, vous pouvez utiliser la méthode
Array.from() . Il convient également pour créer des tableaux à partir d'objets de type tableau (à partir de chaînes, par exemple).
const a = 'a string' const b = Array.from(a) console.log(b)
La méthode
Array.of() peut également être utilisée pour copier des tableaux, ainsi que pour «assembler» des tableaux à partir de divers éléments. Par exemple, pour copier les éléments d'un tableau dans un autre, vous pouvez utiliser la construction suivante.
const a = [1, 10, 3, 2, 11] const b = Array.of(...a) console.log(b)
La méthode
copyWithin() est utilisée pour copier les éléments du tableau à un certain endroit de ce tableau lui-même. Son premier argument spécifie l'index initial de la position cible, le second l'index initial de la position de la source de l'élément et le troisième paramètre, facultatif, indique l'indice final de la position de la source de l'élément. Si vous ne le spécifiez pas, tout sera copié à l'emplacement spécifié du tableau, à partir de l'index initial de la position source jusqu'à la fin du tableau.
const a = [1, 2, 3, 4, 5] a.copyWithin(0, 2) console.log(a)
Cycles
En parlant des tableaux ci-dessus, nous avons déjà trouvé quelques façons d'organiser les boucles. Cependant, les boucles en JavaScript ne sont pas seulement utilisées pour travailler avec des tableaux, et nous avons considéré loin de tous leurs types. Par conséquent, nous allons maintenant consacrer un peu de temps à discuter des différentes manières d'organiser les boucles en JavaScript et parler de leurs fonctionnalités.
▍ pour boucle
Prenons un exemple d'application de ce cycle.
const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) { console.log(list[i])
Comme déjà mentionné, vous pouvez interrompre l'exécution d'une telle boucle à l'aide de la commande
break , et vous pouvez ignorer l'itération en cours et passer directement à la suivante à l'aide de la commande
continue .
▍ pour chaque cycle
Nous avons également discuté de ce cycle. Voici un exemple d'itération sur un tableau l'utilisant.
const list = ['a', 'b', 'c'] list.forEach((item, index) => { console.log(item)
Rappelez-vous que pour interrompre un tel cycle, il est nécessaire de lever une exception, c'est-à-dire que si vous devez l'interrompre lors de l'utilisation d'un cycle, il est préférable de choisir un autre cycle.
▍ Faire ... en boucle
C'est ce qu'on appelle le «cycle de postcondition». Une telle boucle sera exécutée au moins une fois avant de vérifier la condition de fin de la boucle.
const list = ['a', 'b', 'c'] let i = 0 do { console.log(list[i])
Il peut être interrompu à l'aide de la commande
break , vous pouvez passer à sa prochaine itération avec la commande
continue .
▍ en boucle
C'est ce que l'on appelle le «cycle préconditionné». Si, à l'entrée du cycle, la condition de poursuite du cycle est fausse, elle ne sera pas exécutée une seule fois.
const list = ['a', 'b', 'c'] let i = 0 while (i < list.length) { console.log(list[i])
▍ pour ... en boucle
Cette boucle vous permet d'itérer sur toutes les propriétés énumérées d'un objet par leurs noms.
let object = {a: 1, b: 2, c: 'three'} for (let property in object) { console.log(property)
▍ Cycle pour ... de
Le cycle
for...of combine la commodité du cycle
forEach et la possibilité d'interrompre son fonctionnement à l'aide d'outils ordinaires.
Notez qu'ici, dans l'en-tête de la boucle, le mot clé
const est utilisé et non, comme vous vous en doutez,
let . Si les variables à l'intérieur du bloc de boucle n'ont pas besoin d'être réaffectées, alors
const nous convient tout à fait.
Si nous comparons les boucles
for...in et
for...of , il s'avère que
for...in répète les noms des propriétés et
for...of - les valeurs des propriétés.
Boucles et étendues
Avec les boucles et les étendues variables, il existe une fonction JavaScript qui peut poser des problèmes au développeur. Pour résoudre ces problèmes,
let boucles, des étendues et des mots
let clés
var et
let .
Prenons un exemple.
const operations = [] for (var i = 0; i < 5; i++) { operations.push(() => { console.log(i) }) } for (const operation of operations) { operation() }
La boucle effectue 5 itérations, à chacune desquelles une nouvelle fonction est ajoutée au tableau d'
operations . Cette fonction affiche dans la console la valeur du compteur de boucle -
i . Une fois les fonctions ajoutées au tableau, nous parcourons ce tableau et appelons les fonctions qui en sont les éléments.
En exécutant un tel code, vous pouvez vous attendre au résultat affiché ci-dessous.
0 1 2 3 4
Mais en fait, il déduit ce qui suit.
5 5 5 5 5
Pourquoi en est-il ainsi? Le fait est qu'en tant que compteur de boucles, nous utilisons une variable déclarée à l'aide du mot clé
var .
Étant donné que les déclarations de ces variables remontent en haut de la portée, le code ci-dessus est similaire au suivant.
var i; const operations = [] for (i = 0; i < 5; i++) { operations.push(() => { console.log(i) }) } for (const operation of operations) { operation() }
En conséquence, il s'avère que dans la boucle
for...of , dans laquelle nous itérons sur le tableau, la variable
i est toujours visible, elle est 5, par conséquent, en se référant à
i dans toutes les fonctions, nous imprimons le nombre 5.
Comment changer le comportement du programme pour qu'il fasse ce qu'on attend de lui?
La solution la plus simple à ce problème consiste à utiliser le mot clé
let . Il, comme nous l'avons déjà dit, est apparu dans ES6, son utilisation vous permet de vous débarrasser de certaines bizarreries caractéristiques de
var .
En particulier, dans l'exemple ci-dessus, il suffit de changer
var pour
let et tout fonctionnera comme il se doit.
const operations = [] for (let i = 0; i < 5; i++) { operations.push(() => { console.log(i) }) } for (const operation of operations) { operation() }
Maintenant, à chaque itération de la boucle, chaque fonction ajoutée au tableau d'
operations obtient sa propre copie de
i . N'oubliez pas que dans cette situation, vous ne pouvez pas utiliser le mot clé
const , car la valeur de
i dans la boucle change.
Une autre façon de résoudre ce problème, qui était souvent utilisé avant la norme ES6, lorsque le mot clé
let n'était pas là, était d'utiliser IIFE.
Avec cette approche, la valeur de
i stockée dans la fermeture, et la fonction renvoyée par IIFE et ayant accès à la fermeture entre dans le tableau. Cette fonction peut être exécutée lorsqu'elle devient nécessaire. Voici à quoi ça ressemble.
const operations = [] for (var i = 0; i < 5; i++) { operations.push(((j) => { return () => console.log(j) })(i)) } for (const operation of operations) { operation() }
Résumé
Aujourd'hui, nous avons parlé des tableaux et des boucles en JavaScript. Le sujet de notre prochain article est la gestion des exceptions, les modèles d'utilisation des points-virgules et les littéraux de modèle.
Chers lecteurs! Quelles méthodes de travail avec les tableaux en JavaScript utilisez-vous le plus souvent?
