Was Sie über JavaScript-Arrays wissen müssen

Wir präsentieren Ihnen eine Übersetzung eines Artikels von Thomas Lombart, der auf medium.freecodecamp.org veröffentlicht wurde. Die Übersetzung wird mit Genehmigung des Autors veröffentlicht.


Ein Beispiel für die Verwendung der Reduktionsmethode zum Reduzieren eines Arrays

Lassen Sie mich eine kühne Aussage machen: Schleifen sind oft nutzlos und machen das Lesen von Code schwierig. Für Iterationen in Arrays, Suchen, Sortieren von Elementen und andere ähnliche Aktionen können Sie eine der folgenden Methoden verwenden.

Trotz der Wirksamkeit sind die meisten dieser Methoden noch wenig bekannt und nicht sehr beliebt. Ich werde die harte Arbeit für Sie erledigen und über die nützlichsten sprechen. Lesen Sie diesen Artikel als Leitfaden für JavaScript-Array-Methoden.

Hinweis : Bevor wir beginnen, müssen Sie eines wissen: Ich bin voreingenommen gegenüber funktionaler Programmierung. Um Nebenwirkungen zu vermeiden, bemühe ich mich, Methoden anzuwenden, die das ursprüngliche Array nicht direkt ändern. Ich sage Ihnen nicht, dass Sie sich weigern sollen, das Array überhaupt zu ändern, aber es lohnt sich zu bedenken, dass einige Methoden dazu führen. Infolgedessen treten Nebenwirkungen, unerwünschte Änderungen und infolgedessen Fehler auf.

Dieser Artikel wurde ursprünglich auf thomlom.dev veröffentlicht , wo Sie mehr Webentwicklungsmaterial finden.

Die Grundlagen

Es gibt vier Methoden, die Sie kennen sollten, wenn Sie mit Arrays arbeiten. Dies sind map , filter , reduce und der spread Operator. Sie sind effektiv und nützlich.

Karte
Sie werden häufig die map verwenden. Im Allgemeinen sollten Sie diese Option jedes Mal in Betracht ziehen, wenn Sie die Elemente eines Arrays ändern müssen.

Es wird ein Parameter benötigt - eine Funktion, die für jedes Element des Arrays aufgerufen wird und dann ein neues Array zurückgibt, damit keine Nebenwirkungen auftreten können.

 const numbers = [1, 2, 3, 4] const numbersPlusOne = numbers.map(n => n + 1) console.log(numbersPlusOne) // [2, 3, 4, 5] 

Sie können auch ein neues Array erstellen, in dem nur eine bestimmte Eigenschaft des Objekts gespeichert ist.

 const allActivities = [ { title: 'My activity', coordinates: [50.123, 3.291] }, { title: 'Another activity', coordinates: [1.238, 4.292] } ] const allCoordinates = allActivities.map(activity => activity.coordinates) console.log(allCoordinates) // [[50.123, 3.291], [1.238, 4.292]] 

Denken Sie also daran: Wenn Sie ein Array ändern müssen , denken Sie an die Verwendung von map .

Filter
Der Name dieser Methode spricht für sich: Verwenden Sie ihn, wenn Sie ein Array filtern möchten.

Wie map filter als einzelnen Parameter eine Funktion, die für jedes Element des Arrays aufgerufen wird. Diese Funktion sollte einen booleschen Wert zurückgeben:

• true - wenn Sie das Element in einem Array speichern möchten;
• false - wenn Sie es nicht speichern möchten.

Als Ergebnis haben Sie das richtige neue Array mit den Elementen, die Sie verlassen möchten.

Beispielsweise können nur ungerade Zahlen in einem Array gespeichert werden.

 const numbers = [1, 2, 3, 4, 5, 6] const oddNumbers = numbers.filter(n => n % 2 !== 0) console.log(oddNumbers) // [1, 3, 5] 

Sie können auch Filter verwenden, um ein bestimmtes Element im Array zu entfernen.

 const participants = [ { id: 'a3f47', username: 'john' }, { id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }, ] function removeParticipant(participants, id) { return participants.filter(participant => participant.id !== id) } console.log(removeParticipant(participants, 'a3f47')) // [{ id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }]; 

