javascriptの連想配列と配列の違い


まだたまにわからなくなる時があるのでメモ。

連想配列

全てのオブジェクトは連想配列である。以下は全て同じ連想配列。

// 1
var obj = { hoge: 'hoge' };

// 2
var obj = { 'hoge': 'hoge' };

// 3
var obj = {};
obj.hoge = 'hoge';

// 4
var obj = {};
obj['hoge'] = 'hoge';

// 5
var obj = new Object();
obj.hoge = 'hoge';

これらのhogeのように連想配列のキーになるシンボルの事をプロパティという。

配列

配列プロトタイプを継承したオブジェクトのことである。以下は全て同じ配列。

// 1
var array = ['hoge', 'fuga'];

// 2
var array = new Array('hoge', 'fuga');

// 3
var array = Array('hoge', 'fuga');

// 4
var array = [];
array[0] = 'hoge';
array[1] = 'fuga';

// 5
var array = [];
array['0'] = 'hoge'
array['1'] = 'hoge'

// 6
var array = { 0: 'hoge', 1: 'fuga', length: 2 };
array.__proto__ = Array.prototype;

補足

連想配列の方は上記2,3のこの書き方がしっくり来る

var obj = { 'hoge': 'hoge' };

var obj = {};
obj.hoge = 'hoge';

配列の場合には

var array = ['hoge', 'fuga'];

はしっくり来ますがそれ以外は

var array = [];

と宣言してその配列に代入する場合には、

array.push('hoge')
array.push('fuga')

というのが多い。

要素をループして列挙する時の注意というか罠

PHPと異なり,JavaScriptの連想配列とfor in構文には順序の概念がないので注意すること

要素の列挙処理などで戸惑う場合は便利なユーティリティ系のライブラリを使って書いたほうがいい。

Underscore.jsの使いドコロとしては、WebAPI的とかバックエンド側のPHPから生成されるJSONフォーマットなデータを一旦まるごと受け取って、クライアント側で

  • 必要な箇所だけフィルタかけて表示する
  • 特定のキーでソートする(例:名前順とか、何かの数値が大きい・小さい順など)

というようなことをさせたい場合に、取得済のJSONに対して色々加工して、その後にUnderscore.jsのtemplateの機能を呼び出して画面の再描画みたいなことが出てくるとUnderscore.jsの有り難みがとても出てくるはず。