Extras de tableaux en javascript

Les tableaux JavaScript sont une structure de données de base dans de nombreux langages de programmation, et JavaScript ne fait pas exception. Pour simplifier de nombreux détails du travail avec les tableaux, JavaScript fournit un ensemble de fonctionnalités appelées fonctions d'extension de tableau. Cet article présente diverses fonctions d'extension de tableau et leurs utilisations.

Points clés

• Les fonctions d'extension du tableau dans JavaScript sont des fonctions qui simplifient de nombreux détails du travail avec des tableaux, améliorant la lisibilité du code en remplaçant des boucles complexes par des appels de fonction. Ils comprennent des méthodes telles que forEach(), map(), filter(), every(), some(), reduce(), reduceRight(), indexOf(), lastIndexOf(),
et
• . forEach() La méthode
• élimine le besoin de boucles et de notation des indices de tableau en appelant une fonction de rappel sur chaque élément du tableau. Cependant, cela peut entraîner une dégradation des performances en raison de l'appel de la fonction pour chaque élément. map() La fonction forEach() filter() est similaire à
, mais il renvoie un tableau contenant les valeurs renvoyées par la fonction de rappel. La méthode
• renvoie également un tableau de valeurs, mais il est basé sur la valeur de retour de la fonction de rappel qui devrait renvoyer une valeur booléenne. reduce() La méthode reduceRight() indexOf() traite chaque élément du tableau, calcule une seule valeur, tandis que lastIndexOf() fonctionne de la même manière, mais commence à la fin du tableau. La méthode
recherche des éléments spécifiques dans le tableau, et

fait également la même chose, mais commence la recherche depuis la fin du tableau.

arrière-plan

for

Presque toutes les opérations du tableau sont effectuées en traversant chaque élément de tableau à la fois. Par exemple, le code suivant utilise une boucle

<code class="language-javascript">var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}</code>

pour enregistrer tous les éléments d'un tableau à la console de débogage.

Tout d'abord et surtout, vous devez comprendre que l'exemple précédent est un code JavaScript complètement valide. Cependant, si vous avez plusieurs boucles complexes, le suivi des variables peut devenir fastidieux. Les fonctions d'extension du tableau nous permettent de remplacer la boucle entière par des appels de fonction, ce qui peut généralement améliorer la lisibilité du code. Maintenant, jetons un coup d'œil à diverses fonctions d'extension de tableau.

foreach ()

forEach() Comme de nombreuses fonctions d'extension de tableau, la méthode est une fonction forEach() d'ordre supérieur forEach() - une fonction qui reçoit une autre fonction en tant que paramètre.

Au lieu de traverser les éléments du tableau, la fonction de rappel est appelée chaque élément de séquence. La fonction de rappel accepte trois paramètres: l'élément de tableau actuel, l'indice de tableau et le tableau lui-même. Dans le code suivant, l'exemple d'origine a été réécrit pour utiliser la méthode .

<code class="language-javascript">var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}</code>

Notez que l'utilisation de forEach() élimine le besoin de notation des indices de boucle et de tableau. De plus, puisque JavaScript utilise des lunettes au niveau de la fonction, la fonction de rappel forEach() fournit une nouvelle portée qui permet la réutilisation des noms de variables. Le seul inconvénient est la perte de performances subie en appelant la fonction pour chaque élément du tableau. Heureusement, cette perte est souvent négligeable. Notez également que vous pouvez transmettre un paramètre facultatif à forEach() après la fonction de rappel. S'il est présent, le deuxième paramètre définit la valeur this utilisée dans la fonction de rappel.

map ()

La fonction

map() est presque la même que forEach(). La seule différence est que map() renvoie un tableau contenant les valeurs renvoyées par la fonction de rappel. Par exemple, le code suivant utilise map() pour calculer la racine carrée de chaque élément dans le tableau d'entrée. Retournez ensuite le résultat en tant que tableau et affichez-le. Notez également que les fonctions d'extension du tableau sont compatibles avec les fonctions JavaScript intégrées telles que Math.sqrt().

<code class="language-javascript">["a", "b", "c", "d"].forEach(function(element, index, array) {
  console.log(element);
});</code>

