Introduction aux méthodes forEach, $.each et map en JS

L'éditeur suivant vous apportera une recommandation pour les méthodes forEach, $.each et map en JS. L'éditeur le trouve plutôt bien, j'aimerais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

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 à ce qui suit for loop

var array = [1, 2, 3, 4];

for (var k = 0, length = array.length; k < length; k++) {

alert(array[k]) ;

}

Array Dans les nouvelles méthodes d'ES5, les paramètres sont tous des types de fonctions et les paramètres sont 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 deuxième est l'index du tableau correspondant et le troisième est le tableau lui-même.

Donc, nous avons :

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

// ...

}) ;

Comparez la méthode $.each dans jQuery :

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

// ...

});

Vous trouverez que, les premier et deuxième paramètres sont exactement opposés. Veuillez faire attention et ne vous en souvenez pas mal. 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

map

La carte ici n'est pas une « carte » signifie « 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) {

// ...

});

Le rôle de la méthode map n'est pas difficile à comprendre. Il s'agit du « mappage », c'est-à-dire que le tableau d'origine est « mappé » dans le nouveau correspondant. tableau. L'exemple suivant consiste à mettre au carré 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(Carrés); // ==> [1, 9, 16]

Remarque : étant donné que forEach et map sont les nouvelles méthodes de tableau d'ECMA5, les navigateurs inférieurs à IE9 ne le prennent pas encore en charge (ce foutu IE). Cependant, toutes les fonctions ci-dessus peuvent être obtenues en étendant le prototype Array, comme la méthode forEach :

if (typeof Array.prototype.forEach != "function") {

Array.prototype.forEach = function() {

/* Implémentation*/

};

}

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!