reduzieren
Meiner Meinung nach ist diese Methode am schwierigsten zu verstehen. Aber sobald Sie es beherrschen, haben Sie eine Reihe von Möglichkeiten.

In der Regel verwendet die reduce ein Array von Werten und verkettet sie zu einem einzigen Wert. Es werden zwei Parameter benötigt, eine Rückruffunktion (die den Reduzierer darstellt ) und einen optionalen Anfangswert (der standardmäßig das erste Element des Arrays ist). Das Getriebe selbst akzeptiert vier Parameter:

• eine Batterie, die die zurückgegebenen Werte im Getriebe sammelt;
• aktueller Wert des Arrays;
• aktueller Index;
• das Array, für das die reduce aufgerufen wurde.

Grundsätzlich verwenden Sie nur die ersten beiden Parameter - die Batterie und den aktuellen Wert.

Aber gehen wir nicht tief in die Theorie ein und betrachten das häufigste Beispiel für die Anwendung von reduce .

 const numbers = [37, 12, 28, 4, 9] const total = numbers.reduce((total, n) => total + n) console.log(total) // 90 

In der ersten Iteration nimmt der Akkumulator, der die Summe ist, den Anfangswert 37 an. Der zurückgegebene Wert ist 37 + n, wobei n = 12. Wir erhalten 49.

Während der zweiten Iteration ist der Akkumulator 49, der zurückgegebene Wert ist 49 + 28 = 77. Und so weiter.

Die reduce ist so funktional, dass Sie damit viele Array-Methoden wie map oder filter erstellen können.

 const map = (arr, fn) => { return arr.reduce((mappedArr, element) => { return [...mappedArr, fn(element)] }, []) } console.log(map([1, 2, 3, 4], n => n + 1)) // [2, 3, 4, 5] const filter = (arr, fn) => { return arr.reduce((filteredArr, element) => { return fn(element) ? [...filteredArr] : [...filteredArr, element] }, []) } console.log(filter([1, 2, 3, 4, 5, 6], n => n % 2 === 0)) // [1, 3, 5] 

In der Regel weisen wir der reduce - dem Akkumulator - den Anfangswert [] zu. Für die map wir eine Funktion aus, deren Ergebnis mit dem Spread-Operator am Ende der Batterie hinzugefügt wird (wir werden weiter unten darauf eingehen, keine Sorge). Für filter fast dasselbe, wir führen nur die Filterfunktion für das Element aus. Wenn es wahr ist, geben wir das vorherige Array zurück. Andernfalls fügen Sie das Element am Ende des Arrays hinzu.

Schauen wir uns ein komplexeres Beispiel an: Reduzieren Sie das Array [1, 2, 3, [4, [[[5, [6, 7]]]], 8]] auf [1, 2, 3, 4, 5, 6, 7, 8] .

 function flatDeep(arr) { return arr.reduce((flattenArray, element) => { return Array.isArray(element) ? [...flattenArray, ...flatDeep(element)] : [...flattenArray, element] }, []) } console.log(flatDeep([1, 2, 3, [4, [[[5, [6, 7]]]], 8]])) // [1, 2, 3, 4, 5, 6, 7, 8] 

Dieses Beispiel ist der map sehr ähnlich, außer dass wir hier die Rekursion verwenden. Ich werde nicht im Detail auf die Rekursion eingehen, da dies den Rahmen unseres Themas sprengt. Wenn Sie jedoch mehr wissen möchten, gehen Sie zu dieser hervorragenden Ressource .

Spread Statement (ES2015)
Ich stimme zu, dies ist keine Methode. Der Spread-Operator hilft jedoch dabei, beim Arbeiten mit Arrays unterschiedliche Ziele zu erreichen. Sie können es anwenden, um die Werte eines Arrays in einem anderen zu erweitern und dann eine Kopie zu erstellen oder mehrere Arrays miteinander zu verknüpfen.

 const numbers = [1, 2, 3] const numbersCopy = [...numbers] console.log(numbersCopy) // [1, 2, 3] const otherNumbers = [4, 5, 6] const numbersConcatenated = [...numbers, ...otherNumbers] console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6] 

