Beispiele für JavaScript-Array-Methoden: Eine umfassende Anleitung (Methoden)

Vollständige Beispiele aller wichtigen JavaScript-Array-Methoden.

Kategorien von Array-Methoden:

1. Änderungsmethoden (ursprüngliches Array ändern)

• push(), pop(), shift(), unshift(), reverse(), sort(), splice(), fill()

2. Nicht modifizierende Methoden (neues Array/neuen Wert zurückgeben)

• map(), filter(), concat(), Slice(), toReversed(), toSorted(), toSpliced()

3. Suchmethoden

• indexOf(), Includes(), find(), findIndex(), findLast(), findLastIndex()

4. Iterationsmethoden

• forEach(), map(), filter(), Reduce(), every(), some()

5. Methoden zur Array-Erstellung

• Array.from(), Array.of(), Array.fromAsync()

6. Andere Hilfsmethoden

• join(), flat(), flatMap(), entries(), Values(), with()

Beispiele aller 31 Methoden unten:

1. concat() – Führt zwei oder mehr Arrays zusammen

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

2. join() – Erstellt einen String aus Array-Elementen

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.join(', ')); // Output: "Apple, Banana, Orange"

3. fill() – Füllt Array-Elemente mit einem statischen Wert

const numbers = [1, 2, 3, 4];
console.log(numbers.fill(0)); // Output: [0, 0, 0, 0]

4. Includes() – Prüft, ob ein Array ein bestimmtes Element enthält

const colors = ['red', 'blue', 'green'];
console.log(colors.includes('blue')); // Output: true

5. indexOf() – Findet den ersten Index eines Elements

const numbers2 = [1, 2, 3, 2];
console.log(numbers2.indexOf(2)); // Output: 1

6. reverse() – Kehrt Array-Elemente um

const letters = ['a', 'b', 'c'];
console.log(letters.reverse()); // Output: ['c', 'b', 'a']

7. sort() – Sortiert Array-Elemente

const unsorted = [3, 1, 4, 1, 5];
console.log(unsorted.sort()); // Output: [1, 1, 3, 4, 5]

8. splice() – Fügt Elemente zum Array hinzu bzw. entfernt sie

const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb');
console.log(months); // Output: ['Jan', 'Feb', 'March', 'April']

9. at() – Gibt das Element am angegebenen Index zurück

const array1 = [5, 12, 8, 130, 44];
console.log(array1.at(2)); // Output: 8

10. copyWithin() – Kopiert Array-Elemente an eine andere Position

const array2 = ['a', 'b', 'c', 'd', 'e'];
console.log(array2.copyWithin(0, 3, 4)); // Output: ['d', 'b', 'c', 'd', 'e']

11. flat() – Erstellt ein neues Array mit verketteten Unterarray-Elementen

const arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // Output: [1, 2, 3, 4, 5, 6]

12. Array.from() – Erstellt ein Array aus einem arrayähnlichen Objekt

console.log(Array.from('hello')); // Output: ['h', 'e', 'l', 'l', 'o']

13. findLastIndex() – Gibt den letzten Index zurück, der die Bedingung erfüllt

const numbers3 = [5, 12, 8, 130, 44, 8];
console.log(numbers3.findLastIndex(num => num === 8)); // Output: 5

14. forEach() – Führt eine Funktion für jedes Array-Element aus

const numbers4 = [1, 2, 3];
numbers4.forEach(num => console.log(num * 2)); // Output: 2, 4, 6

15. every() – Testet, ob alle Elemente die Bedingung erfüllen

const numbers5 = [1, 2, 3, 4, 5];
console.log(numbers5.every(num => num > 0)); // Output: true

16. Einträge() – Gibt einen Array-Iterator mit Schlüssel/Wert-Paaren zurück

const fruits2 = ['Apple', 'Banana'];
const iterator = fruits2.entries();
console.log([...iterator]); // Output: [[0, 'Apple'], [1, 'Banana']]

