Array

Zusammenfassung

Das globale Objekt Array ist ein Konstruktor für die Listen-ähnlichen Arrays. Desweiteren stellt dieses Objekt Hilfsmethoden für den Umgang mit Arrays bereit. 

Syntax

[element0, element1, ..., elementN]
new Array(element0, element1, ..., elementN)
new Array(arrayLength)

element0, element1, ..., elementN

Ein Array in Javascript kann mit einer beliebigen Anzahl an Elementen initialisiert werden, indem diese als Parameter an den Konstruktor übergeben werden (auch ein leeres Array ist zulässig). Die einzige Ausnahme bildet sich durch das Übergeben eines einzelnen Parameters vom Typ Number (siehe unten). Diese Ausnahme gilt jedoch nur für das explizite Initialisieren durch die Konstruktor-Funktion, nicht für die Verwendung des Array-Literals.

arrayLength

Wird ein Integer zwischen 0 und (inklusive) 232-1 als einziges Argument übergeben, so wird ein Array dieser Länge initialisiert und zurückgegeben. Jedes Feld im Array wird hierbei mit undefined initialisiert. Übergibt man eine Zahl außerhalb dieses Bereichs, so wird eine RangeError-Exception geworfen.

Beschreibung

Arrays sind Listen-ähnliche Objekte, die mit einer Vielzahl von eingebauten Methoden ausgestattet sind um verschiedene Traversierungs- und Mutationsalgortihmen auszuführen. Weder die Größe des Arrays noch der Typ der einzelnen Elemente ist fixiert. Da die Größe jederzeit zu- oder abnehmen kann, ist jedoch nicht sichergestellt, dass Arrays in Javascript dicht-besetzt sind. Im Allgemeinen sind dies angenehme Eigenschaften, werden dicht-besetzte Arrays für einen bestimmten Use-Case jedoch zwingend benötigt, so kann man sich der Typed Arrays aus WebGL bedienen.

Arrays in Javascript sollten nicht als assoziative Arrays verwendet werden. Stattdessen sollte man hierfür auf einfache Object-Objekte zurückgreifen, auch wenn dies mit gewissen Nachteilen verbunden ist (siehe z.B. Lightweight JavaScript dictionaries with arbitrary keys).

Zugriff auf Array-Elemente

Arrays in Javascript sind nullbasiert, d.h. das erste Element eines Arrays findet sich beim Index 0 und das letzte Element befindet sich beim Index welcher der Länge des Arrays minus 1 entspricht.

var arr = ["this is the first element", "this is the second element"];
console.log(arr[0]);              // prints "this is the first element"
console.log(arr[1]);              // prints "this is the second element"
console.log(arr[arr.length - 1]); // prints "this is the second element"

Array-Elemente sind nichts anderes als Eigenschaften auf dem Array, genauso wie zum Beispiel die toString()-Methode eine Eigenschaft ist. Im Gegensatz zu anderen Eigenschaften kann man auf die Array-Elemente jedoch nicht wie folgt zugreifen (in diesem Fall wird eine SyntaxError-Exception geworfen):

console.log(arr.0);

Dies ist jedoch keine implizite Besonderheit von Arrays und ihren Eigenschaften, sondern liegt daran, dass Eigenschaften deren Name mit einer Zahl beginnt in Javascript prinzipiell nicht über die Punkt-Notation referenziert werden können, sondern über die Klammer-Notation referenziert werden müssen.

Die folgenden zwei Beispiele demonstrieren dieses Verhalten:

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
try {
  console.log(years.0);
} catch (ex) {
  console.log("Using bracket notation");
  console.log(years[0]);
}

try {
  renderer.3d.setTexture(model, "character.png");
} catch (ex) {
  console.log("Using bracket notation");
  renderer["3d"].setTexture(model, "character.png");
}

Hierbei gilt es zu beachten, dass 3d im zweiten Beispiel als String gequotet werden muss, d.h. die Eigenschaft wird über "3d" referenziert. Dies ist auch für die Indizes der Array-Elemente möglich, so würde years["2"] zum Beispiel problemlos funktionieren; im Gegensatz zum obigen Beispiel ist es jedoch nicht nötig. Die 2 in years[2] wird letztlich sowieso von der Javascript-Engine selbst in einen String konvertiert, da implizit eine toString()-Methode aufgerufen wird.

Beziehung zwischen length und numerischen Eigenschaften

Die length-Eigenschaft und numerische Eigenschaften sind miteinander verknüpft. Einige der eingebauten Methoden, wie zum Beispiel join,  slice oder indexOf, verwenden intern den Wert der length-Eigenschaft. Andere Methoden wie push oder splice verändern den Wert dieser Eigenschaft zudem.

var fruits = [];
fruits.push("banana", "apple", "peach");

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

Wird einem Array eine neue Eigenschaft hinzugefügt, die einen gültigen Array-Index darstellt und der außerhalb der momentanen Grenzen des Arrays liegen, so wird die length-Eigenschaft von der Javascript-Engine automatisch angepasst:

fruits[5] = "mango";
console.log(fruits[5]); // "mango"
console.log(Object.keys(fruits));  // ["0", "1", "2", "5"]
console.log(fruits.length); // 6

Im Gegenzug führt das manuelle Vergrößern der length-Eigenschaft jedoch nicht dazu, dass neue Eigenschaften angelegt werden:

