Quali sono le migliori pratiche da seguire quando si dichiara un array in Javascript?


176

Quando devo dichiarare un nuovo array, uso questa notazione

var arr = new Array();

Ma durante i test online, ad esempio su jsbin , un avviso mi segnala "Usa l'array notazione letterale []".

Non ho trovato un motivo per evitare di usare il costruttore. È in qualche modo meno efficiente dell'uso []? O è una cattiva pratica?

C'è un buon motivo per usare var arr = [];invece di var arr = new Array();?


5
Entrambi vanno bene. Basta salvare alcuni byte in trasmissione.
Sirko,

13
Ci sono davvero differenze. Vedi questo post: stackoverflow.com/q/2280285/921204
techfoobar

Nota: ci sono differenze se l'array è stato solo sovrascritto .
crdx,

@apkd su alcuni browser c'è una differenza significativa nelle prestazioni
Alnitak,

Giusto. Non l'ho visto sulla domanda collegata.
crdx,

Risposte:


260

Per lo più , le persone usano var a = []perché lo dice Douglas Crockford .

Le sue ragioni includono il comportamento non intuitivo e incoerente di 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

Si noti che non è possibile new Array()creare un array con un solo elemento numerico predefinito in esso!

L'uso []è in realtà più efficiente e anche più sicuro ! È possibile sovrascrivere il Arraycostruttore e farlo fare cose strane, ma non è possibile sovrascrivere il comportamento di [].

Personalmente, utilizzo sempre la []sintassi e allo stesso modo uso sempre la {}sintassi al posto di new Object().


5
"non puoi sovrascrivere il comportamento di []." Sei sicuro di questo? Ho pensato che potresti sovrascrivere il costruttore di array per influenzare [] e il costruttore di oggetti per influenzare {}, almeno su alcune implementazioni.
Casuale 832,

11
@ Random832 forse nei browser più vecchi, ma non nelle implementazioni compatibili con ES5, dove le specifiche dicono che []chiama un costruttore interno, non qualunque sia il valore Array.constructorin quel momento.
Alnitak,

5
Bonus: i letterali di array sono molto più veloci della creazione di nuovi array con il Arraycostruttore: jsperf.com/new-array
Mathias Bynens,

@MathiasBynens solo a volte.
OrangeDog,

Ew @ the [] funziona in modo diverso a causa della cosa del costruttore interno. L'incoerenza causerà più confusione di quanto risparmi. Modifica: Ah, problemi di sicurezza. Capisco.
Erik Reppen

48

Una differenza significativa è che []sarà sempre un'istanza di un nuovo array, che new Arraypotrebbe essere dirottato per creare un oggetto diverso .

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

Nel mio codice di esempio, ho tenuto Arraynascosta la funzione dal resto dell'ambito del documento, tuttavia è più probabile che se si dovesse mai incontrare questo tipo di problema, il codice non sarebbe stato lasciato in una bella chiusura e probabilmente sarà difficile da individuare.

Disclaimer : non è una buona idea dirottare il Arraycostruttore.


7
IIRC, nei browser meno recenti, l'override del costruttore di array causerebbe anche l'interpretazione errata dei valori letterali. Qualche tempo fa c'era una vulnerabilità di CSail CSRF di GMail che riguardava l'override del costruttore di array e i nuovi browser ignorano il sovraccarico dei letterali per questo preciso motivo.
hugomg,

Disclaimer: è stato estremamente utile e utile per migliorare il costruttore di array nel corso degli anni.
Erik Reppen

26

per manutenibilità, utilizzare []

L'array letterale è più prevedibile, poiché la maggior parte degli sviluppatori lo utilizza. La maggior parte dell'uso dell'array sarà in uso letterale e c'è valore nel far corrispondere il codice a ciò che usano gli altri sviluppatori.

per array vuoti, utilizzare []

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

Come mostrato qui , usare il valore letterale per vuoto e un paio di elementi noti è più grasso del costruttore di array.

per una matrice di dimensioni note, utilizzare new Array(size)

