Apa praktik terbaik yang harus diikuti ketika mendeklarasikan array dalam Javascript?

176

Ketika saya perlu mendeklarasikan array baru saya menggunakan notasi ini

var arr = new Array();

Tetapi ketika menguji secara online, misalnya pada jsbin , peringatan memberi sinyal kepada saya untuk "Gunakan notasi literal array []."

Saya tidak menemukan alasan untuk menghindari penggunaan konstruktor. Apakah dalam beberapa hal kurang efisien daripada menggunakan []? Atau apakah itu praktik yang buruk?

Apakah ada alasan yang baik untuk menggunakan var arr = [];bukan var arr = new Array();?

Naigel
sumber
5
Keduanya baik-baik saja. Anda hanya menyimpan beberapa byte dalam transmisi.
Sirko
13
Memang ada perbedaan. Lihat posting ini: stackoverflow.com/q/2280285/921204
techfoobar
Catatan: ada perbedaan jika Array hanya ditimpa .
crdx
@ apkd pada beberapa browser ada perbedaan kinerja yang signifikan
Alnitak
Cukup adil. Saya tidak melihat itu pada pertanyaan terkait.
crdx

Jawaban:

260

Sebagian besar orang menggunakan var a = []karena Douglas Crockford mengatakan demikian .

Alasannya termasuk perilaku tidak intuitif dan tidak konsisten dari 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

Perhatikan bahwa tidak ada cara new Array()untuk membuat array dengan hanya satu elemen angka yang telah ditentukan di dalamnya!

Penggunaannya []sebenarnya lebih efisien, dan lebih aman juga ! Dimungkinkan untuk menimpa Arraykonstruktor dan membuatnya melakukan hal-hal aneh, tetapi Anda tidak dapat menimpa perilaku [].

Secara pribadi, saya selalu menggunakan []sintaks, dan demikian pula selalu menggunakan {}sintaks di tempat new Object().

Alnitak
sumber
5
"Anda tidak bisa menimpa perilaku []." Apa kau yakin tentang ini? Saya pikir Anda bisa menimpa konstruktor Array untuk memengaruhi [], dan konstruktor Objek memengaruhi {}, setidaknya pada beberapa implementasi.
Random832
11
@ Random832 mungkin di browser lama, tetapi tidak dalam implementasi yang kompatibel dengan ES5, di mana spec mengatakan bahwa []memanggil konstruktor internal, bukan nilai apa pun yang Array.constructorterjadi pada saat itu.
Alnitak
5
Bonus: Array literals jauh lebih cepat daripada membuat array baru menggunakan Arraykonstruktor: jsperf.com/new-array
Mathias Bynens
@MathiasBynens hanya sesekali.
OrangeDog
Ew @ the [] bekerja secara berbeda karena konstruktor internal. Ketidakkonsistenan akan menyebabkan lebih banyak kebingungan daripada yang dihematnya. Sunting: Ah, masalah keamanan. Saya mengerti.
Erik Reppen
48

Satu perbedaan signifikan adalah bahwa []akan selalu menjadi contoh Array baru, sedangkan new Arraybisa dibajak untuk membuat objek yang berbeda .

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

Dalam kode contoh saya, saya telah menjaga Arrayfungsi tersembunyi dari sisa ruang lingkup dokumen, namun kemungkinan besar jika Anda pernah mengalami masalah seperti ini bahwa kode tidak akan dibiarkan dalam penutupan yang bagus, dan akan kemungkinan sulit ditemukan.

Penafian : Bukan ide yang baik untuk membajak Arraykonstruktor.

zzzzBov
sumber
7
IIRC, di browser lama menimpa konstruktor Array juga akan menyebabkan literal ditafsirkan secara salah. Ada kerentanan CSRF GMail beberapa waktu lalu yang terlibat menimpa konstruktor array dan browser baru mengabaikan kelebihan muatan untuk literal karena alasan yang tepat ini.
hugomg
Counter-disclaimer: Namun sangat bermanfaat dan bermanfaat untuk meningkatkan konstruktor Array selama bertahun-tahun.
Erik Reppen
26

untuk pemeliharaan, gunakan []

Literal array lebih dapat diprediksi, karena sebagian besar pengembang menggunakannya. Sebagian besar penggunaan array di luar sana akan menggunakan literal, dan ada nilai dalam membuat kode Anda cocok dengan apa yang digunakan pengembang lain.

untuk array kosong, gunakan []

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

Seperti yang ditunjukkan di sini , menggunakan literal untuk kosong dan beberapa elemen yang dikenal lebih gemuk daripada konstruktor Array.

untuk array dengan ukuran yang diketahui, gunakan new Array(size)

