ECMAScript-Arrays (Einführung)

Übersicht zu den Array-Methoden

Ein Array kann angelegt werden mit var arr = new Array(); oder kürzer (und meist günstiger) mit var arr = [];.
Beispiel: 

var a    = [ ]; 
    a[2] = [ ];          a[2][1] = 'a[2][1]-Wert';
    a[4] = 'a[4]-Wert'; 

    // Achtung:
    // nicht definierte Array-Werte sind undefined
    // und      a.length      ist jetzt   5
    // und      a[2].length   ist jetzt   2

Für Arrays gibt es eingebaute Methoden: 

 concat()   join()            pop()       push()
 reverse()  shift()           slice()     sort()
 splice()   toLocaleString()  toString()  unshift()
 valueOf()
Eigenschaft
.length liefert die Länge des Array (=Anzahl der Elemente)
Methoden die den Array verändern
.pop() liefert letztes Array-Element und löscht es
.push() .push(Element) hängt ein Element am Ende des Array-Elemente an und gibt die Länge zurück
.reverse() Dreht die Reihenfolge eines Arrays um
.shift() liefert das erste Element eines Arrays und entfernt es
.sort() .sort([vergleichsfunktion]) sortiert den Array
.splice() .splice(position, anzahlLöschen, [element1][, ..., elementN])
fügt Elemente einem Array hinzu und/oder löscht welche
.unshift() .unshift(element1[, ..., elementN]) fügt ein oder mehrere Elemente am Anfang das Arrays hinzu und gibt die Länge zurück
Zugriffsmethoden (Array bleibt ungeändert)
.concat() Gibt einen neuen Array zurück der aus diesem Array und angefügten Arrays oder Werten besteht
.join() Verbindet die Array-Elemente zu einem String
.slice() Extrahiert einen Ausschnitt aus einem Array
.toString() Gibt einen String aller Arrayelemente zurück
.indexOf (JS1.6) Gibt die Position des ersten Vorkommens eines Elements zurück oder -1 falls keins gefunden wurde
.lastIndexOf (JS1.6) Gibt die Position des letzten Vorkommens eines Elements zurück oder -1 falls keins gefunden wurde
Schrittmethoden, Iteratorenfilter (JS1.6) für einen neuen Array Rückgabewert true
.forEach (JS1.6) Calls a function for each element in the array.
.every (JS1.6) Gibt true zurück, wenn jedes Element die angegebene Prüffunktion besteht
.map (JS1.6) Erstellt einen neuen Array aus der Anwendung der Funktion auf jedes Element
.some (JS1.6) Gibt true zurück, wenn mindestens ein Element die angegebene Prüffunktion besteht
.reduce (JS1.8) ...
.reduceRight (JS1.8)...
Unterschiede zwischen Array und Objekt ([ ], { })

ECMAScript-Objekte und ECMAScript-Arrays unterscheiden sich. Arrays haben automatisch "length-property" (normale Objekte nicht) aber keine Methoden- und Properties-Ergänzungen. Bei einem Array kann der Index ["..."] ein String sein oder als "Data" manipuliert werden. Bei einem Objekt kann der "." nicht manipuliert werden.

Ein Array/Objekt kann durch folgende Methoden erzeugt werden: 

  // Array:
  var arr = [ ];           // oder
  var arr = new Array();       // oder
  var arr = new Array([size]); // oder
  var arr = new Array([element0[, element1[, ...[, elementN]]]]);

  // Object:
  var obj = { };            // oder
  var obj = new Object();       // oder ...
