Explication détaillée des méthodes forEach, $.each et map en JavaScript

Dans notre article précédent, nous vous avons présenté une explication détaillée de l'instruction foreach en php, ainsi qu'une introduction à l'utilisation de foreach et each, donc aujourd'hui nous allons vous présenter orEach et $.each en JS et description détaillée de la méthode map !

forEach est la plus basique des nouvelles méthodes Array d'ECMA5, qui est le parcours et le bouclage. Par exemple, l'exemple suivant :

[1, 2 ,3, 4].forEach(alert);

est équivalent à la for boucle

var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {
 alert(array[k]);
}

Array dans la nouvelle méthode d'ES5, les paramètres sont Le type de fonction a des paramètres passés par défaut. Le rappel de fonction dans la méthode forEach prend en charge 3 paramètres. Le premier est le contenu du tableau parcouru, le second est l'index du tableau correspondant et le troisième est le tableau lui-même.

Donc, nous avons :

[].forEach(function(value, index, array) {
  // ...
});

contre la méthode $.each dans jQuery :

$.each([], function(index, value, array) {
  // ...
});

Vous constaterez que les premier et deuxième paramètres sont exactement opposés. Veuillez faire attention et ne pas vous tromper. La même chose est vraie pour des méthodes similaires ultérieures, telles que $.map.

var data=[1,3,4] ; 
var sum=0 ;
data.forEach(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  sum+=val            
})
console.log(sum);          // ==> 8

carte

La carte ici ne signifie pas « carte », mais « cartographie ». [].map(); L'utilisation de base est similaire à la méthode forEach :

array.map(callback,[ thisObject]);

Les paramètres de rappel sont également similaires :

[].map(function(value, index, array) {
  // ...
});

La fonction de la méthode map est pas difficile à comprendre, c'est du "mapping", c'est-à-dire que le tableau d'origine est "mappé" dans le nouveau tableau correspondant. L'exemple suivant consiste à trouver le carré d'un élément numérique :

var data=[1,3,4]

var Squares=data.map(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  return val*val           
})
console.log(Squares);        // ==> [1, 9, 16]

Remarque : étant donné que forEach et map sont deux nouvelles méthodes de tableau dans ECMA5, les navigateurs inférieurs à IE9 ne le prennent pas encore en charge (Merde IE), mais Eh bien, vous pouvez étendre le prototype Array pour réaliser toutes les fonctions ci-dessus, telles que la méthode forEach :

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function() {
    /* 实现 */
  };
}

Résumé :

Cet article présente en détail les méthodes forEach, $.each et map en JavaScript Leur utilisation est fondamentalement similaire. Vous pouvez choisir en fonction de vos propres besoins !
Recommandations associées :

Une brève introduction à foreach et each dans JS

Explication détaillée de la syntaxe Foreach en JavaScript

FOREACH en javascript Exemples d'utilisation de méthodes de tableau

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!