Was sind die Best Practices beim Deklarieren eines Arrays in Javascript?

175

Wenn ich ein neues Array deklarieren muss, verwende ich diese Notation

var arr = new Array();

Beim Online-Testen, beispielsweise auf jsbin , wird ich jedoch durch eine Warnung aufgefordert, "die Array-Literal-Notation [] zu verwenden".

Ich habe keinen Grund gefunden, die Verwendung des Konstruktors zu vermeiden. Ist in gewisser Weise weniger effizient als die Verwendung []? Oder ist es schlechte Praxis?

Gibt es einen guten Grund, var arr = [];statt zu verwenden var arr = new Array();?

Naigel
quelle
5
Beide sind gut. Sie sparen nur einige Bytes bei der Übertragung.
Sirko
13
Es gibt tatsächlich Unterschiede. Siehe diesen Beitrag: stackoverflow.com/q/2280285/921204
techfoobar
Hinweis: Es gibt Unterschiede, wenn das Array nur überschrieben wurde .
Crdx
@apkd in einigen Browsern gibt es einen signifikanten Leistungsunterschied
Alnitak
Meinetwegen. Das habe ich bei der verknüpften Frage nicht gesehen.
Crdx

Antworten:

259

Meistens benutzen die Leute, var a = []weil Douglas Crockford es sagt .

Zu seinen Gründen gehört das nicht intuitive und inkonsistente Verhalten von new Array():

var a = new Array(5);     // an array pre-sized to 5 elements long
var b = new Array(5, 10); // an array with two elements in it

Beachten Sie, dass es keine Möglichkeit gibt new Array(), ein Array mit nur einem vordefinierten Zahlenelement zu erstellen !

Die Verwendung []ist tatsächlich effizienter und auch sicherer ! Es ist möglich, den ArrayKonstruktor zu überschreiben und ihn dazu zu bringen, seltsame Dinge zu tun, aber Sie können das Verhalten von nicht überschreiben [].

Persönlich verwende ich immer die []Syntax und ebenso immer die {}Syntax anstelle von new Object().

Alnitak
quelle
5
"Sie können das Verhalten von [] nicht überschreiben." Bist du dir da sicher? Ich dachte, Sie könnten den Array-Konstruktor überschreiben, um [] zu beeinflussen, und den Objektkonstruktor, um {} zu beeinflussen, zumindest bei einigen Implementierungen.
Random832
11
@ Random832 möglicherweise in älteren Browsern, aber nicht in ES5-kompatiblen Implementierungen, in denen die Spezifikation besagt, dass []ein interner Konstruktor aufgerufen wird , nicht der Wert Array.constructor, der gerade vorhanden ist.
Alnitak
5
Bonus: Array-Literale sind viel schneller als das Erstellen neuer Arrays mit dem ArrayKonstruktor: jsperf.com/new-array
Mathias Bynens
@ MathiasBynens nur manchmal.
OrangeDog
Ew @ the [] funktioniert aufgrund der internen Konstruktorsache anders. Die Inkonsistenz führt zu mehr Verwirrung als sie spart. Edit: Ah, Sicherheitsbedenken. Ich verstehe es.
Erik Reppen
48

Ein wesentlicher Unterschied besteht darin , dass []wird immer ein neues Array instanziiert, während new Arraykönnte entführt ein anderes Objekt zu erstellen .

(function () {
    "use strict";
    var foo,
        bar;
    //don't do this, it's a bad idea
    function Array() {
        alert('foo');
    }
    foo = new Array();
    bar = [];
}());​

In meinem Beispielcode habe ich die ArrayFunktion vor dem Rest des Dokumentbereichs verborgen gehalten. Es ist jedoch wahrscheinlicher, dass der Code nicht in einem schönen Abschluss belassen wurde, wenn Sie jemals auf ein solches Problem stoßen wahrscheinlich schwer zu finden.

Haftungsausschluss : Es ist keine gute Idee, den ArrayKonstruktor zu entführen .

zzzzBov
quelle
7
IIRC würde in älteren Browsern, die den Array-Konstruktor überschreiben, auch dazu führen, dass Literale falsch interpretiert werden. Vor einiger Zeit gab es eine GMail-CSRF- Sicherheitsanfälligkeit, bei der der Array-Konstruktor überschrieben wurde und neue Browser das Überladen von Literalen aus genau diesem Grund ignorieren.
Hugomg
Gegen-Haftungsausschluss: Es war jedoch äußerst hilfreich und nützlich, den Array-Konstruktor im Laufe der Jahre zu verbessern.
Erik Reppen
26

aus Gründen der Wartbarkeit verwenden []

Das Array-Literal ist vorhersehbarer, da die meisten Entwickler es verwenden. Die meisten Array-Anwendungen verwenden das Literal, und es ist sinnvoll, dass Ihr Code mit dem übereinstimmt, was andere Entwickler verwenden.

Verwenden Sie für leere Arrays []

var ns = [];
var names = [ 'john', 'brian' ];

Wie hier gezeigt , ist die Verwendung des Literal für leere und einige bekannte Elemente schwieriger als der Array-Konstruktor.

Verwenden Sie für ein Array bekannter Größe new Array(size)

Wenn die Größe bekannt ist, verbessert die Verwendung des Array-Konstruktors die Leistung erheblich. Es bedeutet jedoch auch, dass Sie sich mit einem Array befassen müssen, dessen Werte bereits "undefiniert" sind.

Wie hier gezeigt

// fill an array with 100 numbers
var ns = new Array( 100 );
for ( var i = 0; i < 100; i++ ) {
    ns[i] = i;
}