1. Vergleich: Array und Objekt anlegen: 
  var arr = 
  [
    "Müller",  "Giessen",
    "Schulze", "Berlin",
    "Weber",   "Frankfurt" 
  ];
  
  var obj = 
  {
      name0:"Müller",  ort0:"Giessen",
      name1:"Schulze", ort1:"Berlin",
      name2:"Weber",   ort2:"Frankfurt" 
  };
  var s = "";
  s += "Array-Zugriffe:";
  s += "<br />arr[0]=" + arr[0];
  s += "<br />arr[5]=" + arr[5];
  arr.shift(1);
  s += "<br />Nach arr.shift(1) ist";
  s += "<br />arr[0]=" + arr[0];
  s += "<br />arr[5]=" + arr[5];
  s += "<br /><br />";

  s += "Objekt-Zugriffe:";
  s += "<br />obj.name0=" + obj.name0;
  s += "<br />obj.ort2="  + obj.ort2;
  
  document.write(s);

Anzeige:

2. Vergleich: Array und Objekt anlegen: 
<script type="text/javascript">/*<![CDATA[*/
var arr = [ ["Müller",  "Giessen"  ],
            ["Schulze", "Berlin" ],
            ["Weber",   "Frankfurt"] 
          ];

var obj = { row0:{nam0:"Müller",  ort0:"Giessen"  },
            row1:{nam1:"Schulze", ort1:"Berlin"   },
            row2:{nam1:"Weber",   ort1:"Frankfurt"} 
          };

var s = "arr[2][1]=" + arr[2][1];
    s += "<br />";
    s += "obj.row2.ort1="+obj.row2.ort1;
document.write(s);
/*]]>*/</script>
Array.isArray

Ein typeof my_arr lieferte keine zuverlässiges Ergebnis ( historische Gründe ). Der folgende Code kann auch bei solchen Browsern genutzt werden. 

if(!Array.isArray) {
  Array.isArray = function (vArg) {
    return Object.prototype.toString.call(vArg) === "[object Array]";
  };
}
Arrays (1-dim, 2-dim, assoziativ, prototype)
1-dim Arrays
1-dim
Arrays 
  var i, s = "";
  var arr = ["0" ,1, "2"];
//var arr = new Array("0" ,1, "2");
  arr[4] = 4;
  s +=  "typeof(arr)="+typeof(arr)+"<br>";
  for(i=0; i < arr.length; ++i) {
    s +=  arr[i];
    s +=  ", typeof(arr[" + i + "])=";
    s +=  typeof(arr[i]) + "<br>";
  } document.write(s);
Anzeige von arr:
2-dim Arrays
2-dim
Arrays 
  var arr = new Array(3);
  for (var i=0; i < arr.length; ++i){
    arr[i] = new Array(4);
    for (var j=0; j < arr[i].length; ++j) {
      arr[i][j] = (i+4)*(j+1);
    }
  }
  var sdez = "", shex = ""; // Ausgabe:
  for (var i=0; i < arr.length; ++i){
    for (var j=0; j < arr[i].length; ++j) {
      sdez += arr[i][j]             +",";
      shex += arr[i][j].toString(16)+",";
    } sdez += "<br>"; shex += "<br>";
  } 
  document.write("<br>dez:<br>"+sdez);
  document.write("<br>hex:<br>"+shex);
Anzeige des 3x4-arr:
assoziative Arrays
assoziative
Arrays 
 var arr        = [];
 arr[0]         = [];
 arr[0]["name"] = "Mueller";
 arr[0]["ort"]  = "Giessen";

 arr[1]         = [];
 arr[1]["name"] = "Schulze";
 arr[1]["ort"]  = "Berlin";

 arr[3]         = [];
 arr[3]["name"] = "Weber";
 arr[3]["ort"]  = "Frankfurt";
 var i, idx, s ="";
 for (i=0; i < arr.length; ++i) {
   if(!arr[i]) continue;
   s += "<br>arr[" + i + "]=|";
   for (idx in arr[i]) {
     s += arr[i][idx] + "|";
   }
 } document.write(s);
Zeichenkette als Index:
arr[1].name entspricht
Ausgabe: arr[1]["name"]
Array.
prototype

Implizite Deklaration werden oft als Prototyp bezeichnet. 

