Zusammenfassung der Wissenspunkte zu neuen Methoden in ES6-Arrays

Iterationsmethoden:

ECMAScript definiert 5 Iterationsmethoden für Arrays. Jede Methode erhält zwei Parameter: eine Funktion, die mit jedem Element als Argument ausgeführt wird, und ein optionales Bereichsobjekt als Kontext, in dem die Funktion ausgeführt wird (was sich auf den Wert dieses Elements in der Funktion auswirkt). Die an jede Methode übergebene Funktion empfängt drei Parameter: das Array-Element, den Elementindex und das Array selbst. Abhängig von der spezifischen Methode können die Ergebnisse dieser Funktion den Rückgabewert der Methode beeinflussen oder auch nicht. Die 5 Iterationsmethoden des Arrays sind wie folgt.

1. Kartenmethode: Führen Sie die übergebene Funktion für jedes Element des Arrays aus und geben Sie ein Array zurück, das aus den Ergebnissen jedes Funktionsaufrufs besteht.

Dies kann auch so verstanden werden: Nach der Durchführung einer speziellen Verarbeitung für jedes Element im Array wird ein neues Array zurückgegeben .

Beispiel:

Vor der Vereinfachung des Preisarrays:

letprices=[50,80,90]
Preise=Preise.map((item,index)=>{
     Artikel zurückgeben + „Yuan“
})

Nach der Abkürzung von

console.log(prices)

let price=[50,80,120]
//Fügen Sie „Yuan“ nach dem Stückpreis hinzu
preis=preis.map(item=>item+"yuan")
console.log(price)//Die Ausgabe ist ['50 Yuan', '80 Yuan', '90 Yuan']

Sein Anwendungsszenario ist zum Beispiel: Das WeChat-Applet Douban Film Review

verwendet die Kartenmethode, um xxx durch www zu ersetzen

( ) -Methode Wird verwendet, um einige Zeichen durch andere Zeichen in einer Zeichenfolge zu ersetzen oder eine Teilzeichenfolge zu ersetzen, die einem regulären Ausdruck entspricht.

let movies=[{id:1,name:"Shawshank Redemption",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"Shawshank Redemption",imgUrl :" http://xxx.douban.com/2.jpg"},{id:3,name:"Shawshank Redemption",imgUrl:"http://xxx.douban.com/1.jpg"}]
        movies=movies.map(item=>{
            item.imgUrl=item.imgUrl.replace("xxx","www")
            Artikel zurücksenden
        })
        console.log(movies)

2. Filtermethode: Führen Sie die übergebene Funktion für jedes Element des Arrays aus. Die Elemente, die die Funktion „true“ zurückgibt, bilden ein Array und geben es zurück.

Es kann auch so verstanden werden: Filtern Sie die Elemente im Array heraus, die den Anforderungen entsprechen, und geben Sie ein neues Array zurück.

Let Scores = [80,59,10,55,90,88]
        let arr=scores.filter(item=>{
			if(item>60){
				Rückkehr wahr
			}
		})
		console.log(arr)//Die Ausgabe ist wie unten gezeigt:

Die Ausgabe ist wie unten gezeigt und filtert Arrays mit weniger als 60 heraus

Nach der Abkürzung:

let scores=[80,59,10,55,90,88]
let arr=scores.filter(item=>item>=60)
console.log(arr)//(3) [80, 90, 88]

In seinem Anwendungsszenario können Sie ein Array von Städtenamen platzieren und dann nach Schlüsselwörtern suchen. Dies ist nur für den Fall gedacht, dass die Daten klein sind Ein Buch über das Beispiel wird später in den Anwendungsszenarien des Managementsystems nach Schlüsselwörtern gesucht.

Drei und vier, some und every-Methoden

werden im Englischen als some übersetzt, und every wird als all, every übersetzt, sodass die some-Methode „true“ zurückgibt, solange eine von ihnen „true“ ist.

Methode

muss alle „true“ zurückgeben, auch wenn es ein „false“ gibt.

Während des Array-Beurteilungsprozesses wird beurteilt, ob jedes Element des Ganzen eine grundlegende Anforderung erfüllt

true, solange einer von ihnen übereinstimmt, wird true zurückgegeben.
Jede Methode: Ein false ist falsch. Solange einer von ihnen die Anforderungen nicht erfüllt, wird false zurückgegeben.

// Lassen Sie die Ergebnisse aller Schüler in einer Klasse anzeigen, um zu sehen, ob alle bestanden haben. Let Scores = [80,49,12 ,50,69 ]
         let result=scores.every(item=>item>=60)
         console.log(result)//Return false Nicht alle werden bestanden

Verwendungsszenarien: Bevor der Front-End-Validator eine AJAX-Anfrage sendet, muss er normalerweise alle Überprüfungen bestehen, bevor er gesendet werden kann Artikel über Codebeispiele.

Merge-Methode:

5. Reduce-Methode: ECMAScript bietet zwei Merge-Methoden für Arrays: Reduce() und ReduceRight(). Beide Methoden durchlaufen alle Elemente des Arrays und konstruieren darauf basierend einen endgültigen Rückgabewert. Die Methode „reduce()“ durchläuft vom ersten Element zum letzten Element im Array. Und reduRight() geht vom letzten Element zum ersten Element. Es kann auch einfach so verstanden werden: die Elemente in das Array integrieren und einen neuen Inhalt zurückgeben.