Hinweis : Die Spread-Anweisung erstellt eine flache Kopie des ursprünglichen Arrays. Aber was bedeutet "oberflächlich"?

Durch eine solche Kopie werden die Originalelemente so wenig wie möglich dupliziert. Wenn Sie ein Array mit Zahlen, Zeichenfolgen oder booleschen Werten ( primitiven Typen ) haben, gibt es keine Probleme und die Werte sind wirklich dupliziert. Bei Objekten und Arrays sieht es jedoch anders aus: Es wird nur ein Verweis auf den ursprünglichen Wert kopiert. Wenn Sie daher eine flache Kopie des Arrays einschließlich des Objekts erstellen und das Objekt im kopierten Array ändern, wird es auch im Original geändert, da sie dieselbe Referenz haben .

 const arr = ['foo', 42, { name: 'Thomas' }] let copy = [...arr] copy[0] = 'bar' console.log(arr) // No mutations: ["foo", 42, { name: "Thomas" }] console.log(copy) // ["bar", 42, { name: "Thomas" }] copy[2].name = 'Hello' console.log(arr) // /!\ MUTATION ["foo", 42, { name: "Hello" }] console.log(copy) // ["bar", 42, { name: "Hello" }] 

Wenn Sie also eine echte Kopie eines Arrays erstellen möchten, das ein Objekt oder Arrays enthält, können Sie eine lodash-Funktion wie cloneDeep verwenden . Aber halten Sie sich nicht dazu verpflichtet. Ihr Ziel ist es herauszufinden, wie alles unter der Haube funktioniert .

Nützliche Methoden

Im Folgenden finden Sie weitere Methoden, die ebenfalls hilfreich sind und zur Lösung von Problemen wie dem Auffinden eines Elements in einem Array, dem Entfernen eines Teils eines Arrays und vielem mehr hilfreich sein können.

beinhaltet (ES2015)
Haben Sie jemals indexOf , um herauszufinden, ob ein Array ein Element enthält oder nicht? Eine schreckliche Art zu überprüfen, oder?

Glücklicherweise übernimmt die includes Methode die Validierung für uns. Wenn Sie den Parameter für Includes festlegen, wird nach dem Element im Array gesucht.

 const sports = ['football', 'archery', 'judo'] const hasFootball = sports.includes('football') console.log(hasFootball) // true 

concat
Die concat-Methode kann verwendet werden, um zwei oder mehr Arrays zusammenzuführen.

 const numbers = [1, 2, 3] const otherNumbers = [4, 5, 6] const numbersConcatenated = numbers.concat(otherNumbers) console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6] // You can merge as many arrays as you want function concatAll(arr, ...arrays) { return arr.concat(...arrays) } console.log(concatAll([1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12])) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] 

für jeden
Wenn Sie für jedes Element des Arrays eine Aktion ausführen möchten, können Sie die forEach Methode verwenden. Es nimmt eine Funktion als Parameter an, die wiederum drei Parameter akzeptiert: aktueller Wert, Index und Array.

 const numbers = [1, 2, 3, 4, 5] numbers.forEach(console.log) // 1 0 [ 1, 2, 3 ] // 2 1 [ 1, 2, 3 ] // 3 2 [ 1, 2, 3 ] 

indexOf
Diese Methode wird verwendet, um den ersten Index zurückzugeben, an dem sich das Element im Array befindet. Außerdem prüft indexOf häufig, indexOf ein Element in einem Array vorhanden ist. Ehrlich gesagt, jetzt benutze ich es selten.

 const sports = ['football', 'archery', 'judo'] const judoIndex = sports.indexOf('judo') console.log(judoIndex) // 2 

finden
Die find ähnelt der filter . Sie müssen eine Funktion bereitstellen, mit der jedes Element des Arrays getestet wird. find stoppt jedoch das Testen von Elementen, sobald es eines findet, das den Test bestanden hat. Dies ist kein filter , der unabhängig von den Umständen über das gesamte Array iteriert.

 const users = [ { id: 'af35', name: 'john' }, { id: '6gbe', name: 'mary' }, { id: '932j', name: 'gary' }, ] const user = users.find(user => user.id === '6gbe') console.log(user) // { id: '6gbe', name: 'mary' } 

