Ein Leitfaden zum Beherrschen von JavaScript-Arrays

Arrays sind eine der am häufigsten verwendeten Datenstrukturen in JavaScript. Sie ermöglichen das Speichern mehrerer Werte in einer einzigen Variablen und verfügen über zahlreiche integrierte Funktionen, die die Bearbeitung und Arbeit mit Daten einfach und effizient machen. In diesem Artikel befassen wir uns im Detail mit den JavaScript-Array-Funktionen und stellen Erklärungen, Beispiele und Kommentare bereit, damit Sie diese besser beherrschen.

Einführung in Arrays in JavaScript

Ein Array ist eine geordnete Sammlung von Elementen, die verschiedene Datentypen enthalten kann, einschließlich Zahlen, Zeichenfolgen, Objekte und sogar andere Arrays.

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

Arrays erstellen

Arrays können mit Array-Literalen oder dem Array-Konstruktor erstellt werden.

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

Array-Eigenschaften

• Länge: Gibt die Anzahl der Elemente in einem Array zurück.

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

Array-Methoden

1. push()

Fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue Länge zurück.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

2. pop()

Entfernt das letzte Element aus einem Array und gibt dieses Element zurück.

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

3. Shift()

Entfernt das erste Element aus einem Array und gibt dieses Element zurück.

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

4. unshift()

Fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu und gibt die neue Länge zurück.

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

5. concat()

Führt zwei oder mehr Arrays zusammen und gibt ein neues Array zurück.

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

6. beitreten()

Fügt alle Elemente eines Arrays zu einem String zusammen.

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

7. reverse()

Kehrt die Reihenfolge der Elemente in einem Array um.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

8. Slice()

Gibt eine flache Kopie eines Teils eines Arrays in ein neues Array-Objekt zurück.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

9. splice()

Ändert den Inhalt eines Arrays durch Entfernen, Ersetzen oder Hinzufügen von Elementen.

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

10. sort()

Sortiert die Elemente eines Arrays an Ort und Stelle und gibt das sortierte Array zurück.

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

11. filter()

Erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

12. Karte()

Erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array.

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

13. Reduzieren()

Wendet eine Funktion auf einen Akkumulator und jedes Element im Array an, um es auf einen einzelnen Wert zu reduzieren.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

14. find()

Gibt den Wert des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

15. findIndex()

Gibt den Index des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

16. jeder()

Testet, ob alle Elemente im Array den von der bereitgestellten Funktion implementierten Test bestehen.

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x < 10);
console.log(allBelowTen); // Output: true

17. einige()

Testet, ob mindestens ein Element im Array den von der bereitgestellten Funktion implementierten Test besteht.

let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true

18. Includes()

Bestimmt, ob ein Array einen bestimmten Wert in seinen Einträgen enthält.

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true

19. indexOf()

Gibt den ersten Index zurück, an dem ein bestimmtes Element im Array gefunden werden kann, oder -1, wenn es nicht vorhanden ist.

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2

20. lastIndexOf()

Gibt den letzten Index zurück, an dem ein bestimmtes Element im Array gefunden werden kann, oder -1, wenn es nicht vorhanden ist.

let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5

21. flach()

Erstellt ein neues Array, in dem alle Sub-Array-Elemente rekursiv bis zur angegebenen Tiefe verkettet sind.

let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]

22. flatMap()

Zuerst wird jedes Element mithilfe einer Zuordnungsfunktion zugeordnet, dann wird das Ergebnis in ein neues Array zusammengefasst.

let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]

23. from()

Erstellt eine neue, flach kopierte Array-Instanz aus einem Array-ähnlichen oder iterierbaren Objekt.

let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]

24. isArray()

Bestimmt, ob der übergebene Wert ein Array ist.

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false

25. von()

Erstellt ein

Neue Array-Instanz mit einer variablen Anzahl von Argumenten, unabhängig von Anzahl oder Typ der Argumente.

let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]

Practical Examples

Example 1: Removing Duplicates from an Array

let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]

Example 2: Summing All Values in an Array

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15

Example 3: Flattening a Deeply Nested Array

let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]

Example 4: Finding the Maximum Value in an Array

let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5

Example 5: Creating an Array of Key-Value Pairs

let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]

Conclusion

Arrays are an essential part of JavaScript, providing a powerful way to manage collections of data. By mastering array functions, you can perform complex data manipulations with ease and write more efficient and readable code. This comprehensive guide has covered the most important array functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

Das obige ist der detaillierte Inhalt vonEin Leitfaden zum Beherrschen von JavaScript-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!