function array_idx_max() {
  var i, idx=-1, max = this[0];
  for (i = 1; i < this.length; i++) {
    if (max < this[i]) {
        max = this[i]; idx = i;
    }
  } return idx;
}
Array.prototype.idx_max = array_idx_max;

 var arr = [1, 2, 3, 4, 2, 1];
 var s1  = "Ausgabe s1 ohne User-<br>"
     s1 += "toString()-prototype:<br>";
     s1 += arr.toString()+"<br>";
     s1 += "max="+arr[arr.idx_max()];
     document.write(s1+"<br><br>");

function array_to_string() {
  var i, s  = "";
  for (i = 0; i < this.length; i++) {
    s += "["+i+"]="+this[i]+"<br>";
  } return s;
}
Array.prototype.toString = array_to_string;

var s2  = "Ausgabe s2 mit <br>"
    s2 += "toString()-prototype:<br>";
    s2 += arr.toString(); document.write(s2);
Anzeige:

Beispiele mit Arrays (.push, .shift, .sort, .split, .join, .slice, .splice)
Array sortieren
Array
sortieren 
  function vergleich(a,b) { 
    return (a-b); 
  }

  var aa = [66, 7, 11];
  var x = aa.pop(); // hole 11 
  aa.push(x);       // 11 wieder drauf
  aa.push(13);      // 13 drauf
  aa.push(2);       //  2 drauf
  aa.shift();       // 66 vorn raus
  aa.unshift(77);   // 77 vorn rein

  var s = " vor dem Sortieren:<br>";
  s += aa;  
  s += "<br>lexikalisch sortiert:<br>";
  s += aa.sort();  
  s += "<br>numerisch sortiert:<br>";
  s += aa.sort(vergleich);  
  document.write(s);
Anzeige
.splice() 
var s, arr = [];
arr[0] = "e0";
arr[1] = "e1";
arr[2] = "e2";
arr[3] = "e3";
arr[5] = "e5";

s = arr.toString()+ "<br />";
arr.splice(3,2,"E3");
s += arr.toString();
document.write(s);

Hinweis: Mit Hilfe von .splice() können Elemente aus einem Array arr entfernt und/oder eingefügt werden:
arr.splice(start,delCount,[item1[,item2[, ...[,itemN]]]])

Anzeige:
.join() 
var arr = ["11", "12", "13", 14];
var str = arr.join("|");

var s = "typeof str =" + typeof str;
    s += "<br />str = "  + str;

document.write(s)
Anzeige:
.split()
.join()
.slice() 
  var str = "Carl G Jung (Psych)", sep =" ";
  var arr = str.split(sep);
  
  var s = arr.slice(0,-1).join("|")+"<br />";

  for (var i=0; i < arr.length; ++i) {
    s += "arr["+i+"]="+arr[i]+"<br />";
  } 
  document.write(s);

Hinweis: arr.slice(0,-1) ist ein Teilarray von arr mit den Elementen [0],[1], ... bis zum Vorletzten. .join("|") verbindet diese Elemente zu einen String, wobei jeweils dazwischen das Zeichen .join("|") eingefügt wird.

Teilstrings von str:
.concat() 
   var s1 = "Hal";  
   var s2 = "lo ";
   var s3 = s1.concat(s2); // s3 = s1 + s2;

   var a1 = [0,1,2];
   var a2 = ["Welt",5];
   var arr = a1.concat(s3, a2);

   document.write(arr);
Anzeige:
.reverse()
.shift()
.splice()
.slice() 
  var a1 = [0, 1, 222, 333, 444, 5];
  //  lösche [2],[3],[4] u.füge ein 2,3,4 ein:
      a1.splice(2,3, 2,3,4);
      a1.shift(); // löscht a1[0]
  //  kopiere ohne letztes Element:
  var a2 = a1.slice(0,-1);
  var a3 = a2.reverse(); 
  var 
  s  =  "a1.length="+a1.length;
  s += "<br>";
  s += "a2.length="+a2.length;
  s += "<br><br>";
  s += "a3=<br>"       +a3;
  document.write(s);
