JavaScript/Objekte/Array/push
Aus SELFHTML-Wiki
JavaScript | Objekte | Array
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
Beim Absenden des Formulars wird mit dem logischen Operator && überprüft, ob etwas eingegeben wurde. Diese Eingabe wird dann an den Array
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()