die beliebtesten Array-Methoden in JavaScript, die Sie nicht verpassen sollten!

In diesem Leitfaden werden vierzehn unverzichtbare JavaScript-Array-Methoden erläutert. Wir werden jede Methode skizzieren und ihre Verwendung anhand von Beispielen veranschaulichen.

1. map(): Transformiert jedes Array-Element und gibt ein neues Array mit den Ergebnissen zurück. Das ursprüngliche Array bleibt unverändert.

<code class="language-javascript">const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']</code>

2. filter(): Erstellt ein neues Array, das nur Elemente enthält, die eine bereitgestellte Testfunktion bestehen. Das ursprüngliche Array bleibt unberührt.

<code class="language-javascript">const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]</code>

3. reduce(): Wendet eine Funktion kumulativ auf Array-Elemente an, um sie auf einen einzelnen Wert zu reduzieren. Stellen Sie sich das als iteratives Kombinieren von Elementen vor.

<code class="language-javascript">const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0); // 6
const cart = [{ price: 10 }, { price: 20 }];
const total = cart.reduce((sum, item) => sum + item.price, 0); // 30</code>

4. forEach(): Führt eine bereitgestellte Funktion einmal für jedes Array-Element aus. Es wird kein Wert zurückgegeben (gibt undefined zurück).

<code class="language-javascript">[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));</code>

5. find(): Gibt das erste Element zurück, das eine bereitgestellte Testfunktion erfüllt. Wenn kein Element die Bedingung erfüllt, wird undefined.
zurückgegeben

<code class="language-javascript">const users2 = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
const john = users2.find(user => user.name === 'John'); // { id: 1, name: 'John' }
const nums2 = [1, 2, 3, 4];
const firstEven = nums2.find(n => n % 2 === 0); // 2</code>

6. findIndex(): Gibt den Index des ersten Elements zurück, das eine bereitgestellte Testfunktion erfüllt. Gibt -1 zurück, wenn kein Element die Bedingung erfüllt.

<code class="language-javascript">const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2); // 1</code>

7. some(): Testet, ob mindestens ein Element im Array den von der bereitgestellten Funktion implementierten Test besteht. Gibt true zurück, wenn mindestens ein Element besteht, andernfalls false.

<code class="language-javascript">const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true
const hasExpensive = products.some(p => p.price > 15); // true</code>

8. every(): Testet, ob alle Elemente im Array den von der bereitgestellten Funktion implementierten Test bestehen. Gibt true nur zurück, wenn alle Elemente bestehen, andernfalls false.

<code class="language-javascript">const allPositive = [1, 2, 3].every(n => n > 0); // true</code>

9. includes(): Bestimmt, ob ein Array einen bestimmten Wert in seinen Einträgen enthält, und gibt je nach Bedarf true oder false zurück.

<code class="language-javascript">const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2); // true
const hasZero = numbers2.includes(0); // false</code>

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

<code class="language-javascript">const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1</code>

11. slice(): Extrahiert einen Abschnitt eines Arrays und gibt ihn als neues Array zurück, ohne das Original zu ändern.

<code class="language-javascript">const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4); // [2, 3, 4]
const last = arr.slice(-2); // [4, 5]</code>

12. splice(): Ändert den Inhalt eines Arrays durch Entfernen oder Ersetzen vorhandener Elemente und/oder Hinzufügen neuer Elemente an Ort und Stelle. Ändert das ursprüngliche Array.

<code class="language-javascript">const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April']
months.splice(2, 1); // ['Jan', 'Feb', 'April']</code>

13. sort(): Sortiert die Elemente eines Arrays an Ort und Stelle. Standardmäßig wird nach Zeichenfolgen sortiert. Für die numerische Sortierung wird eine Vergleichsfunktion benötigt.

<code class="language-javascript">const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']</code>

14. join(): Erstellt eine neue Zeichenfolge und gibt sie zurück, indem alle Elemente in einem Array verkettet werden (getrennt durch eine angegebene Trennzeichenfolge).

<code class="language-javascript">const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]</code>

Die Beherrschung dieser Methoden verbessert Ihre Fähigkeiten zur JavaScript-Array-Manipulation erheblich.

Das obige ist der detaillierte Inhalt vondie beliebtesten Array-Methoden in JavaScript, die Sie nicht verpassen sollten!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!