JavaScript-Array-Einfügung - Hinzufügen zu einem Array mit den Funktionen Push, Unshift und Concat

JavaScript-Arrays sind leicht einer meiner Lieblingsdatentypen. Sie sind dynamisch, einfach zu bedienen und bieten eine ganze Reihe integrierter Methoden, die wir nutzen können.

Je mehr Optionen Sie haben, desto verwirrender kann es sein, zu entscheiden, welche Sie verwenden sollten.

In diesem Artikel möchte ich einige gängige Methoden zum Hinzufügen eines Elements zu einem JavaScript-Array erläutern.

Die Push-Methode

Die erste und wahrscheinlich häufigste JavaScript-Array-Methode ist push () . Die push () -Methode wird zum Hinzufügen eines Elements am Ende eines Arrays verwendet.

Angenommen, Sie haben ein Array von Elementen, wobei jedes Element eine Zeichenfolge ist, die eine Aufgabe darstellt, die Sie ausführen müssen. Es wäre sinnvoll, am Ende des Arrays neuere Elemente hinzuzufügen, damit wir unsere früheren Aufgaben zuerst erledigen können.

Schauen wir uns das Beispiel in Codeform an:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Okay, Push hat uns eine nette und einfache Syntax zum Hinzufügen eines Elements am Ende unseres Arrays gegeben.

Nehmen wir an, wir wollten zwei oder drei Elemente gleichzeitig zu unserer Liste hinzufügen. Was würden wir dann tun? Wie sich herausstellt, kann push () mehrere Elemente akzeptieren, die gleichzeitig hinzugefügt werden sollen.

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Nachdem wir unserem Array einige weitere Aufgaben hinzugefügt haben, möchten wir möglicherweise wissen, wie viele Elemente sich derzeit in unserem Array befinden, um festzustellen, ob wir zu viel auf unserem Teller haben.

Glücklicherweise hat push () einen Rückgabewert mit der Länge des Arrays, nachdem unsere Elemente hinzugefügt wurden.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Die Unshift-Methode

Nicht alle Aufgaben sind gleich. Möglicherweise stoßen Sie auf ein Szenario, in dem Sie Ihrem Array Aufgaben hinzufügen, und plötzlich stoßen Sie auf eine, die dringender ist als die anderen.

Es ist Zeit, unseren Freund unshift () vorzustellen , mit dem wir Elemente am Anfang unseres Arrays hinzufügen können.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

Im obigen Beispiel stellen Sie möglicherweise fest , dass unshift () genau wie die push () -Methode die neue Array-Länge zurückgibt, die wir verwenden können. Es gibt uns auch die Möglichkeit, mehr als ein Element gleichzeitig hinzuzufügen.

Die Concat-Methode

Die concat () -Methode steht für verketten (zum Verknüpfen) und wird zum Zusammenfügen von zwei (oder mehr) Arrays verwendet.

Wenn Sie sich von oben erinnern, geben die Methoden unshift () und push () die Länge des neuen Arrays zurück. concat () dagegengibt ein völlig neues Array zurück.

Dies ist eine sehr wichtige Unterscheidung und macht concat () äußerst nützlich, wenn Sie mit Arrays arbeiten, die Sie nicht mutieren möchten (wie Arrays, die im React-Status gespeichert sind).

So könnte ein ziemlich einfacher und unkomplizierter Fall aussehen:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

Angenommen, Sie haben mehrere Arrays, die Sie zusammenfügen möchten. Keine Sorge, concat () ist da, um den Tag zu retten!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Klonen mit Concat

Erinnern Sie sich, wie ich sagte, dass concat () nützlich sein kann, wenn Sie Ihr vorhandenes Array nicht mutieren möchten? Lassen Sie uns einen Blick darauf werfen, wie wir dieses Konzept nutzen können, um den Inhalt eines Arrays in ein neues Array zu kopieren.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Genial! Wir können ein Array im Wesentlichen mit concat () "klonen" .

Aber es gibt ein kleines "Gotcha" in diesem Klonprozess. Das neue Array ist eine "flache Kopie" des kopierten Arrays. Dies bedeutet, dass jedes Objekt als Referenz kopiert wird und nicht das eigentliche Objekt.

Schauen wir uns ein Beispiel an, um diese Idee klarer zu erklären.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

Obwohl wir keine direkten Änderungen an unserem ursprünglichen Array vorgenommen haben, war das Array letztendlich von den Änderungen betroffen, die wir an unserem geklonten Array vorgenommen haben!

Es gibt mehrere verschiedene Möglichkeiten, einen "tiefen Klon" eines Arrays ordnungsgemäß durchzuführen, aber das überlasse ich Ihnen als Hausaufgabe.

TL; DR

Wenn Sie am Ende Ihres Arrays ein Element hinzufügen möchten, verwenden Sie push (). Wenn Sie am Anfang Ihres Arrays ein Element hinzufügen müssen, versuchen Sie es mit unshift (). Und du kannstFügen Sie Arrays mit concat () hinzu.

Es gibt sicherlich viele andere Möglichkeiten, einem Array Elemente hinzuzufügen, und ich lade Sie ein, einige weitere großartige Array-Methoden zu finden!

Sie können mich gerne auf Twitter erreichen und mir Ihre bevorzugte Array-Methode zum Hinzufügen von Elementen zu einem Array mitteilen.