Javascript'te bir dizi bildirirken izlenecek en iyi uygulamalar nelerdir?


176

Yeni bir dizi bildirmem gerektiğinde bu gösterimi kullanıyorum

var arr = new Array();

Ancak çevrimiçi test yaparken, örneğin jsbin'de , bir uyarı beni "Dizi değişmez gösterimini [] kullan" uyarısı verir.

Yapıcıyı kullanmaktan kaçınmak için bir neden bulamadım. Bir şekilde kullanmaktan daha az verimli []mi? Yoksa kötü bir uygulama mı?

var arr = [];Bunun yerine kullanmak için iyi bir neden var mı var arr = new Array();?


5
İkisi de iyi. İletimde sadece bayt tasarruf edersiniz.
Sirko

13
Gerçekten farklılıklar var. Bu
yazıyı

Not: Dizi yalnızca üzerine yazıldığında farklılıklar vardır .
crdx

@apkd bazı tarayıcılarda önemli bir performans farkı var
Alnitak

Yeterince adil. Bağlantılı soruda bunu görmedim.
crdx

Yanıtlar:


260

Çoğunlukla insanlar kullanır var a = []çünkü Douglas Crockford öyle diyor .

Onun nedenleri sezgisel olmayan ve tutarsız davranışları içerir 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

İçinde new Array()yalnızca bir tane önceden belirlenmiş sayı öğesi olan bir dizi oluşturmanın bir yolu olmadığını unutmayın !

Kullanmak []aslında daha verimli ve daha güvenlidir ! Kurucunun üzerine yazmak Arrayve garip şeyler yapmasını sağlamak mümkündür , ancak davranışının üzerine yazamazsınız [].

Şahsen ben her zaman []sözdizimini kullanıyorum ve benzer şekilde her zaman {}yerine sözdizimini kullanıyorum new Object().


5
"[] davranışının üzerine yazamazsınız." Bundan emin misin? En azından bazı uygulamalarda Array yapıcısını [] ve Nesne yapıcısını {} etkileyecek şekilde yazabileceğinizi düşündüm.
Random832

11
@ Random832 belki eski tarayıcılarda olabilir, ancak spesifikasyon o anda sahip olunan []değeri değil dahili bir kurucu çağırır diyor ES5 uyumlu uygulamalarda değil Array.constructor.
Alnitak

5
Bonus: Dizi değişmezleri, yapıcıyı kullanarak yeni diziler oluşturmaktan çok daha hızlıdır Array: jsperf.com/new-array
Mathias Bynens

@MathiasBynens sadece bazen.
OrangeDog

Ew @ [] iç kurucu şey yüzünden farklı çalışıyor. Tutarsızlık, kaydettiğinden daha fazla karışıklığa neden olacaktır. Düzenleme: Ah, güvenlik endişesi. Anladım.
Erik Reppen

48

Önemli bir fark, her zaman yeni bir Dizi []başlatacağı , ancak farklı bir nesne oluşturmak için ele geçirilebileceğidir .new Array

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

Örnek kodumda, Arrayişlevi belge kapsamının geri kalanından gizledim, ancak bu tür bir sorunla karşılaşırsanız, kodun güzel bir kapanışta bırakılmayacağı ve bulmak zor olabilir.

Yasal Uyarı : Yapıcıyı ele geçirmek iyi bir fikir değildir Array.


7
IIRC, Array yapıcısını geçersiz kılan eski tarayıcılarda değişmez değerlerin yanlış yorumlanmasına neden olur. Bir süre önce bir GMail CSRF güvenlik açığı vardı , dahil olan dizi oluşturucuyu ve yeni tarayıcıları bu kesin nedenden dolayı değişmezler için aşırı yüklemeyi yok sayıyor.
hugomg

Karşı feragatname: Bununla birlikte, yıllar içinde Array yapıcısını geliştirmek son derece yararlı ve yararlı olmuştur.
Erik Reppen

26

sürdürülebilirlik için []

Dizi geliştiricisi, çoğu geliştirici tarafından kullanıldığından daha tahmin edilebilir. Çoğu dizi kullanımı değişmezi kullanacak ve kodunuzun diğer geliştiricilerin kullandıklarıyla eşleşmesinin değeri vardır.

boş diziler için []

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

Görüldüğü gibi burada boş için literal ve bilinen elementlerin bir çift kullanarak, Array yapıcısının daha fatster olduğunu.

bilinen boyutta bir dizi için şunu kullanın: new Array(size)