filtre ()

comme forEach() et map(), la méthode filter() accepte une fonction de rappel et une valeur this facultative. Et, comme map(), filter() renvoie un tableau de valeurs basées sur la valeur de retour de la fonction de rappel. La différence est que la fonction de rappel filter() doit renvoyer une valeur booléenne. Si la valeur de retour est vraie, ajoutez l'élément de tableau au tableau de résultat. Par exemple, le code suivant supprime tout élément du tableau d'origine qui ne commence pas par la lettre x. Dans cet exemple, l'expression régulière (passée en tant que valeur this) sera testée pour chaque élément de tableau.

<code class="language-javascript">var sqrts = [1, 4, 9, 16, 25].map(Math.sqrt);

console.log(sqrts);
// 显示 "[1, 2, 3, 4, 5]"</code>

chaque () et certains ()

Les fonctions

every() et some() exécutent également les fonctions de rappel sur chaque élément de tableau. Si chaque fonction de rappel renvoie true, every() renvoie true, sinon faux. De même, si au moins une fonction de rappel renvoie true, some() renvoie true. Dans l'exemple suivant, every() et some() sont utilisés pour tester si l'élément de tableau est inférieur à cinq. Dans ce cas, every() renvoie false car le dernier élément est égal à cinq. Cependant, some() renvoie True car au moins un élément est inférieur à cinq. Notez que les paramètres d'index et de tableau existent, mais ont été omis de la fonction de rappel, car ils ne sont pas nécessaires dans cet exemple.

<code class="language-javascript">["x", "abc", "x1", "xyz"].filter(RegExp.prototype.test, /^x/);</code>

réduire () et reduceRight ()

La méthode

reduce() traite chaque élément du tableau (à partir du début) et calcule une seule valeur. reduce() Préférez la fonction de rappel et la valeur initiale facultative comme paramètres. Si aucune valeur initiale n'existe, le premier élément de tableau est utilisé. reduce() La fonction de rappel est différente des autres fonctions de rappel que nous avons vues jusqu'à présent en ce qu'elle accepte quatre paramètres: la valeur précédente, la valeur actuelle, l'index et le tableau. Un exemple courant des opérations reduce consiste à ajouter toutes les valeurs d'un tableau. L'exemple suivant fait exactement cela. Lorsque la fonction de rappel est appelée pour la première fois, previous est égal à 1 et current est égal à 2. Dans les appels ultérieurs, la somme s'accumule à la valeur finale 15.

<code class="language-javascript">var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}</code>

La méthode

reduceRight() fonctionne de la même manière que reduce(), sauf que le processus commence à partir de la fin du tableau et se déplace vers le début.

indexof () et lastIndexof ()

La méthode

indexOf() recherche un élément spécifique dans le tableau et renvoie l'index de la première correspondance. Si aucune correspondance n'est trouvée, indexOf() renvoie -1. indexOf() s'il vous plaît l'élément à rechercher comme son premier paramètre. Le deuxième paramètre facultatif spécifie l'index de démarrage de la recherche. Par exemple, le code suivant recherche les deux premières occurrences de la lettre Z dans le tableau. Pour trouver la deuxième apparition, nous avons juste besoin de trouver la première apparition et de recommencer à chercher après.

<code class="language-javascript">["a", "b", "c", "d"].forEach(function(element, index, array) {
  console.log(element);
});</code>

La méthode

lastIndexOf() fonctionne exactement de la même manière, sauf qu'elle commence à rechercher à partir de la fin du tableau.

Conclusion

Utilisez des fonctions d'extension du tableau pour écrire du code concis et effacer. Malheureusement, certains navigateurs plus âgés ne soutiennent pas ces méthodes. Cependant, vous pouvez détecter ces méthodes en vérifiant l'objet Array.prototype (c'est-à-dire Array.prototype.forEach). Si une méthode est manquante, vous pouvez facilement fournir votre propre implémentation.

(La partie FAQ doit être ajoutée ici, le contenu est le même que la partie FAQ dans le texte d'entrée, mais les modifications pseudo-originales correspondantes sont requises, telles que l'ajustement de l'ordre de l'instruction, remplaçant les synonymes, etc.)

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!