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

Was ist der wahre Unterschied zwischen der Deklaration eines Arrays wie folgt:

var myArray = new Array();

und

var myArray = [];

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

Verwenden der ausführlicheren Methode: new Array()Hat eine zusätzliche Option in den Parametern: Wenn Sie eine Zahl an den Konstruktor übergeben, erhalten Sie ein Array dieser Länge:

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

So veranschaulichen Sie die verschiedenen Möglichkeiten zum Erstellen eines Arrays:

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 Sie bei Verwendung new Array()die Größe des Arrays festlegen können, was sich auf die Stapelgröße auswirkt. Dies kann nützlich sein, wenn Stapelüberläufe auftreten ( Leistung von Array.push vs Array.unshift ). Dies geschieht, wenn die Größe des Arrays die Größe des Stapels überschreitet und neu erstellt werden muss. Je nach Anwendungsfall kann es also tatsächlich zu einer Leistungssteigerung bei der Verwendung kommen, new Array()da Sie verhindern können, dass der Überlauf auftritt.

Wie in dieser Antwort ausgeführt , new Array(5)werden undefineddem Array nicht fünf Elemente hinzugefügt . Es wird einfach Platz für fünf Elemente hinzugefügt. Beachten Sie, dass es auf Arraydiese Weise schwierig ist, sich auf array.lengthBerechnungen zu verlassen .

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

Wenn Sie ein Array mit erstellen

var a = [];

Sie weisen den Interpreter an, ein neues Laufzeitarray zu erstellen. Keine zusätzliche Verarbeitung erforderlich. Erledigt.

Wenn du benutzt:

var a = new Array();

Sie sagen dem Interpreter, ich möchte den Konstruktor " Array" aufrufen und ein Objekt generieren. Anschließend wird in Ihrem Ausführungskontext nach dem aufzurufenden Konstruktor gesucht und aufgerufen, wodurch Ihr Array erstellt wird.

Sie denken vielleicht "Nun, das spielt überhaupt keine Rolle. Sie sind gleich!". Das kann man leider 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 alarmiert der erste Anruf 'SPARTA' wie erwartet. Der zweite wird nicht. Sie werden am Ende undefiniert sehen. Sie werden auch feststellen, dass b alle nativen Array-Objektfunktionen enthält, z. B. pushwo das andere nicht.

Während Sie dies erwarten können, zeigt es nur die Tatsache, dass dies []nicht dasselbe ist wie new Array().

Es ist wahrscheinlich am besten, nur zu verwenden, []wenn Sie wissen, dass Sie nur ein Array möchten. Ich schlage auch nicht vor, herumzugehen und Array neu zu definieren ...

Es gibt einen wichtigen Unterschied, den noch keine Antwort erwähnt hat.

Davon:

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

Du denkst vielleicht, das new Array(2)ist gleichbedeutend mit [undefined, undefined], aber es ist 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? Die Semantik ist völlig anders! Warum ist das so?

Gemäß ES6 Spec 22.1.1.2 besteht die Aufgabe von Array(len)lediglich darin, ein neues Array zu erstellen, dessen Eigenschaft lengthauf das Argument festgelegt ist, lenund das ist es, was bedeutet, dass sich in diesem neu erstellten Array kein echtes Element befindet .

Die Funktion map()gemäß Spezifikation 22.1.3.15 würde zuerst prüfen und HasPropertydann den Rückruf aufrufen, aber es stellt sich heraus, dass:

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

Und deshalb können Sie keine iterierenden Funktionen erwarten, die wie gewohnt auf Arrays funktionieren, die aus erstellt wurdennew Array(len) .

Übrigens haben Safari und Firefox ein viel besseres "Drucken" 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 Chromium bereits ein Problem gemeldet und sie gebeten, dieses verwirrende Drucken zu beheben: https://bugs.chromium.org/p/chromium/issues/detail?id=732021

UPDATE: Es ist bereits behoben. Chrome wird jetzt gedruckt als:

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