Verwenden Sie daher die filter , wenn Sie das gesamte Array filtern möchten, und die find , wenn Sie sicher sind, dass Sie nach einem eindeutigen Element im Array suchen.
findIndex
Diese Methode ist fast identisch mit find , gibt jedoch den Index des ersten gefundenen Elements anstelle des Elements selbst zurück.

 const users = [ { id: 'af35', name: 'john' }, { id: '6gbe', name: 'mary' }, { id: '932j', name: 'gary' }, ] const user = users.findIndex(user => user.id === '6gbe') console.log(user) // 1 

Sie könnten denken, dass findIndex und indexOf sind. Nicht wirklich. Der erste Parameter von indexOf ist ein primitiver Wert (ein boolescher Wert, eine Zahl, eine Zeichenfolge, ein undefinierter Wert oder ein Zeichen), während der erste Parameter, findIndex eine Rückruffunktion ist.

Wenn Sie den Index eines Elements in einem Array primitiver Werte indexOf , können Sie daher mit indexOf . Wenn Sie komplexere Elemente wie Objekte haben, verwenden Sie findIndex .

Scheibe
Wenn Sie an einem Array teilnehmen oder ein Array kopieren müssen, können Sie auf die slice Methode verweisen. Aber seien Sie vorsichtig: Wie der Spread-Operator gibt slice eine flache Kopie zurück .

 const numbers = [1, 2, 3, 4, 5] const copy = numbers.slice() 

Am Anfang des Artikels erwähnte ich, dass Schleifen oft nutzlos sind. Lassen Sie mich Ihnen zeigen, wie Sie sie loswerden können.

Angenommen, Sie möchten eine bestimmte Anzahl von Chat-Nachrichten von der API zurückgeben und müssen nur fünf davon sehen. Im Folgenden sind zwei Ansätze aufgeführt: einer mit Schleifen, der andere mit der slice Methode.

 // The "traditional way" to do it: // Determine the number of messages to take and use a for loop const nbMessages = messages.length < 5 ? messages.length : 5 let messagesToShow = [] for (let i = 0; i < nbMessages; i++) { messagesToShow.push(posts[i]) } // Even if "arr" has less than 5 elements, // slice will return an entire shallow copy of the original array const messagesToShow = messages.slice(0, 5) 

einige
Wenn Sie überprüfen möchten, ob mindestens ein Element des Arrays den Test besteht, können Sie some . Wie beim map , filter oder find die Methode some eine Rückruffunktion als einzigen Parameter und gibt dann true zurück true wenn mindestens ein Element die Prüfung besteht, und false wenn nicht.

some eignen sich auch zum Arbeiten mit Berechtigungen.

 const users = [ { id: 'fe34', permissions: ['read', 'write'], }, { id: 'a198', permissions: [], }, { id: '18aa', permissions: ['delete', 'read', 'write'], } ] const hasDeletePermission = users.some(user => user.permissions.includes('delete') ) console.log(hasDeletePermission) // true 

jeder
Diese Methode ähnelt some , außer dass überprüft wird, ob jedes Element (und nicht eines ) der Bedingung entspricht.

 const users = [ { id: 'fe34', permissions: ['read', 'write'], }, { id: 'a198', permissions: [], }, { id: '18aa', permissions: ['delete', 'read', 'write'], } ] const hasAllReadPermission = users.every(user => user.permissions.includes('read') ) console.log(hasAllReadPermission) // false 

flach (ES2019)
Dies sind völlig neue Methoden in der JavaScript-Welt. Normalerweise erstellt flat ein neues Array, das alle Elemente eines verschachtelten Arrays verbindet. Es wird ein Parameter benötigt - eine Zahl, die angibt, um wie viel Sie die Dimension des Arrays reduzieren möchten.

 const numbers = [1, 2, [3, 4, [5, [6, 7]], [[[[8]]]]]] const numbersflattenOnce = numbers.flat() console.log(numbersflattenOnce) // [1, 2, 3, 4, Array[2], Array[1]] const numbersflattenTwice = numbers.flat(2) console.log(numbersflattenTwice) // [1, 2, 3, 4, 5, Array[2], Array[1]] const numbersFlattenInfinity = numbers.flat(Infinity) console.log(numbersFlattenInfinity) // [1, 2, 3, 4, 5, 6, 7, 8] 