Dies funktioniert auch für sehr kleine Arrays .

JL235
quelle
12

Nein, es gibt eigentlich keinen Grund, für leere Arrays eine Notation über der anderen zu verwenden.

Die meisten Browser zeigen jedoch eine etwas bessere Leistung x = [];als der Aufruf des Konstruktors .

Wenn Sie einen Array mit einer bestimmten Größe, Sie Art zu schaffen Notwendigkeit zu verwenden x = new Array(10);zum Beispiel, die ein Array mit 10 schaffen würden undefinedSlots.

jAndy
quelle
@Alnitak: was Sie bereits erwähnt haben, ist nicht sehr intuitiv und prägnant.
Andy
7
Ich habe ein jsperf zusammengestellt, um die Leistung zu vergleichen: jsperf.com/array-constructor-versus-literal . Zumindest für mich unter Chrome 20 unter Ubuntu ist das Literal doppelt so schnell wie der Konstruktor.
Steven
1
@jAndy, ich kann mir einen Unterschied für leere Arrays vorstellen .
zzzzBov
jAndy, warum möchten Sie ein Array mit "10 leeren Slots" in JavaScript? In Wirklichkeit können Sie genau dasselbe tun mit: var arr = []; arr [9] = "Omega"; 1. Arrays in JS sind völlig dynamisch, Sie können auf jeden gewünschten Index verweisen und er ist nur "undefiniert". Dies ist genauso wahr, als ob Sie sagen würden: var arr = new Array (10); arr [23]; 2. Die Länge des Arrays wird auf den höchsten Wert gesetzt, der etwas enthält, unabhängig davon, wie viele undefinierte Slots dazwischen liegen. Oder Sie können es selbst einstellen. [] heilt Krebs vielleicht nicht, aber es ist geringfügig besser.
Norguard
7
  • var arr = [] verwendet das Array / Objekt-Literal
  • var arr = new Array () verwendet den Array- / Objektkonstruktor

Der schnellste Weg, ein Array oder Objekt zu definieren, ist der wörtliche Weg, da Sie den Konstruktor nicht aufrufen müssen

var arr1 = new Array(1, 2, 3, 4);
var arr2 = [1, 2, 3, 4];

alert(arr1[0]); // 1
alert(arr2[0]); // 1

var arr3 = new Array(200);
var arr4 = [200];

alert(arr3[0]); // 'undefined'
alert(arr4[0]); // 200
Yasir Mahmood
quelle
2
var arr = [];Verwendet hinter den Kulissen logischerweise auch einen Konstruktor. Es ist einfach immer der eingebaute Array-Konstruktor und nicht die Funktion, die derzeit unter dem Namen ausgeführt wird Array.
CHao
6

Beides ist nur richtig. Aber die meisten Leute benutzenvar a = []

Drei Möglichkeiten, ein Array in JavaScript zu deklarieren.

Methode 1 : Wir können ein Array explizit mit dem JavaScript-Schlüsselwort "new" deklarieren, um das Array im Speicher zu instanziieren (dh es zu erstellen und verfügbar zu machen).

// Declare an array (using the array constructor)
var arlene1 = new Array();
var arlene2 = new Array("First element", "Second", "Last");

Methode 2 : Wir verwenden eine alternative Methode zum Deklarieren von Arrays.

// Declare an array (using literal notation)
var arlene1 = [];
var arlene2 = ["First element", "Second", "Last"];

Methode 3 : Mit JavaScript können Sie Arrays auch indirekt erstellen, indem Sie bestimmte Methoden aufrufen.

// Create an array from a method's return value
var carter = "I-learn-JavaScript";
var arlene3 = carter.split("-");
RAN
quelle
4

Es gibt eine Grenze, die der Konstruktor als Argumente verwenden kann.

Auf den meisten Systemen, auf die ich gestoßen bin, beträgt das Limit 2 ^ 16 (2 Bytes):

var myFreshArr = new Array(0,1,2,3 ..... 65536);

Das wird einen Fehler verursachen (zu viele Argumente ....)

Wenn Sie das Literal [] verwenden, haben Sie solche Probleme nicht.

Falls Sie sich nicht für so große Arrays interessieren, können Sie meiner Meinung nach alles verwenden, was Sie bevorzugen.

Erwin Möller
quelle
2
Können Sie ein Beispiel dafür anführen, wo eine Person vernünftigerweise ein Array mit 70.000 Werten erstellen möchte? Es erklärt jedoch wirklich einige der schrecklichen Websites, die ich gesehen habe und die scheinbar nie fertig geladen werden ...
John O
2
John O, ich habe in meiner Zeit einige SCARY JSON-Implementierungen gesehen, die Arrays von 2D / 3D-Arrays mit IATA-Codes (Flughafencodes), Fluggesellschaften, Reiseveranstaltern, Resorts usw. enthalten in ein Array. Es ist ... ... 1 MB + JSON-Downloads bringen mich zum Weinen.
Norguard
4
var array = [ 1, 2, 3, 4];

ist Zucker

var array = new Array(1, 2, 3, 4);

ist Salz

linquize
quelle
5
und wo man es benutzt, für Kaffee oder für Pasta?
Aristos
syntaktischer Zucker und Salz
Linquize
3

Es ist, weil new Array()es mehrdeutig ist. Dies sind die richtigen Konstruktoren:

// Using brackets
[element0, element1, ..., elementN]

// Using new AND a list of elements
new Array(element0, element1, ..., elementN)

// Using new AND an integer specifying the array length
new Array(arrayLength)
Florent
quelle