5 Array-Array-Methoden: indexOf, filter, forEach, map, reduzieren, Verwendungsbeispiele_Javascript-Kenntnisse

Der ECMAScript5-Standard wurde am 3. Dezember 2009 veröffentlicht. Er bringt einige neue Methoden mit sich, um bestehende Array-Array-Operationen zu verbessern. Allerdings konnten sich diese neuartigen Array-Methoden nie wirklich durchsetzen, da es zu dieser Zeit einen Mangel an ES5-fähigen Browsern auf dem Markt gab.

Array „Extras“

Niemand zweifelt an der Praktikabilität dieser Methoden, aber das Schreiben von Polyfills (PS: Plug-ins, die mit älteren Browsern kompatibel sind) lohnt sich für sie nicht. Aus „muss erreicht werden“ wird „am besten erreicht“. Manche Leute nennen diese Array-Methoden tatsächlich Array „Extras“. Warum!

Aber die Zeiten ändern sich. Wenn Sie sich beliebte Open-Source-JS-Projekte auf Github ansehen, werden Sie feststellen, dass sich das Blatt wendet. Jeder möchte viele Abhängigkeiten (von Bibliotheken von Drittanbietern) reduzieren und nur lokalen Code verwenden, um dies zu erreichen.

Okay, fangen wir an.

Meine 5 Arrays

In ES5 gibt es insgesamt 9 Array-Methoden http://kangax.github.io/compat-table/es5/

Hinweis* Neun Methoden

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

Ich werde fünf Methoden auswählen, die meiner Meinung nach am nützlichsten sind und auf die viele Entwickler stoßen werden.

1) indexOf

Die Methode indexOf() gibt die Position des ersten im Array gefundenen Elements zurück oder -1, wenn es nicht existiert.

Wenn indexOf nicht verwendet wird

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);

Nach Gebrauch

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

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

2) Filter

Die Methode filter() erstellt ein neues Array, das den Filterbedingungen entspricht.

Wenn filter() nicht verwendet wird

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);

Verwendeter Filter():

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) forEach()

forEach führt für jedes Element die entsprechende Methode aus

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 wird verwendet, um die for-Schleife zu ersetzen

4) map()

Nachdem map() bestimmte Operationen (Mapping) für jedes Element des Arrays ausgeführt hat, gibt es ein neues Array zurück,

Keine Karte verwenden

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());

Nach Verwendung der Karte

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() ist eine sehr praktische Funktion bei der Verarbeitung der vom Server zurückgegebenen Daten.

5) Reduce()

reduce() kann die Funktion eines Akkumulators implementieren und jeden Wert des Arrays (von links nach rechts) auf einen Wert reduzieren.

Um ehrlich zu sein, war es zunächst etwas schwierig, diesen Satz zu verstehen, weil er zu abstrakt ist.

Szenario: Zählen Sie, wie viele eindeutige Wörter es in einem Array gibt

Wenn Reduzieren nicht verwendet wird

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());

Nach der Verwendung von Reduce()

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());

Lassen Sie mich zunächst mein eigenes Verständnis von Reduzieren erläutern. Reduce(Callback, InitialValue) übergibt zwei Variablen. Rückruffunktion (Callback) und Anfangswert (initialValue). Gehen Sie davon aus, dass die Funktion eingehende Parameter hat: prev und next, index und array. Sie müssen Prev und Next verstehen.

Im Allgemeinen beginnt prev mit dem ersten Element im Array und next ist das zweite Element. Wenn Sie jedoch den Anfangswert (initialValue) übergeben, ist das erste prev der initialValue und das next das erste Element im Array.

Zum Beispiel:

/*
* 二者的区别，在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());