Was ist der Unterschied zwischen "Array()" und "[]" bei der Deklaration eines JavaScript-Arrays?

Question

Was ist der wirkliche Unterschied zwischen der Deklaration eines Arrays wie diesem:

var myArray = new Array();

y

var myArray = [];

Answer 1

Es gibt einen Unterschied, aber es gibt keinen Unterschied in diesem Beispiel.

Verwendung der ausführlicheren Methode: new Array() hat eine zusätzliche Option bei den Parametern: Wenn Sie dem Konstruktor eine Zahl übergeben, erhalten Sie ein Array dieser Länge:

x = new Array(5);
alert(x.length); // 5

Zur Veranschaulichung der verschiedenen Möglichkeiten, ein Array zu erstellen:

var a = [],            // these are the same
    b = new Array(),   // a and b are arrays with length 0

    c = ['foo', 'bar'],           // these are the same
    d = new Array('foo', 'bar'),  // c and d are arrays with 2 strings

    // these are different:
    e = [3]             // e.length == 1, e[0] == 3
    f = new Array(3),   // f.length == 3, f[0] == undefined

;

Ein weiterer Unterschied besteht darin, dass bei der Verwendung von new Array() können Sie die Größe des Arrays festlegen, was sich auf die Stapelgröße auswirkt. Dies kann nützlich sein, wenn es zu Stack-Überläufen kommt ( Leistung von Array.push gegenüber Array.unshift ), was passiert, wenn die Größe des Arrays die Größe des Stacks übersteigt und es neu erstellt werden muss. Es kann also, je nach Anwendungsfall, tatsächlich eine Leistungssteigerung geben, wenn man new Array() denn Sie können den Überlauf verhindern.

Wie bereits in diese Antwort , new Array(5) wird nicht tatsächlich fünf undefined Elemente in das Array. Es wird einfach Platz für fünf Elemente hinzugefügt. Beachten Sie, dass die Verwendung von Array Dies macht es schwierig, sich auf die array.length für Berechnungen.

Answer 2

Der Unterschied zwischen der Erstellung eines Arrays mit dem impliziten Array und dem Array-Konstruktor ist subtil, aber wichtig.

Wenn Sie ein Array mit

var a = [];

Sie teilen dem Interpreter mit, dass er ein neues Laufzeit-Array erstellen soll. Es ist überhaupt keine zusätzliche Verarbeitung erforderlich. Erledigt.

Wenn Sie verwenden:

var a = new Array();

Sie sagen dem Interpreter: "Ich möchte den Konstruktor " aufrufen. Array "und erzeugen ein Objekt. Anschließend sucht es in Ihrem Ausführungskontext nach dem aufzurufenden Konstruktor und ruft ihn auf, wodurch Ihr Array erstellt wird.

Sie denken vielleicht: "Das ist doch völlig egal. Das ist doch das Gleiche!". Leider können Sie das nicht garantieren.

Nehmen Sie das folgende Beispiel:

function Array() {
    this.is = 'SPARTA';
}

var a = new Array();
var b = [];

alert(a.is);  // => 'SPARTA'
alert(b.is);  // => undefined
a.push('Woa'); // => TypeError: a.push is not a function
b.push('Woa'); // => 1 (OK)

Im obigen Beispiel wird beim ersten Aufruf erwartungsgemäß die Meldung "SPARTA" ausgegeben. Der zweite nicht. Sie werden am Ende undefiniert sehen. Sie werden auch feststellen, dass b alle nativen Array-Objektfunktionen enthält, wie z.B. push und die andere nicht.

Auch wenn Sie dies vielleicht erwarten, zeigt es doch nur, dass [] ist nicht dasselbe wie new Array() .

Es ist wahrscheinlich am besten, einfach die [] wenn Sie wissen, dass Sie nur ein Array wollen. Ich schlage auch nicht vor, herumzugehen und Array neu zu definieren...

Answer 3

Es gibt einen wichtigen Unterschied, der bisher in keiner Antwort erwähnt wurde.

Hiervon:

new Array(2).length           // 2
new Array(2)[0] === undefined // true
new Array(2)[1] === undefined // true

Man könnte meinen, die new Array(2) ist gleichbedeutend mit [undefined, undefined] , aber das ist es NICHT!

Versuchen wir es mit map() :

[undefined, undefined].map(e => 1)  // [1, 1]
new Array(2).map(e => 1)            // "(2) [undefined × 2]" in Chrome

Sehen Sie? Die Semantik ist völlig anders! Und warum ist das so?

Nach der ES6-Spezifikation 22.1.1.2 ist die Aufgabe von Array(len) wird einfach ein neues Array erstellt, dessen Eigenschaft length wird auf das Argument len und das war's, das heißt, es gibt keine wirkliches Element innerhalb dieses neu erstellten Arrays.

Funktion map() Gemäß Spezifikation 22.1.3.15 wird zunächst geprüft HasProperty dann den Callback aufrufen, aber es stellt sich heraus, dass:

new Array(2).hasOwnProperty(0) // false
[undefined, undefined].hasOwnProperty(0) // true

Und deshalb können Sie nicht erwarten, dass iterierende Funktionen wie üblich auf Arrays funktionieren, die aus new Array(len) .

Übrigens, Safari und Firefox haben einen viel besseren "Druck" für diese Situation:

// Safari
new Array(2)             // [](2)
new Array(2).map(e => 1) // [](2) 
[undefined, undefined]   // [undefined, undefined] (2) 

// Firefox
new Array(2)             // Array [ <2 empty slots> ]
new Array(2).map(e => 1) // Array [ <2 empty slots> ]
[undefined, undefined]   // Array [ undefined, undefined ]

Ich habe bereits eine Anfrage an Chromium gestellt und sie gebeten, diesen verwirrenden Druck zu beheben: https://bugs.chromium.org/p/chromium/issues/detail?id=732021

UPDATE: Das Problem ist bereits behoben. Chrome druckt jetzt als:

new Array(2)             // (2) [empty × 2]

Answer 4

Merkwürdigerweise, new Array(size) ist fast 2x schneller als [] in Chrome, und ungefähr gleich in FF und IE (gemessen durch Erstellen und Füllen eines Arrays). Es ist nur von Bedeutung, wenn Sie die ungefähre Größe des Arrays kennen. Wenn Sie mehr Elemente als die Länge, die Sie gegeben haben, hinzufügen, ist die Leistungssteigerung verloren.

Um genau zu sein: Array( ist eine schnelle, zeitlich konstante Operation, die keinen Speicher belegt, wohingegen [] ist eine lineare Zeitoperation, die Typ und Wert festlegt.

Answer 5

Für weitere Informationen, die folgende Seite beschreibt, warum Sie niemals die new Array()

Sie brauchen nie zu benutzen new Object() in JavaScript. Verwenden Sie das Objektliteral {} stattdessen. Verwenden Sie auch nicht new Array() , das Array-Literal verwenden [] stattdessen. Arrays in JavaScript funktionieren nicht wie die Arrays in Java, und die Verwendung der Java-ähnlichen Syntax wird Sie verwirren.

Nicht verwenden new Number , new String , oder new Boolean . Diese Formulare erzeugen unnötige Objektumhüllungen. Verwenden Sie stattdessen stattdessen einfache Literale.

Beachten Sie auch die Kommentare - die new Array(length) Formular dient keinem nützlichen Zweck (zumindest in den heutigen Implementierungen von JavaScript).