Seltsamerweise new Array(size)ist es 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 wichtig, wenn Sie die ungefähre Größe des Arrays kennen. Wenn Sie mehr Elemente als die von Ihnen angegebene Länge hinzufügen, geht die Leistungssteigerung verloren.

Genauer gesagt: Array(ist eine schnelle Operation mit konstanter Zeit, die keinen Speicher zuweist, während []es sich um eine lineare Zeitoperation handelt, die Typ und Wert festlegt.

Weitere Informationen finden Sie auf der folgenden Seite , warum Sie diese niemals verwenden müssennew Array()

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

Verwenden Sie nicht new Number, new Stringoder new Boolean. Diese Formulare erzeugen unnötige Objektverpackungen. Verwenden Sie stattdessen einfach einfache Literale.

Lesen Sie auch die Kommentare - das new Array(length)Formular erfüllt keinen nützlichen Zweck (zumindest in den heutigen Implementierungen von JavaScript).

Zum besseren Verständnis []und new Array():

> []
  []
> new Array()
  []
> [] == []
  false
> [] === []
  false
> new Array() == new Array()
  false
> new Array() === new Array()
  false
> typeof ([])
  "object"
> typeof (new Array())
  "object"
> [] === new Array()
  false
> [] == new Array()
  false

Das obige Ergebnis stammt von der Google Chrome-Konsole unter Windows 7.

Der erste ist der Standardaufruf des Objektkonstruktors. Sie können die Parameter verwenden, wenn Sie möchten.

var array = new Array(5); //initialize with default length 5

Mit dem zweiten können Sie ein nicht leeres Array erstellen:

var array = [1, 2, 3]; // this array will contain numbers 1, 2, 3.

Ich kann es anhand dieses Beispiels, das auf Fredriks gutem basiert, genauer erklären.

var test1 = [];
test1.push("value");
test1.push("value2");

var test2 = new Array();
test2.push("value");
test2.push("value2");

alert(test1);
alert(test2);
alert(test1 == test2);
alert(test1.value == test2.value);

Ich habe gerade einen weiteren Wert zu den Arrays hinzugefügt und vier Warnungen ausgegeben: Die erste und die zweite sollen uns den in jedem Array gespeicherten Wert geben, um sicherzugehen, welche Werte vorliegen. Sie werden das gleiche zurückgeben! Versuchen Sie es jetzt mit dem dritten, es gibt false zurück, das liegt daran

JS behandelt test1 als VARIABLE mit einem Datentyp eines Arrays und test2 als OBJECT mit der Funktionalität eines Arrays , und hier gibt es nur wenige geringfügige Unterschiede.

Der erste Unterschied besteht darin, dass beim Aufrufen von test1 eine Variable aufgerufen wird, ohne darüber nachzudenken. Es werden nur die Werte zurückgegeben, die in dieser Variablen gespeichert sind, unabhängig von ihrem Datentyp! Wenn wir jedoch test2 aufrufen, ruft es die Funktion Array () auf und speichert dann unsere "Pushed" -Werte in seiner "Value" -Eigenschaft. Dasselbe passiert, wenn wir test2 alarmieren, gibt es die "Value" -Eigenschaft des Array-Objekts zurück.

Wenn wir also prüfen, ob test1 gleich test2 ist, werden sie natürlich niemals true zurückgeben. Eine ist eine Funktion und die andere ist eine Variable (mit einem Array-Typ), selbst wenn sie denselben Wert haben!

Um sicherzugehen, versuchen Sie es mit der 4. Warnung, der der Wert hinzugefügt wurde. es wird wahr zurückgeben. In diesem Fall teilen wir JS mit: "Wenn Sie den Typ des Containers nicht berücksichtigen, ob es sich um eine Funktion oder eine Variable handelt, vergleichen Sie bitte die in jedem Container gespeicherten Werte und teilen Sie uns mit, was Sie gesehen haben!" Genau das passiert.

Ich hoffe, ich habe die Idee dahinter klar gesagt und entschuldige mich für mein schlechtes Englisch.

Es gibt keinen Unterschied, wenn Sie ein Array ohne Länge initialisieren. Also var a = []& var b = new Array()ist gleich.

Wenn Sie jedoch ein Array mit einer Länge wie initialisieren var b = new Array(1);, wird die Länge des Array-Objekts auf 1 gesetzt var b = []; b.length=1;.

Dies ist problematisch, wenn Sie array_object.push ausführen, ein Element nach dem letzten Element hinzufügen und die Länge erhöhen.

var b = new Array(1);
b.push("hello world");
console.log(b.length); // print 2

vs.

var v = [];
a.push("hello world");
console.log(b.length); // print 1

Der erste ist der Standardaufruf des Objektkonstruktors, der hauptsächlich für dynamische Werte verwendet wird.

var array = new Array(length); //initialize with default length

Das zweite Array wird beim Erstellen statischer Werte verwendet

var array = [red, green, blue, yellow, white]; // this array will contain values.

Es gibt keinen großen Unterschied, sie machen im Grunde das Gleiche, aber auf unterschiedliche Weise, aber lesen Sie weiter, sehen Sie sich diese Aussage bei W3C an:

var cars = ["Saab", "Volvo","BMW"];

und

var cars = new Array("Saab", "Volvo", "BMW");

Die beiden obigen Beispiele machen genau das Gleiche. Es ist nicht erforderlich, ein neues Array () zu verwenden.
Verwenden Sie zur Vereinfachung, Lesbarkeit und Ausführungsgeschwindigkeit die erste (die Array-Literal-Methode).

Gleichzeitig wird das Erstellen eines neuen Arrays mithilfe der new ArraySyntax als schlechte Vorgehensweise angesehen:

Vermeiden Sie neues Array ()

Es ist nicht erforderlich, den in JavaScript integrierten Array-Konstruktor new Array () zu verwenden.
Verwenden Sie stattdessen [].
Diese beiden unterschiedlichen Anweisungen erstellen ein neues leeres Array mit dem Namen points:

var points = new Array();         // Bad
var points = [];                  // Good 

Diese beiden unterschiedlichen Anweisungen erstellen ein neues Array mit 6 Zahlen:

var points = new Array(40, 100, 1, 5, 25, 10); // Bad    
var points = [40, 100, 1, 5, 25, 10];          // Good

Das neue Schlüsselwort verkompliziert nur den Code. Es kann auch zu unerwarteten Ergebnissen führen:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

Was ist, wenn ich eines der Elemente entferne?

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!

Also grundsätzlich nicht als Best Practice angesehen, da gibt es auch einen kleinen Unterschied, man kann die Länge so übergehen new Array(length), was auch kein empfohlener Weg ist.

Der Unterschied bei der Verwendung

var arr = new Array(size);

Oder

arr = [];
arr.length = size;

Wie in dieser Frage genug diskutiert.

Ich möchte das Geschwindigkeitsproblem hinzufügen - der derzeit schnellste Weg google chromeist der zweite.

Aber pass auf, diese Dinge ändern sich mit Updates sehr. Auch die Laufzeit unterscheidet sich zwischen verschiedenen Browsern.

Zum Beispiel - die zweite Option, die ich erwähnt habe, läuft mit 2 Millionen [ops / Sekunde] weiter chrome, aber wenn Sie sie anprobieren mozilla dev.würden, würden Sie eine überraschend höhere Rate von 23 Millionen erhalten.

Wie auch immer, ich würde vorschlagen, dass Sie es von Zeit zu Zeit in verschiedenen Browsern (und Computern) überprüfen und die Site als solche verwenden

Wie ich weiß, können Sie den Unterschied (oder die anderen Funktionen von Array) wie Code1 und Code2 finden. Zeigen Sie Array und seine Instanzen :

Code1:

[].slice; // find slice here
var arr = new Array();
arr.slice // find slice here
Array.prototype.slice // find slice here

Code2:

[].__proto__ == Array.prototype; // true
var arr = new Array();
arr.__proto__ == Array.prototype; // true

Fazit:

Wie Sie sehen []und new Array()eine neue Instanz von Array erstellen können. Und alle erhalten die Prototypfunktionen vonArray.prototype

Sie sind nur verschiedene Instanzen von Array. Dies erklärt, warum [] != []

:) :)