Anzeige:
Wie können (.push, .pop, .shift, .unshift, .splice) implementiert werden?

Diese Funktionen können die Methoden, die zu einem Array gehören, erweitern (Array.prototype).

Wie kann ppush() implementiert werden? 

if (!Array.prototype.push) {
 Array.prototype.push=function() {
  for (var i=0; i<arguments.length; i++) 
    this[this.length]=arguments[i];
  return this.length; // Verhalten von JS > 1.2
 };
}

Wie kann pop() implementiert werden? 

if (!Array.prototype.pop) {
 Array.prototype.pop=function() {
  return this[this.length--];
 };
}

Wie kann shift() implementiert werden? 

if (!Array.prototype.shift) {
 Array.prototype.shift=function(){ 
  // schnell implementiert, aber nicht schnell
  this.reverse();
  var rv=this.pop();
  this.reverse();
  return rv;
 };
}

Wie kann unshift implementiert werden? 

if (!Array.prototype.unshift) {
 Array.prototype.unshift=function() { 
  // schnell implementiert, aber nicht schnell
  this.reverse();
  for (var i=arguments.length-1; i>=0; i--) 
       this[this.length]=arguments[i];
  this.reverse();
  return this.length;
 };
}

Wie kann splice implementiert werden? 

if (!Array.prototype.splice) {
 Array.prototype.splice=function(start,count) {
  var removed=new Array();
  var tail=new Array();
  var i;
  if (start<0) start += this.length;
  for (i=0; i<count; i++) removed.push(this[start+i]);
  for (i=start + count; i < this.length; i++) 
       tail.push(this[i]);
  this.length = start;
  for (i=2; i<arguments.length; i++) 
       this[this.length]=arguments[i];
  for (i=0; i<tail.length; i++) 
       this.push(tail[i]);
  return removed;
 };
}
Beispiel: Array.prototype.indexOf, .map und .forEach (Iterator)
Array.prototype.indexOf(el)
.indexOf

Gibt den Index des gefundenen Array-Elementes zurück, sonst -1 

if(!Array.indexOf) {
  Array.prototype.indexOf = function(el,start) {
    for(var i = (start || 0); i < this.length; i++) {
      if(el == this[i]) return i;
    } return -1;
  }
}
var aa=['0',1,'2',3];
document.write("aa.indexOf('2')="+aa.indexOf('2'));
Anzeige

Array.prototype.forEach(function [,dstObj])
.map 

if (!Array.prototype.map) { 
  // IE braucht eine Sondereinladung:
  Array.prototype.map = function(fn, thisObj) {
    thisObj = thisObj || window; var r = []; 
    for (var i = 0, j=len = this.length; i < j; ++i) {
      r.push(fn.call(thisObj, this[i], i, this));
    } return r;
 };
}

function build_string(element, index, array) {
    return "[" + index + "]=" + element;
}
var aa = [1, 4, 9, 25];
var a1 = aa.map(function(x, i) { return i; });
var a2 = aa.map(function(x, i) { return x; });
var a3 = aa.map(function(x, i, o) { return o[i]; });
var a4 = aa.map(build_string);
var a5 = aa.map(Math.sqrt);

var s = "<br />a1: " + a1 + " = Array-Index"
  + "<br />a2: " + a2 + " = Element-Werte"
  + "<br />a3: " + a3 + " = Element-Werte"
  + "<br />a4: " + a4
  + "<br />a5: " + a5 + " = sqrt-Beispiel";

document.write(s);
Anzeige
.forEach 

if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(fn, thisObj) {
    thisObj = thisObj || window;
    for (var i = 0, j = this.length; i < j; ++i) {
        fn.call(thisObj, this[i], i, this);
    }
  };
}
var dst = {
    arr: [],
    empty: function() { this.arr = []; },
    sav: function(s) { this.arr.push(s); },
    sav1: function(s) { this.sav("|" + s); },
    sav2: function(s) { this.sav("<" + s + ">"); },
    toString: function() { return this.arr.join(""); }
};