Boyut biliniyorsa, Array yapıcısını kullanmak performansı önemli ölçüde artırır. Bununla birlikte, aynı zamanda, tüm değerlerini dolduran 'tanımsız' bir dizi ile uğraşmanız gerektiği anlamına gelir.

Görüldüğü gibi burada

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

Bu aynı zamanda çok küçük diziler için de geçerlidir .


12

Hayır, aslında boş diziler için bir gösterimi diğerinin üzerinde kullanmak için hiçbir neden yoktur.

Ancak, çoğu tarayıcı kullanarak biraz daha iyi bir performans göstermek x = [];çağırmaktan daha Oluşturucu .

Belirli bir boyuta sahip bir Array oluşturmanız gerekiyorsa , x = new Array(10);örneğin 10 undefinedyuvalı bir Array oluşturacak bir tür kullanmanız gerekir .


@Alnitak: daha önce bahsettiğiniz, çok sezgisel ve özlü değil.
jAndy

7
Performansı karşılaştırmak için bir jsperf oluşturdum: jsperf.com/array-constructor-versus-literal . En azından benim için Ubuntu'daki Chrome 20'de, hazır bilgi oluşturucudan iki kat daha hızlı.
Steven


jAndy, neden JavaScript'te "10 boş yuva" içeren bir dizi istesin? Gerçekte, aynı şeyi şu şekilde yapabilirsiniz: var arr = []; arr [9] = "omega"; 1. JS dizileri tamamen dinamiktir, istediğiniz herhangi bir dizine başvurabilirsiniz ve sadece "tanımsız" olacaktır. Bu, aynen söyleyeceğiniz gibi doğrudur: var arr = new Array (10); dizi [23]; 2. dizinin uzunluğu, aralarında kaç tane tanımsız yuva olduğuna bakılmaksızın, içinde bir şey olan en yüksek değere ayarlanacaktır. Veya kendiniz ayarlayabilirsiniz. [] kanseri tedavi etmeyebilir, ancak marjinal olarak daha iyidir.
Norguard

7
  • var arr = [] dizi / nesne değişmezini kullanır
  • var arr = new Array () dizi / nesne yapıcısını kullanır

Bir diziyi veya nesneyi tanımlamanın en hızlı yolu gerçek anlamlıdır, çünkü yapıcıyı çağırmanıza gerek yoktur

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
Referans olarak, perde arkasında var arr = [];mantıksal olarak bir kurucu da kullanır. Bu , adıyla ne işlev görürse yapsın, her zaman yerleşik dizi yapıcısıdır Array.
cHao

6

Her ikisi de sadece doğrudur. Ama insanların çoğuvar a = []

JavaScript'te Dizi Bildirmenin Üç Yolu.

yöntem 1 : Diziyi bellekte başlatmak (örneğin oluşturmak ve kullanılabilir hale getirmek) için JavaScript "yeni" anahtar kelimesiyle bir diziyi açıkça bildirebiliriz.

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

Yöntem 2 : Dizileri bildirmek için alternatif bir yöntem kullanıyoruz.

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

Yöntem 3 : JavaScript, belirli yöntemleri çağırarak dolaylı olarak diziler oluşturmanıza da olanak tanır.

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

4

Kurucunun argüman olarak alabileceği bir sınır vardır.

Ben kodlanmış çoğu sistemlerde sınırı 2 ^ 16 (2 bayt):

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

Bu bir hataya neden olur (çok fazla argüman ....)

Değişmez [] kullanırken böyle sorunlarınız olmaz.

Böyle büyük dizileri umursamıyorsanız, bence istediğinizi kullanabilirsiniz.


2
Bir kişinin 70.000 değerle önceden doldurulmuş bir dizi oluşturmak için makul olarak nerede isteyebileceğine dair bir örnek verebilir misiniz? Yine de, yüklemeyi bitirmediğini gördüğüm bazı korkunç web sitelerini gerçekten açıklıyor ...
John O

2
John O, zamanımda IATA (havaalanı) kodları, havayolu şirketleri, tur operatörleri, tatil köyleri, et cetera ... bir diziye. Bu ... ... 1MB + JSON indirmeleri beni ağlatmak istiyor.
Norguard

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

şeker mi

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

tuz


5
ve kahve veya makarna için nerede kullanılır?
Aristos

sözdizimsel şeker ve tuz
linquize

3

Çünkü new Array()belirsiz. Bunlar doğru kurucular:

// 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)
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.