Elemente an ein Array anhängen in JavaScript

1. Verwendung der Eigenschaft .length des Arrays zum Anhängen von Elementen in einem Array in JavaScript
2. Verwenden die Methode push() zum Elemente in einem Array anzuhängen in JavaScript
3. Verwenden der Methode unshift() zum Anhängen von Elementen in einem Array
4. Verwenden der Methode splice() zum Anhängen von Elementen in einem Array
5. Verwenden der Methode concat() zum Anhängen von Elementen in einem Array
6. Verwenden der spread-Syntax zum Anhängen von Elementen in einem Array

In diesem Artikel erfahren Sie, wie Sie Elemente in einem Array in JavaScript anhängen.

Es gibt verschiedene Methoden, um ein Element in JavaScript an ein Array anzuhängen. Wir können ein einzelnes Element, mehrere Elemente anhängen und sogar ein ganzes Array an ein bestimmtes Array anhängen. Wir können eine Methode verwenden, abhängig davon, ob wir mutieren möchten oder nicht, Geschwindigkeits- und Effizienzanforderungen, Lesbarkeit des Codes.

Verwendung der Eigenschaft .length des Arrays zum Anhängen von Elementen in einem Array in JavaScript

Es ist der klassische Ansatz, bei dem wir den letzten leeren Index des Arrays unter Verwendung der Gesamtlänge des Arrays erhalten und an diesem Index ein Element einfügen. Diese Methode ist am einfachsten anzuwenden und bietet eine hervorragende Effizienz. Es erlaubt uns, jeweils nur ein Element anzuhängen. Es ist eine mutative Methode, da sie das ursprüngliche Array ändert.

let arr = [0, 1, 2];
arr[arr.length] = 3;
console.log(arr);

Ausgabe:

[0, 1, 2, 3]

Im obigen Code erhalten wir den letzten Index des Arrays mit arr.length als 3 und fügen dann Elemente an diesen Indizes hinzu.

Verwenden die Methode push() zum Elemente in einem Array anzuhängen in JavaScript

Mit der Methode push() werden am Ende des Arrays Elemente hinzugefügt. Wir können ein einzelnes Element, mehrere Elemente oder sogar ein Array hinzufügen. Es ist die einfachste und eine der schnellsten Optionen. In einigen Fällen übertrifft es sogar die oben beschriebene Methode mit Array.length in großen Arrays. Die von push() ausgeführten Aktionen können mit der Methode .pop() rückgängig gemacht werden. Wenn mehrere Elemente zusammen übergeben werden, wird ihre Reihenfolge vom Operator push() beibehalten. Diese Methode ändert auch das Array und ist daher mutativ.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.push(4);        // single item
arr.push(5, 6, 7);  // multiple items
arr.push(...arr2);  // spread operator
console.log(arr);

Ausgabe:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Im obigen Code haben wir alle 3 Fälle demonstriert: Hinzufügen eines einzelnen Elements, mehrerer Elemente und sogar eines ganzen Arrays mithilfe der Spread-Syntax. Alle Elemente werden am Ende des Arrays angehängt.

Verwenden der Methode unshift() zum Anhängen von Elementen in einem Array

Die Methode unshift() hilft uns, dem Anfang des Arrays ein Element hinzuzufügen. Es gibt die neue Länge des Arrays zurück. Es kann aufgerufen oder auf Objekte angewendet werden, die in ihren Eigenschaften einem Array ähneln. Wenn mehrere Elemente zusammen übergeben werden, wird ihre Reihenfolge vom Operator unshift() beibehalten. Diese Methode ändert auch das Array und ist daher mutativ.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.unshift(4);        // single item
arr.unshift(5, 6, 7);  // multiple items
arr.unshift(...arr2)   // spread operator
console.log(arr);

Ausgabe:

[8, 9, 10, 5, 6, 7, 4, 1, 2, 3]

Im obigen Code haben wir alle drei Fälle demonstriert: Hinzufügen eines einzelnen Elements, mehrerer Elemente und sogar eines ganzen Arrays mithilfe der Spread-Syntax. Beachten Sie, dass sich diese Operation von push() unterscheidet. Alle Elemente werden an den Anfang des Arrays angehängt.

Verwenden der Methode splice() zum Anhängen von Elementen in einem Array

Die Methode splice() kann den Inhalt des Arrays durch Hinzufügen / Entfernen von Elementen ändern. Es werden folgende 3 Argumente verwendet:

1. index: Ein ganzzahliger Wert, der die Position angibt, an der Elemente hinzugefügt / entfernt werden sollen. Wir können sogar einen Index von der Rückseite des Arrays angeben, indem wir negative Indizes verwenden.
2. howmany: Dies ist ein optionaler Parameter. Es gibt an, wie viele Elemente aus dem Array entfernt werden sollen. Wenn es auf 0 gesetzt ist, werden keine Elemente entfernt.
3. item1, item2, ... ,itemx: Die Elemente, die dem Array hinzugefügt werden sollen.

Diese Methode ändert auch das Array und ist daher mutativ.

const arr = [1, 2, 3, 4, 5];
arr.splice(4, 3, 7, 8, 9);
console.log(arr);

Ausgabe:

[1, 2, 3, 4, 7, 8, 9]

Im obigen Code haben wir den Index 4 ausgewählt und 3 Elemente 7,8,9 an diesem Index hinzugefügt.

Verwenden der Methode concat() zum Anhängen von Elementen in einem Array

Die Methode concat() nimmt Arrays als Eingabe und verkettet sie miteinander, d. H. Sie nimmt ein Array und hängt den Rest an sein Ende. Dieser Operator ändert jedoch nicht das ursprüngliche Array und gibt ein völlig neues Array zurück, das das kombinierte Ergebnis enthält. Es können zwei oder mehr Arrays verwendet und miteinander verkettet werden. Da diese Methode das angegebene Array nicht ändert, ist sie nicht mutativ.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = arr.concat(arr2);
console.log(arr3);

Ausgabe:

[1, 2, 3, 8, 9, 10]

Im obigen Code nehmen wir zwei Arrays, arr und arr2, und rufen die Funktion concat() auf, um sie zu verketten und das neue Array zu bilden - arr3.

Verwenden der spread-Syntax zum Anhängen von Elementen in einem Array

Wir können die Spread-Syntax verwenden, um vollständige Arrays an ein bestimmtes Array anzuhängen. Es ist eine nicht mutative Methode, da wir nur die Array-Elemente in ein neues Array verteilen. Es ist der Operation concat() sehr ähnlich. Es hilft uns, eine Kopie zu erstellen oder zwei getrennte Arrays zusammenzuführen. Es ist wichtig, die Spread-Syntax sorgfältig zu verwenden. Wenn wir die Syntax verwenden const arr = [arr1, arr2]; Wir erhalten ein verschachteltes Array mit zwei Subarrays, während wir const arr=[...arr1 , ...arr2]; verwenden. Wir verketten die Elemente beider Arrays miteinander.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = [...arr, ...arr2];

Ausgabe:

[1, 2, 3, 8, 9, 10]

Im obigen Code haben wir den Spread-Operator verwendet, um zwei Arrays, arr und arr2, an ein neues Array anzuhängen - arr3.

Alle oben genannten Methoden werden von allen gängigen Browsern mit Ausnahme der Spread-Syntax unterstützt. Internet Explorer unterstützt die Spread-Syntax nicht.