flatMap (ES2019)
Ratet mal, was diese Methode macht? Ich wette, Sie werden einen Namen verstehen.

Zuerst wird die Zuordnungsfunktion für jedes Element ausgeführt und dann das Array gleichzeitig verkleinert. So einfach ist das!

 const sentences = [ 'This is a sentence', 'This is another sentence', "I can't find any original phrases", ] const allWords = sentences.flatMap(sentence => sentence.split(' ')) console.log(allWords) // ["This", "is", "a", "sentence", "This", "is", "another", "sentence", "I", "can't", "find", "any", "original", "phrases"] 

In diesem Beispiel haben Sie viele Sätze im Array und möchten alle Wörter erhalten. Anstatt die flatMap verwenden und alle Sätze in Wörter zu unterteilen und dann das Array zu verkürzen, können Sie flatMap .

Dann können Sie die Anzahl der Wörter mit der reduce (dies gilt nicht für flatMap , ich möchte Ihnen nur ein weiteres Beispiel für die Verwendung der reduce ).

 const wordsCount = allWords.reduce((count, word) => { count[word] = count[word] ? count[word] + 1 : 1 return count }, {}) console.log(wordsCount) // { This: 2, is: 2, a: 1, sentence: 2, another: 1, I: 1, "can't": 1, find: 1, any: 1, original: 1, phrases: 1, } 

Die flatMap Methode flatMap auch häufig in der reaktiven Programmierung verwendet. Hier sehen Sie ein Beispiel.

beitreten
Wenn Sie eine Zeichenfolge basierend auf Array-Elementen erstellen müssen, benötigen Sie die join Methode. Sie können eine neue Linie erstellen, indem Sie alle Elemente des Arrays verbinden, die durch das bereitgestellte Trennzeichen getrennt sind.

Mit join Sie beispielsweise alle Teilnehmer einer Aktivität visuell anzeigen.

 const participants = ['john', 'mary', 'gary'] const participantsFormatted = participants.join(', ') console.log(participantsFormatted) // john, mary, gary 

Dies ist ein realistischeres Beispiel, bei dem Sie zuerst die Teilnehmer filtern und ihre Namen abrufen können.

 const potentialParticipants = [ { id: 'k38i', name: 'john', age: 17 }, { id: 'baf3', name: 'mary', age: 13 }, { id: 'a111', name: 'gary', age: 24 }, { id: 'fx34', name: 'emma', age: 34 }, ] const participantsFormatted = potentialParticipants .filter(user => user.age > 18) .map(user => user.name) .join(', ') console.log(participantsFormatted) // gary, emma 

von
Dies ist eine statische Methode, die ein neues Array aus einem Array-ähnlichen oder iterierbaren Objekt wie einer Zeichenfolge erstellt. Dies kann nützlich sein, wenn Sie mit dem Dokumentobjektmodell arbeiten.

 const nodes = document.querySelectorAll('.todo-item') // this is an instance of NodeList const todoItems = Array.from(nodes) // now, you can use map, filter, etc. as you're workin with an array! 

Haben Sie gesehen, dass wir einen Array-Typ anstelle einer Array-Instanz verwendet haben? Deshalb wird diese Methode als statisch bezeichnet.

Dann können Sie Spaß mit den Knoten haben, indem Sie beispielsweise Ereignis-Listener für jeden von ihnen mit der forEach Methode registrieren.

 todoItems.forEach(item => { item.addEventListener('click', function() { alert(`You clicked on ${item.innerHTML}`) }) }) 

Array-Modifikation, über die man Bescheid wissen sollte

Das Folgende sind andere Standardmethoden. Ihr Unterschied besteht darin, dass sie das ursprüngliche Array ändern. An der Änderung ist nichts auszusetzen, aber Sie sollten dies bei der Arbeit berücksichtigen.

Wenn Sie das ursprüngliche Array während der Arbeit mit diesen Methoden nicht ändern möchten, erstellen Sie im Voraus eine Oberfläche oder eine vollständige Kopie.

 const arr = [1, 2, 3, 4, 5] const copy = [...arr] // or arr.slice() 

