5 méthodes Array : indexOf, filter, forEach, map, réduire les exemples d'utilisation_compétences javascript

Le standard ECMAScript5 a été publié le 3 décembre 2009. Il apporte de nouvelles méthodes pour améliorer les opérations sur les tableaux Array existantes. Cependant, ces nouvelles méthodes de création de tableaux n’ont jamais vraiment fait leur chemin en raison du manque de navigateurs compatibles ES5 sur le marché à l’époque.

Tableau "Extras"

Personne ne doute de la praticité de ces méthodes, mais écrire des polyfills (PS : plug-ins compatibles avec les anciens navigateurs) n'en vaut pas la peine pour eux. Cela transforme le « doit être réalisé » en « le mieux réalisé ». Certaines personnes appellent en fait ces méthodes de tableau Array « Extras ». Pourquoi!

Mais les temps changent. Si vous regardez les projets JS open source populaires sur Github, vous verrez que le vent tourne. Tout le monde veut réduire de nombreuses dépendances (sur des bibliothèques tierces) et utiliser uniquement du code local pour y parvenir.

D’accord, commençons.

Mes 5 tableaux

Dans ES5, il existe un total de 9 méthodes Array http://kangax.github.io/compat-table/es5/

Remarque* Neuf méthodes

Array.prototype.indexOf
Array.prototype.lastIndexOf
Tableau.prototype.every
Tableau.prototype.some
Array.prototype.forEach
Array.prototype.map
Tableau.prototype.filter
Tableau.prototype.reduce
Array.prototype.reduceRight

Je vais choisir 5 méthodes que je considère personnellement comme les plus utiles et que de nombreux développeurs rencontreront.

1) indexDe

La méthode indexOf() renvoie la position du premier élément trouvé dans le tableau, ou -1 s'il n'existe pas.

Lorsque vous n'utilisez pas indexOf

var arr = ['apple','orange','pear'],
found = false;

for(var i= 0, l = arr.length; i< l; i++){
if(arr[i] === 'orange'){
found = true;
}
}

console.log("found:",found);

Après utilisation

var arr = ['apple','orange','pear'];

console.log("found:", arr.indexOf("orange") != -1);

2) filtre

La méthode filter() crée un nouveau tableau correspondant aux conditions du filtre.

Lorsque filter() n'est pas utilisé

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
  
var newArr = [];

for(var i= 0, l = arr.length; i< l; i++){
  if(arr[i].name === "orange" ){
newArr.push(arr[i]);
}
}

console.log("Filter results:",newArr);

Filtre utilisé() :

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
  
var newArr = arr.filter(function(item){
  return item.name === "orange";
});


console.log("Filter results:",newArr);

3) pourEach()

forEach exécute la méthode correspondante pour chaque élément

var arr = [1,2,3,4,5,6,7,8];

// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}

console.log("========================");

//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});

forEach est utilisé pour remplacer la boucle for

4) carte()

Après que map() ait effectué certaines opérations (mappage) sur chaque élément du tableau, il renverra un nouveau tableau,

Ne pas utiliser la carte

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){
  
  var newArr = [];
  
  for(var i= 0, l = oldArr.length; i< l; i++){
    var item = oldArr[i];
    item.full_name = [item.first_name,item.last_name].join(" ");
    newArr[i] = item;
  }
  
  return newArr;
}

console.log(getNewArr());

Après avoir utilisé la carte

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){
    
  return oldArr.map(function(item,index){
    item.full_name = [item.first_name,item.last_name].join(" ");
    return item;
  });
  
}

console.log(getNewArr());

map() est une fonction très pratique lors du traitement des données renvoyées par le serveur.

5) réduire()

reduce() peut implémenter la fonction d'un accumulateur, réduisant chaque valeur du tableau (de gauche à droite) à une valeur.

Pour être honnête, c'était un peu difficile de comprendre cette phrase au début car elle est trop abstraite.

Scénario : comptez le nombre de mots uniques dans un tableau

Lorsque la réduction n'est pas utilisée

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
  var obj = {};
  
  for(var i= 0, l = arr.length; i< l; i++){
    var item = arr[i];
    obj[item] = (obj[item] +1 ) || 1;
  }
  
  return obj;
}

console.log(getWordCnt());

Après avoir utilisé réduire()

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
  return arr.reduce(function(prev,next){
    prev[next] = (prev[next] + 1) || 1;
    return prev;
  },{});
}

console.log(getWordCnt());

Permettez-moi d'abord d'expliquer ma propre compréhension de la réduction. réduire(callback, initialValue) passera deux variables. Fonction de rappel (callback) et valeur initiale (initialValue). Supposons que la fonction ait des paramètres entrants, prev et next, index et array. Vous devez comprendre le précédent et le suivant.

De manière générale, prev commence à partir du premier élément du tableau et next est le deuxième élément. Mais lorsque vous transmettez la valeur initiale (initialValue), le premier précédent sera la valeur initiale et le suivant sera le premier élément du tableau.

Par exemple :

/*
* 二者的区别，在console中运行一下即可知晓
*/

var arr = ["apple","orange"];

function noPassValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
    
    return prev + " " +next;
  });
}
function passValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
    
    prev[next] = 1;
    return prev;
  },{});
}

console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());