Der ECMAScript-Standard definiert Arrays als Abbildungen (Dictionaries) von Indizes auf Werte. Mit anderen Worten, Arrays müssen nicht zusammenhängend sein und können Löcher aufweisen. Zum Beispiel:

> var arr = [];
> arr[0] = 'a';
'a'
> arr[2] = 'b';
'b'
> arr
[ 'a', , 'b' ]

Das vorherige Array hat ein Loch: Es gibt kein Element am Index 1. Löcher in Arrays erklärt Löcher im Detail.

Beachten Sie, dass die meisten JavaScript-Engines Arrays ohne Löcher intern optimieren und sie zusammenhängend speichern.

Arrays sind immer noch Objekte und können Objekteigenschaften haben. Diese werden nicht als Teil des eigentlichen Arrays betrachtet; das heißt, sie werden nicht als Array-Elemente betrachtet:

> var arr = [ 'a', 'b' ];
> arr.foo = 123;
> arr
[ 'a', 'b' ]
> arr.foo
123

Es gibt zwei Möglichkeiten, den Konstruktor Array zu verwenden: Sie können ein leeres Array mit einer gegebenen Länge oder ein Array erstellen, dessen Elemente die gegebenen Werte sind. Für diesen Konstruktor ist new optional: Wenn Sie ihn als normale Funktion aufrufen (ohne new), tut er dasselbe, als wenn Sie ihn als Konstruktor aufrufen.

> var arr = new Array(2);
> arr.length
2
> arr  // two holes plus trailing comma (ignored!)
[ , ,]

// The same as ['a', 'b', 'c']:
var arr1 = new Array('a', 'b', 'c');

> new Array(2)  // alas, not [ 2 ]
[ , ,]

> new Array(5.7)  // alas, not [ 5.7 ]
RangeError: Invalid array length

> new Array('abc')  // ok
[ 'abc' ]

Wenn Sie mehrere Dimensionen für Elemente benötigen, müssen Sie Arrays verschachteln. Wenn Sie solche verschachtelten Arrays erstellen, können die innersten Arrays nach Bedarf wachsen. Wenn Sie jedoch direkten Zugriff auf Elemente wünschen, müssen Sie mindestens die äußeren Arrays erstellen. Im folgenden Beispiel erstelle ich eine Drei-mal-Drei-Matrix für Tic-tac-toe. Die Matrix ist vollständig mit Daten gefüllt (im Gegensatz zum Wachsenlassen von Zeilen nach Bedarf):

// Create the Tic-tac-toe board
var rows = [];
for (var rowCount=0; rowCount < 3; rowCount++) {
    rows[rowCount] = [];
    for (var colCount=0; colCount < 3; colCount++) {
        rows[rowCount][colCount] = '.';
    }
}

// Set an X in the upper right corner
rows[0][2] = 'X';  // [row][column]

// Print the board
rows.forEach(function (row) {
    console.log(row.join(' '));
});

Hier ist die Ausgabe.

. . X
. . .
. . .

Ich wollte, dass das Beispiel den allgemeinen Fall demonstriert. Offensichtlich können Sie, wenn eine Matrix so klein und mit festen Dimensionen ist, sie über ein Array-Literal einrichten.

var rows = [ ['.','.','.'], ['.','.','.'], ['.','.','.'] ];

Der in-Operator erkennt, ob ein Objekt eine Eigenschaft mit einem gegebenen Schlüssel hat. Er kann aber auch verwendet werden, um festzustellen, ob ein gegebener Elementindex in einem Array existiert. Zum Beispiel:

> var arr = [ 'a', , 'b' ];
> 0 in arr
true
> 1 in arr
false
> 10 in arr
false

Zusätzlich zum Löschen von Eigenschaften löscht der delete-Operator auch Array-Elemente. Das Löschen von Elementen erzeugt Löcher (die length-Eigenschaft wird nicht aktualisiert):

> var arr = [ 'a', 'b' ];
> arr.length
2
> delete arr[1]  // does not update length
true
> arr
[ 'a',  ]
> arr.length
2

Sie können auch nachgestellte Array-Elemente löschen, indem Sie die Länge eines Arrays verringern (siehe length für Details). Um Elemente zu entfernen, ohne Löcher zu erzeugen (d. h. die Indizes nachfolgender Elemente werden dekrementiert), verwenden Sie Array.prototype.splice() (siehe Hinzufügen und Entfernen von Elementen (destruktiv)). In diesem Beispiel entfernen wir zwei Elemente am Index 1.