Jika ukurannya diketahui, maka menggunakan konstruktor Array secara signifikan meningkatkan kinerja. Namun itu juga berarti Anda harus berurusan dengan array yang sudah 'tidak terdefinisi' mengisi semua nilai itu.

Seperti yang ditunjukkan di sini

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

Ini juga berfungsi untuk array yang sangat kecil juga .

JL235
sumber
12

Tidak, sebenarnya tidak ada alasan untuk menggunakan satu notasi di atas yang lainnya untuk Array kosong.

Namun, sebagian besar browser menunjukkan kinerja yang sedikit lebih baik x = [];daripada memanggil Constructor .

Jika Anda perlu membuat Array dengan ukuran tertentu, Anda perlu menggunakan x = new Array(10);misalnya, yang akan membuat Array dengan 10 undefinedslot.

jandy
sumber
@Alnitak: yang sudah Anda sebutkan, tidak terlalu intuitif dan ringkas.
jAndy
7
Saya mengumpulkan jsperf untuk membandingkan kinerja: jsperf.com/array-constructor-versus-literal . Setidaknya bagi saya di Chrome 20 di Ubuntu, literal dua kali lebih cepat daripada konstruktor.
Steven
jAndy, mengapa Anda ingin array dengan "10 slot kosong" di JavaScript? Pada kenyataannya, Anda dapat melakukan hal yang persis sama dengan: var arr = []; arr [9] = "omega"; 1. Array di JS benar-benar dinamis, Anda dapat referensi indeks apa pun yang Anda inginkan, dan itu hanya akan "tidak terdefinisi". Ini sama benarnya seperti jika Anda mengatakan: var arr = new Array (10); arr [23]; 2. panjang array akan diatur ke nilai tertinggi yang memiliki apa pun di dalamnya, terlepas dari berapa banyak slot yang tidak ditentukan di antaranya. Atau Anda bisa mengaturnya sendiri. [] mungkin tidak menyembuhkan kanker, tetapi sedikit lebih baik.
Norguard
7
  • var arr = [] menggunakan array / objek literal
  • var arr = new Array () menggunakan konstruktor array / objek

Cara tercepat untuk mendefinisikan array atau objek adalah cara literal, karena Anda tidak perlu memanggil konstruktor

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
sumber
2
Sebagai referensi, di balik layar, var arr = [];secara logis menggunakan konstruktor juga. Ini selalu merupakan konstruktor array bawaan, alih-alih fungsi apa pun yang saat ini digunakan oleh namanya Array.
cao
6

Keduanya hanya benar. Tetapi sebagian besar orang menggunakannyavar a = []

Tiga Cara untuk Menyatakan Array dalam JavaScript.

metode 1 : Kita dapat secara eksplisit mendeklarasikan sebuah array dengan kata kunci "baru" JavaScript untuk membuat array dalam memori (yaitu membuatnya, dan membuatnya tersedia).

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

metode 2 : kami menggunakan metode alternatif untuk mendeklarasikan array.

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

metode 3 : JavaScript juga memungkinkan Anda membuat array secara tidak langsung, dengan memanggil metode tertentu.

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

Ada batasan yang dapat diambil konstruktor sebagai argumen.

Pada kebanyakan sistem saya membatasi batasnya adalah 2 ^ 16 (2 byte):

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

Itu akan menyebabkan kesalahan (terlalu banyak argumen ....)

Saat menggunakan literal [] Anda tidak memiliki masalah seperti itu.

Jika Anda tidak peduli dengan array besar seperti itu, saya pikir Anda dapat menggunakan apa pun yang Anda suka.

Erwin Moller
sumber
2
Bisakah Anda mengutip contoh di mana seseorang mungkin ingin membuat array yang diisi sebelumnya dengan 70.000 nilai? Padahal, itu benar-benar menjelaskan beberapa situs web mengerikan yang pernah saya lihat yang sepertinya tidak pernah selesai memuat ...
John O
2
John O, saya telah melihat beberapa implementasi JSON SCARY di waktu saya, melibatkan array array 2D / 3D, menampilkan kode IATA (bandara), perusahaan penerbangan, operator tur, resort, dan lain-lain ... ... semuanya diisi menjadi satu array. Ini ... ... 1MB + unduhan JSON membuat saya ingin menangis.
Norguard
4
var array = [ 1, 2, 3, 4];

adalah gula

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

adalah garam

linquize
sumber
5
dan di mana menggunakannya, untuk kopi atau pasta?
Aristos
gula dan garam sintaksis
linquize
3

Itu karena new Array()ambigu. Ini adalah konstruktor yang benar:

// 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
sumber