251
243

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

連想配列

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

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

251
243
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
251
243

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?