// schreibe in arr des dst-Objekt
[1, 2, 3].forEach(dst.sav1, dst);
[4, 5, 6].forEach(dst.sav1, dst);

var s16 = "<br />" + dst.toString();
// lösche arr des dst-Objekt
dst.empty();
// schreibe in arr des dst-Objekt
[7, 8, 9].forEach(dst.sav2, dst);

var s789 = "<br />" + dst.toString();
var s0 = "<br />dst.arr[0]=" + dst.arr[0];

document.write(s16 + s789 + s0);
Anzeige
Beispiel: Merge Arrays

Gegeben sind mehrere Arrays, wie z.B. ["A","B"],['a','b'],[1,2]. Alle Elemente sollen nun mit merge([["A","B"],['a','b'],[1,2]]) in einen Arrays "gemerged" werden: 

function merge(arrs) { 
  var n = arrs.length,k,i = -1,m = 0,a,r;
  while (++i < n) {m += arrs[i].length;}
  r = new Array(m);
  while (--n >= 0) { a = arrs[n]; k = a.length; 
    while (--k >= 0) { r[--m] = a[k]; }
  } return r;
}

Mit der eingebauten Array-Funktion .concat 

function merge(arrs) { 
  var n = arrs.length, r = [];
  for( i=0; i < n; i += 1) {
    r = r.concat(arrs[i]);
  } return r;
}
Beispiel: Stack mit Hilfe eines Array

Mit einem Array wird im folgenden ein Stack mit dem Konstruktor stack() und den Member-Funktionen push(str), pop() und show(obj) aufgebaut.

Beispiel Anzeige 
function stack() {
  this.stack_arr = [];
  this.stack_arr[0] = 1;
  this.push         = push;
  this.pop          = pop;
  this.show         = show;
  stack = stack.length = this;
}
function push(str) {
  var idx = this.stack_arr[0];
  this.stack_arr[idx] = str;
  this.stack_arr[0] = ++idx;
}
function pop() {
  var idx = this.stack_arr[0];
  var str = this.stack_arr[--idx];
  if(idx < 1) alert("pop()-Error");
  this.stack_arr[0] = idx; return str;
}
function show(obj) { 
  document.write(obj.stack_arr);
}
////////////////////////////////////
function test() { 
  var obj = new stack(), sa, sb; 
  obj.push("4");  
  obj.push([1, "Hallo", "Welt"]);
  sb = obj.pop(); sa = obj.pop(); 
  obj.push(sb);   obj.push(sa); 
  obj.show(obj);
}
test();
Die Funktion stack()
initialisiert den Stack als
einen Array this.stack_arr
Der "Top of Stack Pointer"
ist der aktuelle Array-Index,
der in this.stack_arr[0]
gespeichert wird.
Zum Stack gehören die
Member-Funktionen:
push(), pop(), show().

Es wird kein Überlauf
kontrolliert.
Anzeige durch den
test()-Aufruf:
Beispiel: Matrix mit Hilfe von Arrays

Ein Beispiel zeigt, wie Matrizen-Operationen (hier lediglich die Addition add) mit dem Konstruktor Matrix(args). Die Eingabe args ist ein String, der mit dem Seperator ";" in Teilstrings gesplittet wird. Jeder Teilstring wird mit dem Seperator "," in die einzelnen Elemente zerlegt. Ist das Element eine parseFloat()-Zahl, so wird diese als Zahl im Array hinterlegt (sonst als String). Die Member-Funktionen von Matrix() sind toString(), getArray(), add(matrix) programmiert werden können. Abhängig von dem Element-Typ führt add(matrix) eine Zahlenmultiplikation oder eine STringverkettung durch.