17. Values() – Gibt einen Array-Iterator mit Werten zurück

const fruits3 = ['Apple', 'Banana'];
const values = [...fruits3.values()];
console.log(values); // Output: ['Apple', 'Banana']

18. toReversed() – Gibt ein neues umgekehrtes Array zurück

const arr4 = [1, 2, 3];
console.log(arr4.toReversed()); // Output: [3, 2, 1]
console.log(arr4); // Original array unchanged: [1, 2, 3]

19. toSorted() – Gibt ein neues sortiertes Array zurück

const arr5 = [3, 1, 2];
console.log(arr5.toSorted()); // Output: [1, 2, 3]
console.log(arr5); // Original array unchanged: [3, 1, 2]

20. toSpliced() – Gibt ein neues Array mit Spleißoperation zurück

const arr6 = [1, 2, 3];
console.log(arr6.toSpliced(1, 1, 'two')); // Output: [1, 'two', 3]
console.log(arr6); // Original array unchanged: [1, 2, 3]

21. with() – Gibt ein neues Array mit ersetztem Element zurück

const arr7 = [1, 2, 3];
console.log(arr7.with(1, 'two')); // Output: [1, 'two', 3]
console.log(arr7); // Original array unchanged: [1, 2, 3]

22. Array.fromAsync() – Erstellt ein Array aus einer asynchronen iterierbaren Variable

async function* asyncGenerator() {
  yield 1;
  yield 2;
}
Array.fromAsync(asyncGenerator()).then(array => console.log(array)); // Output: [1, 2]

23. Array.of() – Erstellt ein Array aus Argumenten

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

24. map() – Erstellt ein neues Array mit den Ergebnissen des Rückrufs

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

25. flatMap() – Kartiert das Ergebnis und reduziert es

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

26. Reduce() – Reduziert das Array auf einen einzelnen Wert (von links nach rechts)

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

27. ReduceRight() – Reduziert das Array auf einen einzelnen Wert (von rechts nach links)

const numbers8 = [1, 2, 3, 4];
console.log(numbers8.reduceRight((acc, curr) => acc + curr, 0)); // Output: 10

28. some() – Testet, ob mindestens ein Element die Bedingung erfüllt

const numbers9 = [1, 2, 3, 4, 5];
console.log(numbers9.some(num => num > 4)); // Output: true

29. find() – Gibt das erste Element zurück, das die Bedingung erfüllt

const numbers10 = [5, 12, 8, 130, 44];
console.log(numbers10.find(num => num > 10)); // Output: 12

30. findIndex() – Gibt den ersten Index zurück, der die Bedingung erfüllt

const numbers11 = [5, 12, 8, 130, 44];
console.log(numbers11.findIndex(num => num > 10)); // Output: 1

31. findLast() – Gibt das letzte Element zurück, das die Bedingung erfüllt

const numbers12 = [5, 12, 8, 130, 44];
console.log(numbers12.findLast(num => num > 10)); // Output: 44

Kernpunkte:

• Jede Methode hat eine bestimmte Aufgabe, z. B. Sortieren, Umkehren oder Suchen eines Elements in einem Array.
• Einige Methoden ändern das ursprüngliche Array, wie sort() und reverse().
• Einige Methoden geben ein neues Array zurück, z. B. map() und filter().
• Einige moderne Methoden, wie toSorted() und toReversed(), behalten das ursprüngliche Array unverändert bei und geben ein neues Array zurück.

? Vernetzen Sie sich mit mir auf LinkedIn:

Ich teile regelmäßig Einblicke in JavaScript, Node.js, React, Next.js, Softwareentwicklung, Datenstrukturen, Algorithmen und mehr. Lasst uns zusammenkommen, lernen und wachsen!

Folgen Sie mir: Nozibul Islam

Das obige ist der detaillierte Inhalt vonBeispiele für JavaScript-Array-Methoden: Eine umfassende Anleitung (Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!