sortieren
Ja, sort ändert das ursprüngliche Array. Tatsächlich werden die Elemente des Arrays an Ort und Stelle sortiert. Die Standardsortiermethode wandelt alle Elemente in Zeichenfolgen um und sortiert sie in alphabetischer Reihenfolge.

 const names = ['john', 'mary', 'gary', 'anna'] names.sort() console.log(names) // ['anna', 'gary', 'john', 'mary'] 

Seien Sie vorsichtig: Wenn Sie beispielsweise von der Python-Sprache gewechselt haben, führt die sort beim Arbeiten mit einem Array von Zahlen nicht zum gewünschten Ergebnis.

 const numbers = [23, 12, 17, 187, 3, 90] numbers.sort() console.log(numbers) // [12, 17, 187, 23, 3, 90] 

Wie sortiere ich dann ein Array? Die sort hat eine Funktion - eine Vergleichsfunktion . Es werden zwei Parameter benötigt: das erste Element ( ) und das zweite Element zum Vergleich ( b ). Der Vergleich zwischen diesen beiden Elementen erfordert eine Ziffernrückgabe:

• wenn der Wert negativ ist - a vor b sortiert;
• Wenn der Wert positiv ist, wird b vor a sortiert.
• Wenn der Wert 0 ist, keine Änderung.

Dann können Sie die Zahlen sortieren.

 const numbers = [23, 12, 17, 187, 3, 90] numbers.sort((a, b) => a - b) console.log(numbers) // [3, 12, 17, 23, 90, 187] 

Oder Sie können die Daten nach den neuesten sortieren.

 const posts = [ { title: 'Create a Discord bot under 15 minutes', date: new Date(2018, 11, 26), }, { title: 'How to get better at writing CSS', date: new Date(2018, 06, 17) }, { title: 'JavaScript arrays', date: new Date() }, ] posts.sort((a, b) => a.date - b.date) // Substracting two dates returns the difference in millisecond between them console.log(posts) // [ { title: 'How to get better at writing CSS', // date: 2018-07-17T00:00:00.000Z }, // { title: 'Create a Discord bot under 15 minutes', // date: 2018-12-26T00:00:00.000Z }, // { title: 'Learn Javascript arrays the functional way', // date: 2019-03-16T10:31:00.208Z } ] 

füllen
Die fill ändert oder füllt alle Elemente des Arrays vom Startindex bis zum Ende mit dem angegebenen Wert. Ein Beispiel für die hervorragende Verwendung von fill ist das Füllen eines neuen Arrays mit Anfangsdaten.

 // Normally I would have called a function that generates ids and random names but let's not bother with that here. function fakeUser() { return { id: 'fe38', name: 'thomas', } } const posts = Array(3).fill(fakeUser()) console.log(posts) // [{ id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }] 

umgekehrt
Es scheint mir, dass der Name der Methode ihre Essenz vollständig erklärt.

 const numbers = [1, 2, 3, 4, 5] numbers.reverse() console.log(numbers) // [5, 4, 3, 2, 1] 

Pop
Diese Methode entfernt das letzte Element aus dem Array und gibt es zurück.

 const messages = ['Hello', 'Hey', 'How are you?', "I'm fine"] const lastMessage = messages.pop() console.log(messages) // ['Hello', 'Hey', 'How are you?'] console.log(lastMessage) // I'm fine 

Methoden, die ersetzt werden können

Im letzten Abschnitt finden Sie Methoden, die das ursprüngliche Array ändern und die leicht zu finden sind. Ich sage nicht, dass sie abgezinst werden müssen, ich möchte Ihnen nur vermitteln, dass einige Methoden Nebenwirkungen haben und ersetzt werden können.

drücken
Diese Methode wird häufig verwendet. Sie können dem Array ein oder mehrere Elemente hinzufügen und ein neues Array basierend auf dem vorherigen erstellen.

 const todoItems = [1, 2, 3, 4, 5] const itemsIncremented = [] for (let i = 0; i < items.length; i++) { itemsIncremented.push(items[i] + 1) } console.log(itemsIncremented) // [2, 3, 4, 5, 6] const todos = ['Write an article', 'Proofreading'] todos.push('Publish the article') console.log(todos) // ['Write an article', 'Proofreading', 'Publish the article'] 

