Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

連想配列

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

// 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の有り難みがとても出てくるはず。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away