Beide Methoden akzeptieren zwei Parameter: eine Zusammenführungsfunktion, die für jedes Element ausgeführt wird, und einen optionalen Anfangswert, von dem aus die Zusammenführung gestartet wird. Die an Reduce() und ReduceRight() übergebenen Funktionen empfangen vier Parameter: den vorherigen zusammengeführten Wert, das aktuelle Element, den Index des aktuellen Elements und das Array selbst. Jeder von dieser Funktion zurückgegebene Wert wird als erstes Argument beim nächsten Aufruf derselben Funktion verwendet. Wenn der optionale zweite Parameter (als Startwert für die Zusammenführung) nicht an diese beiden Methoden übergeben wird, beginnt die erste Iteration mit dem zweiten Element des Arrays, sodass der erste Parameter, der an die Zusammenführungsfunktion übergeben wird, das erste Element ist. Der zweite Parameter ist das zweite Element des Arrays.

Verstehen Sie das Konzept zunächst anhand des folgenden Codes:

Die Bedeutung der vier Parameter im folgenden Code:

• prev: Das von der vorherigen Operation zurückgegebene Ergebnis

• . Element: Das Element dieser Operation.

• Index: Der Indexwert des Elements dieser Operation

• . Array: the Array der aktuellen Operation

let arr =[20,40,50,21]
        let Values=arr.reduce((prev,item,index,array)=>{
            console.log("prev"+prev)
            console.log("item"+item)
            console.log("index"+index)
            console.log("array"+array)
            console.log("____________________")
        })

Die Ausgabe ist:

Warum wird die Schleife nur dreimal wiederholt? Prev kann einen Standardwert festlegen. Wenn der Standardwert nicht festgelegt ist, ist das erste Element das erste Prev.
Warum wird prev in der zweiten und dritten Schleife undefiniert? In der zweiten Schleife müssen Sie den Rückgabewert der ersten Schleife abrufen, da der Rückgabewert beim ersten Mal nicht festgelegt wurde.

Wenn Sie das oben Gesagte verstanden haben, beginnen wir mit der Implementierung der Array-Summierung:

let arr=[20 ,40,50,21]
        let Values=arr.reduce((prev,item,index,array)=>{
            console.log("prev"+prev)
            Rückgabe von prev+item
 //Gebe einen Return und eine viermalige Schleife. Beim ersten Mal ist die Ausgabe prev 20, beim zweiten Mal ist 40+20 60, beim dritten Mal ist sie 110 und beim letzten Mal wird 131 ausgegeben.
        })
        console.log(values) //131

Wann muss der Standardwert von prev festgelegt werden?

Fügen Sie <li> </li> zu jedem Array-Element hinzu.

let arr=["Eason Chan", "Miriam Yeung", "Juji Ku", "Hacken Lee"]
//Legen Sie einen Standardwert für prev fest: Funktion 1. Alle Elemente nehmen an der Schleife teil 2. Bestimmen Sie den Rückgabeinhalt let result=arr.reduce((prev,item)=>{
      //console.log(prev)
      return prev+"<li>"+item+"</li>"
},"")//Eine leere Zeichenfolge hinzufügen console.log(result)//<li>Eason Chan</li><li>Miriam Yeung</li><li>Juji Ku</li><li>Keqin Li</li> li>

Nehmen wir einen anderen Fall:

Verwenden Sie Reduzieren, um eine Array-Deduplizierung zu erreichen, erstellen Sie ein leeres Array, durchlaufen Sie das ursprüngliche Array der Reihe nach, fügen Sie ein, was nicht im leeren Array enthalten ist, und was nicht eingefügt wird, wird nicht mehr eingefügt

let arr=["Zhang San", "Li Si", "Li Si", "Wang Er", "Li Si", "Mazi", "Zhang San"]
        let result=arr.reduce((prev,item)=>{
            //Includes bestimmt, ob ein angegebenes Element vorhanden ist und gibt t zurück, andernfalls gibt es f zurück.
            if(!prev.includes(item)){
                prev.push(item) //.push() fügt dem Array ein neues Element hinzu}
            Rückkehr vorh
        },[])//Legen Sie ein leeres Standardarray fest console.log(result)//(4) ['Zhang San', 'Li Si', 'Wang Er', 'Mazi']

Ein anderer Fall: (Reduzierungsmethode Sie kann viele Dinge tun)

Zählen Sie die Anzahl der Vorkommen von Zeichen: Sehen Sie sich den Code unten an

let arr=["a","b","a","c","b","a","c"]
        //Ein Objekt zurückgeben, um die Anzahl der Vorkommen jedes Zeichens zu zählen {a:2,w:3}
        let result=arr.reduce((prev,item)=>{
            // //Bestimmen Sie, ob das Objekt entsprechende Attribute hat if(item in prev){
                 //Suchen Sie den entsprechenden Attributwert++  
                 prev[item]++ // Wenn Sie in Zukunft Objektattribute festlegen oder abrufen möchten, wird dieses Attribut durch eine Variable in Form von Klammern []++ dargestellt, wenn dies direkt der Fall ist. Der Attributname wird in sein die Form von.}else{
                 prev[item]=1
             }
             Rückkehr vorh
        },{})
        console.log(result)//{a: 3, b: 2, c: 2}