Ich habe mit [] ein seltsames Verhalten festgestellt.

Wir haben Modell "Klassen" mit Feldern, die auf einen bestimmten Wert initialisiert wurden. Z.B:

require([
  "dojo/_base/declare",
  "dijit/_WidgetBase",
], function(declare, parser, ready, _WidgetBase){

   declare("MyWidget", [_WidgetBase], {
     field1: [],
     field2: "",
     function1: function(),
     function2: function()
   });    
});

Ich habe festgestellt, dass die Felder, wenn sie mit initialisiert []werden, von allen Modellobjekten gemeinsam genutzt werden. Das Vornehmen von Änderungen wirkt sich auf alle anderen aus.

Dies geschieht nicht, wenn sie mit initialisiert werden new Array(). Gleiches gilt für die Initialisierung von Objekten ( {}vs new Object())

TBH Ich bin mir nicht sicher, ob es ein Problem mit dem von uns verwendeten Framework ist ( Dojo ).

Das ist mehr als man denkt. Die meisten anderen Antworten sind richtig, ABER AUCH ..

new Array(n)

• Ermöglicht der Engine, Platz für nElemente neu zuzuweisen
• Optimiert für die Array- Erstellung
• Das erstellte Array ist als spärlich markiert und weist die am wenigsten leistungsfähigen Array-Operationen auf. Dies liegt daran, dass jeder Indexzugriff Grenzen überprüfen, prüfen muss, ob ein Wert vorhanden ist, und die Prototypkette durchlaufen muss
• Wenn das Array als spärlich markiert ist, gibt es keinen Weg zurück (zumindest in V8). Es ist während seiner Lebensdauer immer langsamer, auch wenn Sie es 1 ms oder 2 Stunden später mit Inhalten füllen (gepacktes Array), spielt keine Rolle