fruits.length = 10;
console.log(Object.keys(fruits)); // ["0", "1", "2", "5"]
console.log(fruits.length); // 10

fruits.length = 2;
console.log(Object.keys(fruits)); // ["0", "1"]
console.log(fruits.length); // 2

Erzeugung eines Arrays durch einen match

Das Ergebnis beim Matchen eines Strings auf einen regulären Ausdruck kann in Javascript ein Array erzeugen. Dieses Array besitzt Eigenschaften, die zusätzliche Informationen zu dem gefundenen Ergebnis liefern. Solche Arrays werden zum Beispiel von RegExp.exec, String.match und String.replace erzeugt. 

Um diese besonderen Eigenschaften besser zu verstehen dient das folgende Beispiel und die anschließende Tabelle:

// Matche ein 'd', gefolgt von einem oder mehreren 'b's, gefolgt
// von einem weiteren 'd'.
// Die gefundenen 'b's und das letzte 'd' werden gespeichert.
// Groß- und Kleinschreibung wird ignoriert.

var myRe = /d(b+)(d)/i;
var myArray = myRe.exec("cdbBdbsbz");

The Eigenschaften und Elemente, die hier zurückgegeben werden, finden sich in dieser Tabelle:

Eigenschaften

For properties available on Array instances, see Properties of Array instances.

prototype

Erlaubt das Hinzufügen von Eigenschaften zu allen Array-Objekten.

Methoden

isArray Ab JavaScript 1.8.5

Gibt true zurück, falls der Parameter ein Array ist, ansonsten false.

Generische Methoden

Manchmal möchte man Array-Methoden auf Strings oder andere Array-ähnliche Objekte (wie zum Beispiel das arguments-Objekt) anwenden. Hierbei wird ein String zum Beispiel als Array von einzelnen Zeichen behandelt. Um zum Beispiel zu überprüfen, ob jedes Zeichen in einem String ein Buchstabe ist, kann man folgendes schreiben:

function isLetter(character) {
    return character >= "a" && character <= "z";
}

if (Array.prototype.every.call(str, isLetter)) {
    console.log("Der String '" + str + "' enthält nur Buchstaben!");
}

Diese Notation ist seit Javascript 1.6 jedoch unnötig länglich, da seither generische Versionen existieren:

if (Array.every(isLetter, str)) {
    console.log("Der String '" + str + "' enthält nur Buchstaben!");
}

Generics sind auch auf String verfügbar.

Mit dem folgenden Shim kann man auf allen Browsern die diversen Funktionen als generische Version verfügbar machen, auch wenn sie noch nicht im ECMAScript-Standard vorgesehen sind:

// Assumes Array extras already present (one may use polyfills for these as well)
(function () {
    'use strict';

    var i,
        // We could also build the array of methods with the following, but the
        //   getOwnPropertyNames() method is non-shimable:
        // Object.getOwnPropertyNames(Array).filter(function (methodName) {return typeof Array[methodName] === 'function'});
        methods = [
            'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
            'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
            'forEach', 'map', 'reduce', 'reduceRight', 'filter',
            'some', 'every'
        ],
        methodCount = methods.length,
        assignArrayGeneric = function (methodName) {
            if (!Array[methodName]) {
                var method = Array.prototype[methodName];
                if (typeof method === 'function') {
                    Array[methodName] = function () {
                        return method.call.apply(method, arguments);
                    };
                }
            }
        };

    for (i = 0; i < methodCount; i++) {
        assignArrayGeneric(methods[i]);
    }
}());

Beispiele

Beispiel: Erzeugung eines Arrays

Das folgende Beispiel erzeugt ein Array msgArray mit der Länge 0 und weist dem Array dann Werte für msgArray[0] und msgArray[99] zu, wodurch die length auf 100 erhöht wird:

var msgArray = [];
msgArray[0] = "Hello";
msgArray[99] = "world";

if (msgArray.length === 100) {
    console.log("The length is 100.");
}

Beispiel: Erzeugen eines zwei-dimensionalen Arrays

Das folgende Beispiel erzeugt ein Schachbrett als zwei-dimensionales Array von Strings. Der erste Zug ist das Bewegen eines Bauerns ( "p"  für engl. pawn) von (6,4) nach (4,4).

var board = [ 
    ['R','N','B','Q','K','B','N','R'],
    ['P','P','P','P','P','P','P','P'],
    [' ',' ',' ',' ',' ',' ',' ',' '],
    [' ',' ',' ',' ',' ',' ',' ',' '],
    [' ',' ',' ',' ',' ',' ',' ',' '],
    [' ',' ',' ',' ',' ',' ',' ',' '],
    ['p','p','p','p','p','p','p','p'],
    ['r','n','b','q','k','b','n','r'] ];

console.log(board.join('\n') + '\n\n');

// Bewege den Bauern zwei Felder vor
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

Die Ausgabe sieht dann wie folgt aus:

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , ,p, , , 
 , , , , , , , 
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

Browser-Kompatibilität

Siehe auch

• Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras
• "Indexing object properties" in JavaScript Guide: "Working with objects"
• New in JavaScript 1.7: Array comprehensions
• New in JavaScript 1.6: Array extras
• Draft: Typed Arrays
• Predefined Core Objects#Array Object in the JavaScript Guide