15 JavaScript-Methoden zum Arbeiten mit Arrays, die Sie im Jahr 2020 kennen müssen

Hier ist eine Übersetzung eines Artikels, der auf dev.to veröffentlicht wurde. Gepostet von: Ibrahima Ndaw .
Das Original wird im Blog des Autors veröffentlicht.

Ein Array in JavaScript ist eine spezielle Datenstruktur, in der verschiedene Elemente gespeichert werden. Mithilfe der integrierten Eigenschaften und Methoden können Sie Daten Ihren Anforderungen entsprechend hinzufügen, löschen, iterieren oder verarbeiten. Wenn Sie wissen, wie Sie mit Arrays in JavaScript arbeiten, werden Sie Ihre beruflichen Entwicklungsfähigkeiten auf die nächste Stufe heben.

In diesem Artikel werden 15 Methoden behandelt, mit denen Sie effizienter mit Arrays in JavaScript arbeiten können.



Bitte beachten Sie, dass wir die als Parameter übergebene Funktion grundsätzlich vereinfachen.

// Instead of using this way myAwesomeArray.some(test => { if (test === "d") { return test } }) // We'll use the shorter one myAwesomeArray.some(test => test === "d") 

1. einige ()

Diese Methode überprüft, ob ein Element des Arrays die in der übergebenen Funktion angegebene Bedingung erfüllt. Es wird true wenn mindestens ein Element mit der getesteten Funktion übereinstimmt, andernfalls false .

 const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.some(test => test === "d") //-------> Output : true 

2. Verkleinern ()

Diese Methode verwendet eine Funktion, die einen Akkumulator und einen Wert als Argument verwendet. Es wendet die Funktion auf den Akkumulator und jeden Wert des Arrays an, um als Ergebnis nur einen Wert zurückzugeben.

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.reduce((total, value) => total * value) // 1 * 2 * 3 * 4 * 5 //-------> Output = 120 

3. jeder ()

Diese Methode prüft, ob alle Elemente des Arrays die in der übergebenen Funktion angegebene Bedingung erfüllen. Es wird true wenn jedes Element mit der getesteten Funktion übereinstimmt, andernfalls false .

 const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.every(test => test === "d") //-------> Output : false const myAwesomeArray2 = ["a", "a", "a", "a", "a"] myAwesomeArray2.every(test => test === "a") //-------> Output : true 

4. map ()

Diese Methode nimmt eine Funktion als Parameter und erstellt ein neues Array mit dem Ergebnis des Aufrufs der angegebenen Funktion für jedes Element des Arrays. Es wird immer die gleiche Anzahl von Elementen zurückgegeben.

 const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) //-------> Output : 25 // 16 // 9 // 4 // 1 

5.flach ()

Diese Methode verwendet ein Array von Arrays als Argument und glättet die verschachtelten Arrays in ein Array der obersten Ebene. Bitte beachten Sie, dass diese Methode nur für eine Ebene funktioniert.

 const myAwesomeArray = [[1, 2], [3, 4], 5] myAwesomeArray.flat() //-------> Output : [1, 2, 3, 4, 5] 

6. filter ()

Diese Methode nimmt eine Funktion als Parameter und gibt ein neues Array zurück, das alle Elemente des Arrays enthält, für das die Filterfunktion als Argument übergeben wurde, und gibt es mit true .

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, { id: 4, name: "Mass" }, ] myAwesomeArray.filter(element => element.name === "Mass") //-------> Output : 0:{id: 3, name: "Mass"}, // 1:{id: 4, name: "Mass"} 

7. forEach ()

Diese Methode wendet eine Funktion auf jedes Element des Arrays an.

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) //-------> Output : john // Ali // Mass 

8. findIndex ()

Diese Methode übernimmt eine Funktion als Parameter und wendet sie dann auf das Array an. Es gibt den Index des gefundenen Elements zurück, wenn das Element die Bedingung der als Argument übergebenen Prüffunktion erfüllt. Wenn nicht zufrieden, wird –1 zurückgegeben.

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.findIndex(element => element.id === 3) //-------> Output : 2 myAwesomeArray.findIndex(element => element.id === 7) //-------> Output : -1 

9. find ()

Diese Methode nimmt eine Funktion als Argument und wendet sie dann auf das Array an. Es gibt den Wert des im Array gefundenen Elements zurück, wenn das Element die Bedingung der Prüffunktion erfüllt. Andernfalls wird der Wert undefined .

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.find(element => element.id === 3) //-------> Output : {id: 3, name: "Mass"} myAwesomeArray.find(element => element.id === 7) //-------> Output : undefined 

10. sort ()

Diese Methode übernimmt eine Funktion als Parameter. Es sortiert die Elemente des Arrays und gibt sie zurück.

 const myAwesomeArray = [5, 4, 3, 2, 1] // Sort from smallest to largest myAwesomeArray.sort((a, b) => a - b) //-------> Output : [1, 2, 3, 4, 5] // Sort from largest to smallest myAwesomeArray.sort((a, b) => b - a) //-------> Output : [5, 4, 3, 2, 1] 

11. concat ()

Diese Methode kombiniert zwei oder mehr Arrays / Werte und gibt ein neues Array zurück.

 const myAwesomeArray = [1, 2, 3, 4, 5] const myAwesomeArray2 = [10, 20, 30, 40, 50] myAwesomeArray.concat(myAwesomeArray2) //-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50] 

12. fill ()

Diese Methode füllt alle Elemente des Arrays vom Startindex (Standard 0) bis zum Endindex (Standard array.length) mit demselben Wert.

 const myAwesomeArray = [1, 2, 3, 4, 5] // The first argument (0) is the value // The second argument (1) is the starting index // The third argument (3) is the ending index myAwesomeArray.fill(0, 1, 3) //-------> Output : [1, 0, 0, 4, 5] 

13. enthält ()

Diese Methode gibt true zurück true wenn das Array ein bestimmtes Element enthält, und false wenn nicht.

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.includes(3) //-------> Output : true myAwesomeArray.includes(8) //-------> Output : false 

14. reverse ()

Diese Methode kehrt die Reihenfolge der Elemente im Array um. Das erste Element wird zum letzten und das letzte zum ersten.

 const myAwesomeArray = ["e", "d", "c", "b", "a"] myAwesomeArray.reverse() //-------> Output : ['a', 'b', 'c', 'd', 'e'] 

15. flatMap ()

Diese Methode wendet eine Funktion auf jedes Element des Arrays an und glättet das Ergebnis in ein neues Array. Es kombiniert die flat() -Methode und die map() -Methode in einer Funktion.

 const myAwesomeArray = [[1], [2], [3], [4], [5]] myAwesomeArray.flatMap(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50] // With .flat() and .map() myAwesomeArray.flat().map(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50]