JavaScript: Wie man Elemente zu einem Array hinzufügt (push, unshift, splice, concat, spread) — Leitfaden für Anfänger bis Fortgeschrittene

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

JavaScript ist eine der wesentlichen Programmiersprachen für die Webentwicklung. Zu seinen Kernfunktionen gehören Arrays, die eine entscheidende Rolle beim effizienten Verwalten und Manipulieren von Daten spielen.

In diesem Artikel erklären wir ausführlich, wie man Elemente zu Arrays in JavaScript hinzufügt, wobei wir spezifische Methoden und deren Anwendung behandeln. Indem wir alles von grundlegenden Methoden bis zu fortgeschritteneren Techniken abdecken, ist dieser Leitfaden für Anfänger bis hin zu fortgeschrittenen Lernenden nützlich.

2. Grundkonzepte von Arrays

Was ist ein Array? — Die Grundlagen der Datenverwaltung

Ein JavaScript Array (Array) ist eine Datenstruktur, die es ermöglicht, mehrere Werte gemeinsam zu speichern und zu verwalten. Es kann verschiedene Datentypen als Elemente enthalten, wie Zeichenketten, Zahlen und Objekte.

Beispiel:

let fruits = ["apple", "banana", "orange"];
console.log(fruits); // ["apple", "banana", "orange"]

Sie können auf Array-Elemente über einen Index zugreifen. Da Indizes bei 0 beginnen, kann das erste Element mit fruits[0] abgerufen werden.

console.log(fruits[0]); // "apple"

Array-Initialisierung und Grundlegende Operationen

Sie können Arrays auf folgende Weise initialisieren.

1. Ein leeres Array erstellen:

   let arr = [];
   

2. Ein Array mit Anfangswerten erstellen:

   let numbers = [1, 2, 3, 4];
   

3. Ein Array über mehrere Zeilen schreiben:

   let colors = [
     "red",
     "blue",
     "green"
   ];
   

Als grundlegende Array-Operation können Sie die length-Eigenschaft verwenden, um die Anzahl der Elemente zu erhalten.

console.log(colors.length); // 3

3. Grundlegende Methoden zum Hinzufügen von Elementen zu einem Array

3.1 Zum Ende hinzufügen: push()

Was ist push()?

Die Methode push() ist die grundlegendste Möglichkeit, Elemente am Ende eines Arrays hinzuzufügen. Sie verändert (mutiert) das ursprüngliche Array und gibt die neue Länge zurück.

Syntax

array.push(element1, element2, ..., elementN);

Beispiel

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Beispiel: Mehrere Elemente hinzufügen

fruits.push("grape", "melon");
console.log(fruits); // ["apple", "banana", "orange", "grape", "melon"]

3.2 Am Anfang hinzufügen: unshift()

Was ist unshift()?

Die Methode unshift() fügt Elemente am Anfang eines Arrays hinzu. Wie push() verändert sie das ursprüngliche Array und gibt die neue Länge zurück.

Syntax

array.unshift(element1, element2, ..., elementN);

Beispiel

let animals = ["dog", "cat"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "dog", "cat"]

3.3 An beliebiger Position hinzufügen: splice()

Was ist splice()?

Die Methode splice() ist eine flexible Option, die es ermöglicht, Elemente an beliebiger Position hinzuzufügen oder zu entfernen.

Syntax

array.splice(start, deleteCount, item1, item2, ..., itemN);

Beispiel

Nur Elemente hinzufügen:

let colors = ["red", "blue", "green"];
colors.splice(1, 0, "yellow");
console.log(colors); // ["red", "yellow", "blue", "green"]

Gleichzeitig hinzufügen und entfernen:

colors.splice(2, 1, "purple");
console.log(colors); // ["red", "yellow", "purple", "green"]

Zusammenfassung

4. Fortgeschrittene Techniken: Arrays zusammenführen und Elemente hinzufügen

4.1 Arrays zusammenführen: concat()

Was ist concat()?

Die Methode concat() ist eine nicht-mutierende (nicht-zerstörende) Methode, die verwendet wird, um mehrere Arrays zu einem neuen Array zu verbinden. Die ursprünglichen Arrays bleiben unverändert, und ein neues Array wird zurückgegeben.

Syntax

array1.concat(array2, array3, ...);

Beispiel

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

4.2 Arrays mit Spread‑Syntax zusammenführen (...)

Was ist Spread‑Syntax?

Spread‑Syntax (...) ist ein modernes JavaScript‑Feature, das Elemente aus Arrays oder Objekten erweitert. Sie ermöglicht das Zusammenführen von Arrays oder das Hinzufügen neuer Elemente mit prägnantem, lesbarem Code.

Syntax

[...array1, ...array2, ...elements];

Beispiel

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = [...array1, ...array2];
console.log(result); // [1, 2, 3, 4, 5, 6]

4.3 Vergleich von Optionen zum Zusammenführen von Arrays

Zusammenfassung

In diesem Abschnitt haben wir fortgeschrittene Techniken zum Zusammenführen von Arrays behandelt.

• concat()‑Methode : Eine nicht‑mutierende Methode, um Arrays zusammenzuführen, ohne die Originale zu ändern.
• Spread‑Syntax : Ein modernes, prägnantes Vorgehen für flexible Array‑Operationen.

5. Best Practices für effizientes Array‑Handling

5.1 Mutierende vs. nicht‑mutierende Methoden

Was sind mutierende Methoden?

Dies sind Methoden, die das ursprüngliche Array direkt verändern.

Was sind nicht‑mutierende Methoden?

Dies sind Methoden, die das ursprüngliche Array nicht verändern, sondern stattdessen ein neues Array zurückgeben.

5.2 Leistungsbewussten Code schreiben

Schleifen optimieren

Effiziente Schleife:

let length = arr.length;
for (let i = 0; i < length; i++) {
  console.log(arr[i]);
}

Method Chaining verwenden

let numbers = [1, 2, 3, 4, 5];
let result = numbers
  .filter(num => num > 2)
  .map(num => num * 2);

console.log(result); // [6, 8, 10]

5.3 Verbesserung der Code‑Lesbarkeit

Klare Variablennamen verwenden

let userIds = [1, 2, 3];

Kommentare angemessen hinzufügen

let evenIds = userIds.filter(id => id % 2 === 0);

Template‑Literals verwenden

let name = "Yamada";
let age = 25;
console.log(`${name} is ${age} years old.`);

Zusammenfassung

In diesem Abschnitt haben wir bewährte Methoden für effiziente Array‑Operationen vorgestellt.

• Auswahl zwischen mutierenden und nicht‑mutierenden Methoden
• Verwendung von leistungsbewussten Schleifen und Method Chaining
• Verbesserung der Lesbarkeit durch Namensgebung und Kommentare

6. Praktische Beispiele und Anwendungsfälle

6.1 Verwaltung von Formulardaten

Szenario: Formulareingabewerte in einem Array speichern

let userList = [];

function addUser(name) {
  userList.push(name);
  console.log(userList);
}

addUser("Sato");
addUser("Suzuki");
addUser("Tanaka");

Ausgabe:

["Sato"]  
["Sato", "Suzuki"]  
["Sato", "Suzuki", "Tanaka"]

Entfernen eines bestimmten Elements aus dem Array

function removeUser(name) {
  userList = userList.filter(user => user !== name);
  console.log(userList);
}

removeUser("Suzuki");

Ausgabe:

["Sato", "Tanaka"]

6.2 Dynamische Daten in einer Aufgabenverwaltungs‑App hinzufügen

Szenario: Aufgaben hinzufügen und den Abschluss verfolgen

let tasks = [];

function addTask(name) {
  tasks.push({ name: name, completed: false });
  console.log(tasks);
}

function completeTask(index) {
  tasks[index].completed = true;
  console.log(tasks);
}

addTask("Cleaning");
addTask("Laundry");
completeTask(0);

Ausgabe:

[{ name: "Cleaning", completed: true }, { name: "Laundry", completed: false }]

6.3 Umgang mit komplexen Datenstrukturen

Szenario: Arbeiten mit verschachtelten Arrays und Objekten

let users = [
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer"] },
];

function addRole(userId, role) {
  let user = users.find(user => user.id === userId);
  if (user && !user.roles.includes(role)) {
    user.roles.push(role);
  }
  console.log(users);
}

addRole(2, "editor");

Ausgabe:

[
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer", "editor"] }
]

Zusammenfassung

In diesem Abschnitt haben wir praktische Anwendungen von Array‑Operationen anhand realer Anwendungsfälle erklärt.

1. Verwalten von Formulareingabedaten – Grundlegende Operationen zum Hinzufügen und Entfernen von Elementen.
2. Erstellen einer Aufgabenverwaltungs‑App – Dynamische Array‑Verarbeitung und Statusaktualisierungen.
3. Umgang mit komplexen Datenstrukturen – Hinzufügen und Aktualisieren von Elementen in verschachtelten Arrays und Objekten.

7. Häufig gestellte Fragen (FAQ)

Q1. Was ist der einfachste Weg, ein Array zu leeren?

Antwort: Setze die Eigenschaft length auf 0

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

Q2. Wie kann ich nur eindeutige Elemente hinzufügen (keine Duplikate)?

Antwort: Verwende includes() oder Set

Beispiel 1: Duplikatprüfung mit includes()

let arr = [1, 2, 3];
let value = 3;

if (!arr.includes(value)) {
  arr.push(value);
}
console.log(arr); // [1, 2, 3]

Beispiel 2: Duplikate entfernen mit Set

let arr = [1, 2, 3];
let values = [3, 4, 5];

arr = [...new Set([...arr, ...values])];
console.log(arr); // [1, 2, 3, 4, 5]

Q3. Wie füge ich Elemente zu einem verschachtelten Array hinzu?

Antwort: Verwende push() oder Spread‑Syntax

Beispiel 1: Ein neues verschachteltes Array hinzufügen

let nestedArray = [[1, 2], [3, 4]];
nestedArray.push([5, 6]);
console.log(nestedArray); // [[1, 2], [3, 4], [5, 6]]

Beispiel 2: Ein Element in ein bestimmtes verschachteltes Array einfügen

nestedArray[1].push(7);
console.log(nestedArray); // [[1, 2], [3, 4, 7], [5, 6]]

Zusammenfassung

8. Abschließende Zusammenfassung und Vergleichstabelle

8.1 Gesamte Zusammenfassung

Grundlegende Array‑Operationen

• Was ist ein Array? Eine Struktur, die mehrere Werte verwaltet, und du greifst über Indizes auf Elemente zu.
• Initialisierung und Grundoperationen Arrays lassen sich einfach mit [] erstellen, und du kannst die Elementanzahl mit length prüfen.

Methoden zum Hinzufügen/Entfernen von Elementen

• Am Ende hinzufügen: push() Einfach und weit verbreitet, aber es verändert das ursprüngliche Array.
• Am Anfang hinzufügen: unshift() Nützlich, wenn die Reihenfolge wichtig ist, aber achte auf die Performance.
• An beliebiger Position hinzufügen/entfernen: splice() Sehr flexibel, aber die Syntax kann etwas komplex sein.

Zusammenführen und Erweitern von Arrays

• concat() Eine nicht‑mutierende, sichere Methode, mehrere Arrays zu verbinden.
• Spread‑Syntax (...) Einfach, lesbar und ideal für moderne JavaScript‑Umgebungen.

Effizienz‑Tipps

• Mutierende vs. nicht‑mutierende Methoden Wähle nicht‑mutierende Methoden, wenn du die Originaldaten erhalten möchtest.
• Leistungsorientierte Schleifen Optimiere Geschwindigkeit und Speicherverbrauch, wo es sinnvoll ist.

Beispiele und Anwendungsfälle

• Verwaltung von Formulareingaben Werte in einem Array speichern und Hinzufügen/Entfernen einfach implementieren.
• Aufgabenverwaltungssysteme Aufgaben dynamisch hinzufügen und entfernen und den Abschlussstatus verfolgen.
• Operationen mit verschachtelten Daten Flexibel komplexe Strukturen mit verschachtelten Arrays und Objekten handhaben.

8.2 Vergleichstabelle der Array‑Methoden

Zusammenfassung

In diesem Artikel haben wir eine strukturierte Erklärung der JavaScript Array‑Operationen von grundlegenden bis zu fortgeschrittenen Techniken bereitgestellt.

• Grundlegende Array‑Operationen und Methoden zum Hinzufügen/Entfernen von Elementen.
• Fortgeschrittene Techniken wie das Zusammenführen und Erweitern von Arrays.
• Praktische Anwendungsfälle und Tipps für ein effizientes Array‑Management.
• Häufige Fragen und deren Lösungen.

Nächste Schritte

Weiter JavaScript lernen und deine Fähigkeiten stärken, indem du diese Array‑Techniken in realen Projekten anwendest!