> var arr = ['a', 'b', 'c', 'd'];
> arr.splice(1, 2) // returns what has been removed
[ 'b', 'c' ]
> arr
[ 'a', 'd' ]

Array-Indizes sind nicht das, was sie scheinen. Bisher habe ich so getan, als wären Array-Indizes Zahlen. Und so implementieren JavaScript-Engines Arrays intern. Die ECMAScript-Spezifikation sieht Indizes jedoch anders. Paraphrasierung von Abschnitt 15.4

Mit anderen Worten, in der Welt der Spezifikation werden alle Werte in Klammern in Zeichenketten umgewandelt und als Eigenschaftsschlüssel interpretiert, selbst Zahlen. Die folgende Interaktion zeigt dies:

> var arr = ['a', 'b'];
> arr['0']
'a'
> arr[0]
'a'

Um ein Array-Index zu sein, muss ein Eigenschaftsschlüssel P (eine Zeichenkette!) gleich dem Ergebnis der folgenden Berechnung sein:

Das bedeutet, dass ein Array-Index eine stringifizierte Ganzzahl i im 32-Bit-Bereich 0 ≤ i < 2³²−1 sein muss. Die Obergrenze wurde in der Spezifikation explizit ausgeschlossen (wie zuvor zitiert). Sie ist für die maximale Länge reserviert. Um zu sehen, wie diese Definition funktioniert, verwenden wir dieFunktion ToUint32() aus 32-Bit-Ganzzahlen über bitweise Operatoren.

Erstens wird eine Zeichenkette, die keine Zahl enthält, immer in 0 umgewandelt, was nach der Stringifizierung nicht mit der Zeichenkette übereinstimmt.

> ToUint32('xyz')
0
> ToUint32('?@#!')
0

Zweitens wird eine stringifizierte Ganzzahl außerhalb des Bereichs ebenfalls in eine völlig andere Ganzzahl umgewandelt, die nach der Stringifizierung nicht mit der Zeichenkette übereinstimmt.

> ToUint32('-1')
4294967295
> Math.pow(2, 32)
4294967296
> ToUint32('4294967296')
0

Drittens werden stringifizierte Nicht-Ganzzahlen in Ganzzahlen umgewandelt, die wiederum unterschiedlich sind.

> ToUint32('1.371')
1

Beachten Sie, dass die Spezifikation auch sicherstellt, dass Array-Indizes keine Exponenten haben.

> ToUint32('1e3')
1000

Und dass sie keine führenden Nullen haben.

> var arr = ['a', 'b'];
> arr['0']  // array index
'a'
> arr['00'] // normal property
undefined

Das manuelle Erhöhen der Länge eines Arrays hat bemerkenswert wenig Auswirkungen auf ein Array; es erzeugt nur Löcher:

> var arr = [ 'a', 'b' ];
> arr.length = 3;
> arr  // one hole at the end
[ 'a', 'b', ,]

Das letzte Ergebnis hat zwei Kommas am Ende, da ein nachgestelltes Komma optional ist und daher immer ignoriert wird.

Was wir gerade getan haben, hat keine Elemente hinzugefügt.

> countElements(arr)
2

Die length-Eigenschaft fungiert jedoch als Zeiger, der angibt, wo neue Elemente eingefügt werden sollen. Zum Beispiel:

> arr.push('c')
4
> arr
[ 'a', 'b', , 'c' ]

Somit erstellt das Setzen der Anfangslänge eines Arrays über den Array-Konstruktor ein Array, das vollständig leer ist.

> var arr = new Array(2);
> arr.length
2
> countElements(arr)
0

Wenn Sie die Länge eines Arrays verringern, werden alle Elemente an der neuen Länge und darüber hinaus gelöscht:

> var arr = [ 'a', 'b', 'c' ];
> 1 in arr
true
> arr[1]
'b'

> arr.length = 1;
> arr
[ 'a' ]
> 1 in arr
false
> arr[1]
undefined

function clearArray(arr) {
    arr.length = 0;
}

> var arr = [ 'a', 'b', 'c' ];
> clearArray(arr)
> arr
[]

arr = [];

> var a1 = [1, 2, 3];
> var a2 = a1;
> a1.length = 0;

> a1
[]
> a2
[]

> var a1 = [1, 2, 3];
> var a2 = a1;
> a1 = [];