Wenn Sie ein Array auf der Basis eines anderen Arrays itemsIncremented , wie bei der Methode itemsIncremented , gibt es geeignete map , filter oder reduce , die uns bereits bekannt sind. Zum Beispiel können wir dazu eine map nehmen.

 const itemsIncremented = todoItems.map(x => x + 1) 

Und wenn Sie push möchten push wenn Sie ein neues Element hinzufügen müssen, ist der Spread-Operator hilfreich.

 const todos = ['Write an article', 'Proofreading'] console.log([...todos, 'Publish the article']) 

Spleißen
splice häufig zugegriffen, um ein Element an einem bestimmten Index zu bereinigen. Sie können dasselbe mit der filter tun.

 const months = ['January', 'February', 'March', 'April', ' May'] // With splice months.splice(2, 1) // remove one element at index 2 console.log(months) // ['January', 'February', 'April', 'May'] // Without splice const monthsFiltered = months.filter((month, i) => i !== 3) console.log(monthsFiltered) // ['January', 'February', 'April', 'May'] 

Sie fragen sich vielleicht: Was ist, wenn ich viele Elemente entfernen muss? Dann slice .

 const months = ['January', 'February', 'March', 'April', ' May'] // With splice months.splice(1, 3) // remove thirds element starting at index 1 console.log(months) // ['January', 'February', 'April', 'May'] // Without splice const monthsFiltered = [...months.slice(0, 1), ...months.slice(4)] console.log(monthsFiltered) // ['January', 'February', 'April', 'May'] 

verschieben
Die shift Methode entfernt das erste Element des Arrays und gibt es zurück. Um dies im Stil der funktionalen Programmierung zu tun, können Sie die Anweisungpread oder rest verwenden.

 const numbers = [1, 2, 3, 4, 5] // With shift const firstNumber = numbers.shift() console.log(firstNumber) // 1 console.log(numbers) // [2, 3, 4, 5] // Without shift const [firstNumber, ...numbersWithoutOne] = numbers console.log(firstNumber) // 1 console.log(numbersWithoutOne) // [2, 3, 4, 5] 

verschieben
Mit der Methode zum Verschieben können Sie ein oder mehrere Elemente am Anfang eines Arrays hinzufügen. Wie bei shift können Sie dies mit dem Spread-Operator tun.

 const numbers = [3, 4, 5] // With unshift numbers.unshift(1, 2) console.log(numbers) // [1, 2, 3, 4, 5] // Without unshift const newNumbers = [1, 2, ...numbers] console.log(newNumbers) // [1, 2, 3, 4, 5] 

TL; DR

• Wenn Sie einige Operationen mit einem Array ausführen möchten, verwenden Sie nicht die for-Schleife und erfinden Sie das Rad nicht neu, da es höchstwahrscheinlich eine der oben genannten Methoden gibt, die das tun kann, was Sie benötigen.
• Am häufigsten verwenden Sie die map , filter , reduce Methoden und den Spread-Operator - dies sind wichtige Tools für jeden Entwickler.
• Es gibt auch viele Array-Methoden, die gut zu wissen wären: slice , some , flatMap usw. flatMap Sie sie kennen und wenden Sie sie bei Bedarf an.
• Nebenwirkungen können zu unerwünschten Veränderungen führen. Beachten Sie, dass einige Methoden Ihr ursprüngliches Array ändern.
• Die slice Methode und der Spread-Operator erstellen flache Kopien. Infolgedessen haben Objekte und Subarrays die gleichen Verknüpfungen - dies ist auch zu beachten.
• Alte Methoden, die das Array ändern, können durch neue ersetzt werden. Sie entscheiden, was zu tun ist.

Jetzt wissen Sie alles, was Sie über JavaScript-Arrays wissen sollten. Wenn Ihnen dieser Artikel gefallen hat , klicken Sie auf die Schaltfläche "Pat" (bis zu 50 Mal, wenn Sie möchten :-)) und teilen Sie ihn. Und zögern Sie nicht, Ihre Eindrücke in den Kommentaren zu teilen!