[1, 2, 3] || []

• Erstellt Array markiert ist verpackt (es sei denn , Sie verwenden deleteoder [1,,3]Syntax)
• Optimiert für Array - Operationen ( for .., forEach, map, usw.)
• Die Engine muss den Speicherplatz neu zuweisen, wenn das Array wächst

Dies ist wahrscheinlich bei älteren Browserversionen / Browsern nicht der Fall.

Ich habe einen Unterschied zwischen den beiden Konstruktionen gefunden, der mich ziemlich hart gebissen hat.

Nehmen wir an, ich habe:

function MyClass(){
  this.property1=[];
  this.property2=new Array();
};
var MyObject1=new MyClass();
var MyObject2=new MyClass();

Wenn ich das im wirklichen Leben mache:

MyObject1.property1.push('a');
MyObject1.property2.push('b');
MyObject2.property1.push('c');
MyObject2.property2.push('d');

Am Ende habe ich Folgendes:

MyObject1.property1=['a','c']
MyObject1.property2=['b']
MyObject2.property1=['a','c']
MyObject2.property2=['d']

Ich weiß nicht, was in der Sprachspezifikation angegeben ist, aber wenn ich möchte, dass meine beiden Objekte eindeutige Eigenschaftsarrays in meinen Objekten haben, muss ich verwenden new Array().

Mit dem Array-Konstruktor wird ein neues Array mit der gewünschten Länge erstellt und jeder der Indizes mit undefiniert gefüllt. Das einer Variablen zugewiesene Array erstellt die Indizes, für die Sie ihm Informationen geben.