web-dev-qa-db-ja.com

Javascript配列宣言:new Array()、new Array(3)、['a'、 'b'、 'c']は異なる動作をする配列を作成します

このJavaScriptコードの例を考えてみましょう。

a = new Array();
a['a1']='foo';
a['a2']='bar';

b = new Array(2);
b['b1']='foo';
b['b2']='bar';

c=['c1','c2','c3'];

console.log(a);
console.log(b);
console.log(c);

Firebugコンソールの結果は次のとおりです。

A(「[]」は「+」ボタンをクリックして展開する必要がありました):

[]      
a1  "foo"   
a2  "bar"

Bの場合:

[undefined, undefined]

Cの場合:

["c1", "c2", "c3"]

私の質問は:

  1. Array ['key'] = 'value'構文を正しく使用していますか?
  2. 配列bが期待どおりに動作しないのはなぜですか?
  3. 配列aとcがコンソールで異なって表示されるのはなぜですか?また、jQueryは.each()メソッドで配列aを反復処理できないようです。
  4. Javascript配列の動作に関する良いチュートリアルをお勧めしますか?

注: Google ChromeのFirebugは、配列 'a'に対して[]のみを表示し、オプションを展開しません。

編集:わかりました、Javascriptの配列には数値キーしかないようです。そのため、キー名として文字列を追加すると、配列からオブジェクトが作成されます。しかし、なぜjQueryの.eachは動作しないのですか?

$.each(a, function ()
    {
    alert ('derp');
    })

スクリプトに追加されたこのコードは、アラートを生成しません。

46
sbichenko

配列には数値インデックスがあります。そう、

a = new Array();
a['a1']='foo';
a['a2']='bar';

and

b = new Array(2);
b['b1']='foo';
b['b2']='bar';

要素を配列に追加するのではなく、.a1および.a2プロパティをaオブジェクトに追加します(配列もオブジェクトです)。さらなる証拠として、これを行った場合:

a = new Array();
a['a1']='foo';
a['a2']='bar';
console.log(a.length);   // outputs zero because there are no items in the array

3番目のオプション:

c=['c1','c2','c3'];

変数cに3つの要素を持つ配列を割り当てています。これらの3つの要素には、c[0]c[1]、およびc[2]としてアクセスできます。つまり、c[0] === 'c1'およびc.length === 3です。

Javascriptは、配列内の任意のタイプのキーを使用できる他の言語が連想配列と呼ぶものに対して、配列機能を使用しません。各アイテムがこのようなプロパティであるjavascriptのオブジェクトを使用するだけで、連想配列のほとんどの機能を実装できます。

a = {};
a['a1']='foo';
a['a2']='bar';

この目的のために配列を使用するのは一般的に間違いであり、コードを読んでいる人を混乱させるだけで、コードがどのように機能するかについての誤った仮定につながるからです。

59
jfriend00

JSの配列には、2種類のプロパティがあります。

通常の要素と連想プロパティ(オブジェクトにすぎません)

a = new Array()を定義すると、空の配列が定義されます。連想オブジェクトはまだないことに注意してください

b = new Array(2)を定義すると、2つの未定義の場所を持つ配列が定義されます。

「a」と「b」の両方の例で、連想プロパティ、つまりこれらの配列にオブジェクトを追加しています。

console.log (a)またはconsole.log(b)は、それぞれ[]および[undefined, undefined]などの配列要素を出力します。ただし、a1/a2およびb1/b2は配列内の結合オブジェクトであるため、console.log(a.a1, a.a2)種類の構文によってのみログに記録できます

4
Navin Israni