Maison > interface Web > js tutoriel > le corps du texte

Compréhension approfondie de la méthode forEach en javascript

yulia
Libérer: 2018-09-14 15:22:39
original
1541 Les gens l'ont consulté

J'ai étudié JavaScript en profondeur récemment et j'ai résumé quelques points de connaissances à partager avec vous. Cet article parle principalement de la méthode forEach des tableaux en JavaScript. Les amis qui en ont besoin peuvent s'y référer et l'apprendre.

La méthode forEach exécute la fonction de rappel une fois pour chaque élément du tableau qui contient une valeur valide dans l'ordre croissant. Les éléments qui ont été supprimés (à l'aide de la méthode daleta, etc.) ou les éléments non initialisés seront ignorés. (mais pas ceux qui indiquent qu'il s'agit d'un élément non défini) ; La méthode
accepte une fonction de rappel, et la fonction de rappel accepte trois paramètres : l'élément actuel, l'index et le tableau d'opérations. La méthode

var array1 = ['a', 'b', 'c'];
array1.forEach(function(element) {
  console.log(element);
});
// a
// b
// c
Copier après la connexion

forEach() exécute la fonction fournie une fois pour chaque élément du tableau.

Cas : la boucle for est convertie en forEach

Avant la conversion

const items = ['item1', 'item2', 'item3'];
const copy = [];
for (let i=0; i<items.length; i++) {
  copy.push(items[i])
}
Copier après la connexion

Après la conversion

const items = [&#39;item1&#39;, &#39;item2&#39;, &#39;item3&#39;];
const copy = [];
items.forEach(function(item){
  copy.push(item)
});
Copier après la connexion

Les résultats sont tous

copy: ["item1", "item2", "item3"]
Copier après la connexion

Cas : Imprimer le contenu du tableau

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
// 注意索引2被跳过了,因为在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[3] = 9
[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9
[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9
let xxx;
// undefined
[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9
Copier après la connexion

La plage parcourue par forEach sera déterminée avant que le rappel ne soit appelé pour la première fois. Les éléments ajoutés au tableau après avoir appelé forEach ne seront pas accessibles par le rappel. Si une valeur existante est modifiée, les valeurs transmises au rappel sont les valeurs actuellement forEach parcourues. Les éléments supprimés ne seront pas parcourus. Si l'élément visité est supprimé pendant l'itération (par exemple, en utilisant shift()), les éléments suivants seront ignorés - voir le code

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four
Copier après la connexion

Je ne sais pas si vous comprenez le code ci-dessus, mais il est parce que lorsque vous en exécutez deux, vous supprimez le premier élément du tableau. Cependant, l'élément avec l'index d'origine de 1 devient 0 après avoir supprimé l'élément précédent, et vous avez déjà exécuté 0, il ne sera donc pas exécuté sur le. côté exécution. La plage parcourue par forEach a été déterminée avant que la fonction de rappel ne soit appelée pour la première fois, et les éléments supprimés ne seront pas parcourus.

Regardons un exemple, changez-le légèrement :

var words = ["one", "two", "three","", "four"];
words.forEach(function(word) {
words =  ["one", "two", "three","fix", "four"];
  console.log(word);
  if (word === "two") {
    words.shift();
 }
});
// one
// two
// three
//  
// four
Copier après la connexion

Lorsque l'index ci-dessus est 3, le résultat de sortie est vide, même si vous l'avez réaffecté une fois, prenons un regardez les résultats des mots :

console.log(words)
// ["one", "two", "three", "fix", "four"]
Copier après la connexion

Ce qui précède est mon résumé, et j'espère que vous pourrez en ajouter d'autres.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal