JavaScript/Objekte/Array/push

Die Methode push hängt ein oder mehrere Elemente an das Ende eines Arrays an.

Syntax push(element0, ..., elementN)

Folgende Parameter sind erforderlich:

• element0, ..., elementN: ein oder mehrere Elemente, die angehängt werden sollen

Rückgabewert ist die neue Länge des Arrays.

Beschreibung

Beispiel

var orte = ['Augsburg'];
orte.push('Berlin', 'Chemnitz', 'Dortmund', 'Essen', 'Frankfurt');

console.log(orte);        // 'Augsburg,Berlin,Chemnitz,Dortmund,Essen,Frankfurt'
console.log(orte.length); // 6

Das Beispiel definiert ein Array orte mit dem Städtenamen 'Augsburg'. Danach werden weitere Städtenamen durch die push-Methode angehängt und anschließend durch die console.log-Funktion angezeigt. Die zweite Kontrollausgabe zeigt die Anzahl der Elemente im Array an.

Beachten Sie: Bei Browsern, welche die Methode push nicht kennen, können Sie ein neues Element anhängen, indem Sie mit array[array.length] = "Wert" das Array erweitern.

Anwendungsbeispiel

Beispiel ansehen …

function anhaengen() {
  var eingabe = document.getElementById("input"),
  ul = document.getElementById("ausgabe");
  if (eingabe && ausgabe && eingabe.value.length > 0) {
    farben.push(eingabe.value);
  }
}

Dieses Beispiel besteht aus einer Webseite mit einem Formular mit einem input-Element. In dieses können Sie neue Begriffe eingeben.
Beim Absenden des Formulars wird mit dem logischen Operator && überprüft, ob etwas eingegeben wurde. Diese Eingabe wird dann an den Array farben mit der Methode push angehängt.

farben.sort();

farben.forEach(function (f) {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(f));
  ul.appendChild(li);
});

Anschließend wird der Array mit Array.sort aufsteigend sortiert und dann mit ForEach durchlaufen und jedes Array-Element in einem Listenelement li in die Webseite geschrieben.

Das Absenden eines Formulars mit submit löst das Standardverhalten normalerweise ein Neuladen der Seite aus, sodass erneute Eingaben wieder an das ursprüngliche Array mit nur 5 Elementen angehängt werden.

Unterdrücken des submit-Events

function init() {
  var elem = document.getElementById('form');

  if (elem) {
    elem.addEventListener(
      'submit',
      function (e) {
        e.stopPropagation();
        e. preventDefault();
        return anhaengen();
      }
    );
  }
  anhaengen();
}

Das obige Beispiel unterdrückt daher den submit-Event durch die Methoden stopPropagation und preventDefault, sodass nach einer Erweiterung des Arrays eine erneute Eingabe und damit Erweiterung des Arrays farben möglich ist.

Weblinks

• ECMAScript 2015 (6th Edition, ECMA-262): Array.prototype.push()
• MDN: Array.prototype.push()