Das Beispiel zeigt, wie Matrizen-Operationen mit dem Konstruktor Matrix(args) durchgeführt werden können. Die Konstruktor-Eingabe args ist ein String, der mit dem Seperator ";" in Teilstrings gesplittet wird. Jeder Teilstring wird mit dem Seperator "," in die einzelnen Elemente zerlegt. Ist das Element eine parseFloat()-Zahl, so wird diese als Zahl im Array hinterlegt (sonst als String). Die Member-Funktionen von Matrix() sind toString(), getArray(), add(matrix).

Beispiel Anzeige 
function Matrix(args) {
  this.arr = [];
  var sj_sep=",", si_sep=";";
  var i,j,nan,s, sj, si = args.split(si_sep);

  for(i=0; i < si.length; ++i) {  
    sj = si[i].split(sj_sep);
    this.arr[i] = [];
    for(j=0; j < sj.length; ++j) {
      nan = parseFloat(sj[j]);
      if(isNaN(nan)) { this.arr[i][j] = sj[j];
      } else {         this.arr[i][j] = nan; }
    }
  } 
}
//-----------------------------------------------
Matrix.prototype.toString = function toString() 
{
  var i,j,s = ".toString():"; 
  for(i=0; i < this.arr.length; ++i) { s += "<br>";
    for(j=0; j < this.arr[i].length; ++j) {
      s += typeof(this.arr[i][j]);
      s += "(["+i+"]["+j+"])=";
      s += this.arr[i][j]+"<br>";
    } 
  } return s;
}
//-----------------------------------------------
Matrix.prototype.getArray = function getArray() 
{ return this.arr; }
//-----------------------------------------------
Matrix.prototype.add = function add(matrix) 
{
  var i,j, mat = matrix.getArray();
  var s="", si_sep=";", sj_sep=",";
  if(this.arr.length != mat.length) return null; 
  for(i=0; i < this.arr.length; ++i) {
    if(this.arr[i].length != mat[i].length) return null; 
    if(i>0) s += si_sep;
    for( j=0; j < this.arr[i].length; ++j) {
      if(j>0) s += sj_sep;
      s += this.arr[i][j] + mat[i][j];
    } 
  } return new Matrix(s);
}
//-----------------------------------------------
  var mat1 = new Matrix("0,1;  2, 3");
  var mat2 = new Matrix("1,0; -1,-2");
  var mat3 = mat1.add(mat2);

  var s1  = "<br>mat1" + mat1;  
  var s2  = "<br>mat2" + mat2;  
  var s3  = "<br>mat3" + mat3;  

  document.write(s1+s2+s3);
Anzeige:
Beispiel: Sortieren nach der 1. Table-Spalte

Wenn eine XHTML-Table im Source-Text vorliegt, so kann dieser XHTML-Source-Text so umgestellt werden, dass die sortiert-angezeigte Tabelle nach der 1. Spalte sortiert ist. Verwendet werden die Funktionen split(), slice(), unshift() und join() 

<script type="text/javascript">/*<![CDATA[*/
 var str = "<table border=\"1\">\n"
  +"<tr><th>TITEL A</th><th>TITEL B</th><th>TITEL C\n"
  +"</td></tr><tr><th> cc </th><td> XX </td><td> XXX\n"
  +"</td></tr><tr><th> bb </th><td> YY </td><td> YYY\n"
  +"</th></tr><tr><th> aa </th><td> ZZ </td><td> ZZZ\n"
  +"</td></tr></table>";
 document.write("<br />ANZEIGE VORHER<br />"+str);

 var arr = str.split(/<\/tr/);
 var rows = arr.slice(1,arr.length-1);
    rows.sort();
    rows[rows.length] = arr[arr.length-1];
    rows.unshift(arr[0]); //vorn arr[0] hinzu
 str = rows.join("\n<\/tr");
 document.write("ANZEIGE NACHHER<br />"+str);
/*]]>*/</script>