> a1
[]
> a2
[ 1, 2, 3 ]

Die maximale Array-Länge beträgt 2³²−1:

> var arr1 = new Array(Math.pow(2, 32));  // not ok
RangeError: Invalid array length

> var arr2 = new Array(Math.pow(2, 32)-1);  // ok
> arr2.push('x');
RangeError: Invalid array length

Sie können Löcher erstellen, indem Sie Array-Indizes zuweisen:

> var arr = [];
> arr[0] = 'a';
> arr[2] = 'c';
> 1 in arr  // hole at index 1
false

Sie können auch Löcher erstellen, indem Sie Werte in Array-Literalen weglassen.

> var arr = ['a',,'c'];
> 1 in arr  // hole at index 1
false

> [ 'a', ].length
1
> [ 'a', ,].length
2

Dieser Abschnitt untersucht die Unterschiede zwischen einem Loch und undefined als Element. Da das Lesen eines Lochs undefined zurückgibt, sind beide sehr ähnlich.

Ein Array mit Löchern wird alssparsch bezeichnet. Ein Array ohne Löcher wird alsdicht bezeichnet. Dichte Arrays sind zusammenhängend und haben ein Element an jedem Index - beginnend bei Null und endend bei length − 1. Vergleichen wir die folgenden beiden Arrays, ein sparsames und ein dichtes Array. Die beiden sind sehr ähnlich:

var sparse = [ , , 'c' ];
var dense  = [ undefined, undefined, 'c' ];

Ein Loch ist fast so, als hätte man das Element undefined am selben Index. Beide Arrays haben die gleiche Länge.

> sparse.length
3
> dense.length
3

Aber das sparsame Array hat kein Element am Index 0.

> 0 in sparse
false
> 0 in dense
true

Die Iteration über for ist für beide Arrays gleich:

> for (var i=0; i<sparse.length; i++) console.log(sparse[i]);
undefined
undefined
c
> for (var i=0; i<dense.length; i++) console.log(dense[i]);
undefined
undefined
c

Die Iteration über forEach überspringt die Löcher, aber nicht die undefinierten Elemente:

> sparse.forEach(function (x) { console.log(x) });
c
> dense.forEach(function (x) { console.log(x) });
undefined
undefined
c

Einige Operationen, die Arrays betreffen, ignorieren Löcher, während andere sie berücksichtigen. Dieser Abschnitt erklärt die Details.

> ['a',, 'b'].forEach(function (x,i) { console.log(i+'.'+x) })
0.a
2.b

> ['a',, 'b'].every(function (x) { return typeof x === 'string' })
true

> ['a',, 'b'].map(function (x,i) { return i+'.'+x })
[ '0.a', , '2.b' ]

> ['a',, 'b'].filter(function (x) { return true })
[ 'a', 'b' ]

> ['a',, 'b'].join('-')
'a--b'
> [ 'a', undefined, 'b' ].join('-')
'a--b'

> ['a',, 'b'].sort()  // length of result is 3
[ 'a', 'b', ,  ]

> for (var key in ['a',, 'b']) { console.log(key) }
0
2

> function f() { return [].slice.call(arguments) }
> f.apply(null, [ , , ,])
[ undefined, undefined, undefined ]

> Array.apply(null, Array(3))
[ undefined, undefined, undefined ]

> Array.apply(null, [2])
[ , ,]

Wie wir gesehen haben, entfernt filter() Löcher:

> ['a',, 'b'].filter(function (x) { return true })
[ 'a', 'b' ]

Verwenden Sie eine benutzerdefinierte Funktion, um Löcher in beliebige Arrays in undefineds umzuwandeln.

function convertHolesToUndefineds(arr) {
    var result = [];
    for (var i=0; i < arr.length; i++) {
        result[i] = arr[i];
    }
    return result;
}

Verwendung der Funktion.

> convertHolesToUndefineds(['a',, 'b'])
[ 'a', undefined, 'b' ]

Für Zahlen können Sie einfach a-b zurückgeben, aber das kann zu numerischem Überlauf führen. Um dies zu verhindern, benötigen Sie einen ausführlicheren Code:

function compareCanonically(a, b) {
    if (a < b) {
        return -1;
    } else if (a > b) {
        return 1;
    } else {
        return 0;
    }
}

Ich mag keine verschachtelten bedingten Operatoren. Aber in diesem Fall ist der Code so viel weniger ausführlich, dass ich versucht bin, ihn zu empfehlen:

function compareCanonically(a, b) {
    return a < b ? -1 : (a > b ? 1 : 0);
}

Verwendung der Funktion.

> [-1, -20, 7, 50].sort(compareCanonically)
[ -20, -1, 7, 50 ]

Für Zeichenketten können Sie String.prototype.localeCompare verwenden (siehe Zeichenketten vergleichen).

> ['c', 'a', 'b'].sort(function (a,b) { return a.localeCompare(b) })
[ 'a', 'b', 'c' ]

Der Parameter compareFunction ist auch nützlich zum Sortieren von Objekten:

var arr = [
    { name: 'Tarzan' },
    { name: 'Cheeta' },
    { name: 'Jane' } ];

function compareNames(a,b) {
    return a.name.localeCompare(b.name);
}

Mit compareNames als Vergleichsfunktion wird arr nach name sortiert.

> arr.sort(compareNames)
[ { name: 'Cheeta' },
  { name: 'Jane' },
  { name: 'Tarzan' } ]

Jede Methode, die in diesem Abschnitt beschrieben wird, sieht so aus:

arr.examinationMethod(callback, thisValue?)

Eine solche Methode nimmt die folgenden Parameter an:

Und nun zu den Prüfungsmethoden, deren Signaturen ich gerade beschrieben habe:

Ein potenzieller Fallstrick von forEach() ist, dass es kein break oder etwas Ähnliches zur vorzeitigen Beendigung der Schleife unterstützt. Wenn Sie dies tun müssen, können Sie some() verwenden.

function breakAtEmptyString(strArr) {
    strArr.some(function (elem) {
        if (elem.length === 0) {
            return true; // break
        }
        console.log(elem);
        // implicit: return undefined (interpreted as false)
    });
}

some() gibt true zurück, wenn ein Abbruch stattgefunden hat, und false andernfalls. Dies ermöglicht es Ihnen, unterschiedlich zu reagieren, je nachdem, ob die Iteration erfolgreich abgeschlossen wurde (was mit for-Schleifen etwas knifflig ist).

Transformations-Methoden nehmen ein Eingabearray und erzeugen ein Ausgabearray, wobei der Callback steuert, wie die Ausgabe erzeugt wird. Der Callback hat die gleiche Signatur wie für Prüfungsmethoden:

function callback(element, index, array)

Es gibt zwei Transformationsmethoden:

Für die Reduktion hat der Callback eine andere Signatur:

function callback(previousValue, currentElement, currentIndex, array)

Der Parameter previousValue ist der von der Callback zuvor zurückgegebene Wert. Wenn die Callback zum ersten Mal aufgerufen wird, gibt es zwei Möglichkeiten (die Beschreibungen gelten für Array.prototype.reduce(); Unterschiede zu reduceRight() werden in Klammern erwähnt):

Es gibt zwei Reduktionsmethoden.

Eine andere Möglichkeit, die reduce-Methode zu betrachten, ist, dass sie einen n-stelligen Operator OP implementiert.

OP1≤i≤n x_i

durch eine Reihe von Anwendungen eines binären Operators op2

(...(x₁ op2 x₂) op2 ...) op2 x_n

Das ist, was im vorherigen Codebeispiel passiert ist: Wir haben einen n-stelligen Summenoperator für Arrays über den binären Plusoperator von JavaScript implementiert.

Als Beispiel untersuchen wir die beiden Iterationsrichtungen anhand der folgenden Funktion.

function printArgs(prev, cur, i) {
    console.log('prev:'+prev+', cur:'+cur+', i:'+i);
    return prev + cur;
}

Wie erwartet, iteriert reduce() von links nach rechts.

> ['a', 'b', 'c'].reduce(printArgs)
prev:a, cur:b, i:1
prev:ab, cur:c, i:2
'abc'
> ['a', 'b', 'c'].reduce(printArgs, 'x')
prev:x, cur:a, i:0
prev:xa, cur:b, i:1
prev:xab, cur:c, i:2
'xabc'

Und reduceRight() iteriert von rechts nach links.

> ['a', 'b', 'c'].reduceRight(printArgs)
prev:c, cur:b, i:1
prev:cb, cur:a, i:0
'cba'
> ['a', 'b', 'c'].reduceRight(printArgs, 'x')
prev:x, cur:c, i:2
prev:xc, cur:b, i:1
prev:xcb, cur:a, i:0
'xcba'