JavaScriptで配列を宣言する際に従うべきベストプラクティスは何ですか?


176

新しい配列を宣言する必要があるときは、この表記を使用します

var arr = new Array();

しかし、たとえばjsbinでオンラインでテストすると、「配列リテラル表記[]を使用する」ように警告が表示されます。

コンストラクターを使用しない理由は見つかりませんでした。使用するよりも何らかの方法で効率が悪い[]ですか?それとも悪い習慣ですか?

var arr = [];代わりに使用する十分な理由はありvar arr = new Array();ますか?


5
どちらも大丈夫です。送信で数バイトを保存するだけです。
シルコ

13
確かに違いがあります。この投稿を参照してください:stackoverflow.com/q/2280285/921204
techfoobar

注:配列のみが上書きされている場合は違いがあります
crdx

一部のブラウザでは@apkdにより、パフォーマンスに大きな違いがあります
Alnitak

けっこうだ。リンクされた質問ではそれはわかりませんでした。
crdx 2012

回答:


260

ほとんどの場合、人々が使用しvar a = []ているためダグラス・クロックフォードがそう言います

彼の理由には、以下の直感的で一貫性のない行動が含まれ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

事前に指定された数値要素を1つnew Array()だけ含む配列を作成する方法はないことに注意してください。

使用する方[]が実際にはより効率的で安全です!Arrayコンストラクタを上書きして奇妙なことをさせることは可能ですが、の動作を上書きすることはできません[]

個人的に、私は常に[]構文を使用し、同様に常に{}構文をの代わりに使用しますnew Object()


5
「[]の動作を上書きすることはできません。」あなたはこれについて確信を持っていますか?少なくとも一部の実装では、Arrayコンストラクターを上書きして[]に影響を与え、Objectコンストラクターを上書きして{}に影響を与えることができると思いました。
Random832

11
@ Random832はおそらく古いブラウザーにありますが、ES5互換の実装にはありません。仕様で[]は、が内部コンストラクターを呼び出すのではなくArray.constructor、その時点で発生している値ではないことが仕様に記載されています。
オリオン座ゼータ星

5
おまけ:配列リテラルは、Arrayコンストラクターを使用して新しい配列を作成するよりもはるかに高速です。jsperf.com
Mathias Bynens

@MathiasBynensはたまにしかありません。
OrangeDog 2012

Ew @ []は、内部のコンストラクターのため、動作が異なります。不整合があると、節約できる以上の混乱が生じます。編集:ああ、セキュリティ上の懸念。わかった。
エリック・レッペン2013年

48

大きな違いの1つは、それがある[]だろういつものに対し、新しい配列をインスタンス化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 = [];
}());​

私のサンプルコードでは、Array関数をドキュメントスコープの残りの部分から隠しましたが、この種の問題に遭遇した場合、コードが適切なクロージャー内に残されておらず、見つけるのは難しいでしょう。

免責事項Arrayコンストラクタを乗っ取るのは良い考えではありません。


7
IIRCでは、古いブラウザでArrayコンストラクタをオーバーライドすると、リテラルが正しく解釈されませんでした。少し前に、GMail CSRFの脆弱性がありました。これには、配列コンストラクターのオーバーライドが含まれ、新しいブラウザーは、この正確な理由でリテラルのオーバーロードを無視します。
hugomg 2012

免責事項:ただし、長年にわたってArrayコンストラクターを強化することは非常に役立ち、有用でした。
Erik Reppen 2013年

26

保守性のために、 []

配列リテラルは、ほとんどの開発者が使用するため、より予測可能です。そこにあるほとんどの配列の使用はリテラルを使用することになるでしょう、そしてあなたのコードを他の開発者が使用するものと一致させることに価値があります。

空の配列の場合は、 []

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

ここに示すよう、空のリテラルといくつかの既知の要素を使用することは、Arrayコンストラクターよりも困難です。

既知のサイズの配列の場合は、 new Array(size)

サイズがわかっている場合、Arrayコンストラクターを使用するとパフォーマンスが大幅に向上します。ただし、値がすべて「未定義」で満たされた配列を処理する必要があることも意味します。

ここに示すよう

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

これは非常に小さな配列でも機能します


12

いいえ、実際には、空の配列に対して他の表記よりも1つの表記を使用する理由はありません。

ただし、ほとんどのブラウザーx = [];は、コンストラクターを呼び出すよりも若干パフォーマンスが優れています。

特定のサイズの配列を作成する必要がある場合はx = new Array(10);、たとえば、10 undefinedスロットの配列を作成するために使用する必要があります。


@Alnitak:あなたがすでに述べたように、非常に直感的で簡潔ではありません。
jAndy

7
パフォーマンスを比較するためにjsperfをまとめました:jsperf.com/array-constructor-versus-literal。少なくとも私にとっては、UbuntuのChrome 20では、リテラルはコンストラクターの2倍の速度です。
スティーブン


jAndy、JavaScriptで「10個の空スロット」を持つ配列が必要なのはなぜですか?実際には、次のようにしてまったく同じことができます。var arr = []; arr [9] = "オメガ"; 1. JSの配列は完全に動的であり、任意のインデックスを参照でき、それは単に「未定義」になります。これは、次のように言うのと同じです。vararr = new Array(10); arr [23]; 2.配列の長さは、間にある未定義のスロットの数に関係なく、何でも含まれる最大値に設定されます。または、自分で設定することもできます。[]がんを治すことはできないかもしれませんが、それはわずかに良いです。
Norguard、2012

7
  • var arr = []は、配列/オブジェクトリテラルを使用します
  • var arr = new Array()は、配列/オブジェクトコンストラクターを使用します

コンストラクターを呼び出す必要がないため、配列またはオブジェクトを定義する最も迅速な方法は文字通りの方法です。

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
参考までに、裏では、var arr = [];論理的にコンストラクタも使用しています。これは、現在名前で使用されている関数ではなく、常に組み込みの配列コンストラクターArrayです。
cHao

6

どちらも正しいだけです。しかし、ほとんどの人はvar a = []

JavaScriptで配列を宣言する3つの方法。

メソッド1:JavaScriptの "new"キーワードを使用して配列を明示的に宣言し、メモリ内で配列をインスタンス化(つまり、作成して使用可能にする)できます。

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

方法2:別の方法を使用して配列を宣言します。

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

メソッド3:JavaScriptでは、特定のメソッドを呼び出すことにより、間接的に配列を作成することもできます。

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

4

コンストラクターが引数として取ることができる制限があります。

ほとんどのシステムでは、制限は2 ^ 16(2バイト)でした。

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

エラーが発生します(引数が多すぎます...)。

リテラル[]を使用する場合、そのような問題はありません。

このような大きな配列を気にしない場合は、好きなように使用できると思います。


2
70,000個の値が事前に入力された配列を作成したい場所の例を挙げられますか?ただし、ロードが完了していないように見える、私が見たひどいWebサイトの一部は本当に説明されています...
John O

2
John O、私は私の時代に2D / 3D配列の配列を含むいくつかのSCARY JSON実装を見てきました。IATA(空港)コード、航空会社、ツアーオペレーター、リゾートなどを備えています... ...すべて詰め物1つの配列に。それは... ... 1MB +のJSONダウンロードは私を泣きたくさせます。
Norguard、2012

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

砂糖です

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

塩です


5
そして、それをコーヒーやパスタにどこで使うのですか?
アリストス

シンタックスシュガーとソルト
linquize

3

new Array()曖昧だからです。これらは正しいコンストラクタです:

// 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)
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.