Se la dimensione è nota, l'utilizzo del costruttore di array migliora significativamente le prestazioni. Tuttavia, significa anche che devi avere a che fare con un array che ha già "indefinito" riempiendo tutti i suoi valori.

Come mostrato qui

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

Questo funziona anche per array molto piccoli .


12

No, in realtà non c'è motivo di usare una notazione sull'altra per array vuoti.

Tuttavia, la maggior parte dei browser mostra prestazioni leggermente migliori x = [];rispetto alla chiamata al costruttore .

Se è necessario creare un array con dimensioni specifiche, è necessario utilizzarlo, x = new Array(10);ad esempio, per creare un array con 10 undefinedslot.


@Alnitak: di cui hai già parlato, non è molto intuitivo e conciso.
jAndy,

7
Ho messo insieme un jsperf per confrontare le prestazioni: jsperf.com/array-constructor-versus-literal . Almeno per me su Chrome 20 su Ubuntu, il valore letterale è due volte più veloce del costruttore.
Steven,


jAndy, perché dovresti voler un array con "10 slot vuoti" in JavaScript? In realtà, puoi fare esattamente la stessa cosa con: var arr = []; arr [9] = "omega"; 1. Le matrici in JS sono totalmente dinamiche, puoi fare riferimento a qualsiasi indice che desideri e sarà semplicemente "indefinito". Questo è vero come se dovessi dire: var arr = new Array (10); arr [23]; 2. la lunghezza dell'array verrà impostata sul valore più alto che contiene qualcosa, indipendentemente dal numero di slot non definiti tra. Oppure puoi impostarlo tu stesso. [] potrebbe non curare il cancro, ma è leggermente migliore.
Norguard,

7
  • var arr = [] usa l'array / oggetto letterale
  • var arr = new Array () usa il costruttore array / object

Il modo più rapido per definire un array o un oggetto è letteralmente, perché non è necessario chiamare il costruttore

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

2
Per riferimento, dietro le quinte, var arr = [];utilizza logicamente anche un costruttore. È sempre solo il costruttore di array incorporato, piuttosto che qualunque funzione stia attualmente usando il nome Array.
cHao,

6

Entrambi sono solo corretti. Ma la maggior parte delle persone usavar a = []

Tre modi per dichiarare una matrice in JavaScript.

metodo 1 : possiamo dichiarare esplicitamente un array con la parola chiave "new" JavaScript per creare un'istanza dell'array in memoria (ovvero crearlo e renderlo disponibile).

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

metodo 2 : utilizziamo un metodo alternativo per dichiarare le matrici.

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

metodo 3 : JavaScript consente inoltre di creare array indirettamente, chiamando metodi specifici.

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

4

C'è un limite che il costruttore può prendere come argomenti.

Sulla maggior parte dei sistemi che ho riscontrato, il limite è 2 ^ 16 (2 byte):

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

Ciò causerà un errore (troppi argomenti ....)

Quando usi letterale [] non hai questi problemi.

Nel caso in cui non ti interessi di array così grandi, penso che puoi usare quello che preferisci.


2
Puoi citare un esempio di dove una persona potrebbe ragionevolmente voler creare un array precompilato con 70.000 valori? Tuttavia, spiega davvero alcuni dei terribili siti Web che ho visto che sembrano non finire mai il caricamento ...
John O

2
John O, ho visto alcune implementazioni di SCARY JSON nel mio tempo, che coinvolgono array di array 2D / 3D, con codici IATA (aeroporto), compagnie aeree, tour operator, resort, eccetera ... ... tutto imbottito in un array. È ... ... 1 MB + download di JSON mi fanno venire voglia di piangere.
Norguard,

4
var array = [ 1, 2, 3, 4];

è lo zucchero

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

è sale


5
e dove usarlo, per il caffè o per la pasta?
Aristos,

zucchero sintetico e sale
linquize

3

È perché new Array()è ambiguo. Questi sono i costruttori corretti:

// 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)
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.