JavaScriptの配列と連想配列とオブジェクトについて
自分の中で、JavaScriptの配列とオブジェクトがよく
分かってなかったので、今後、混乱しないためにも
要点をまとめてみた分をメモしておく(ΦωΦ)
[メモ]
・JavaScriptの連想配列はオブジェクトの一種。
・JavaScriptではJSONもオブジェクトの一種。
・JavaScriptでは、すべてのオブジェクトは連想配列。
・配列の初期化は「[ ]」、連想配列の初期化は「{}」
※但し、連想配列の添字にも「[ ]」を使う。下記参照。
・連想配列の書式
var array = {key: value, key: value ... }
※valueには、文字列、数値、関数、オブジェクトを設定可能
・連想配列で要素を追加する場合、pushは利用不可。
・連想配列の要素追加方法
(ex)ユーザー情報にkey=countryで国情報を追加
var user = {name: 'Taro', age: 32, tel: '080-1234-5678'};
(1)チェーンで追加
user.country = 'Japan';
-> ドット(.)で設定したキー名称を繋げて値を追加。
(2)添字で追加
user['country'] = 'Japan';
-> 配列のように[]を使用し、キー名称を指定して値を追加。
・連想配列の要素削除方法
(ex)書式
delete array[key]
(ex)下記の連想配列からkey=bananaを削除
var arr = {apple: '400yen', banana: '300yen', cake: '600yen'};
delete arr['banana'];
console(arr);
※要素削除後の連想配列の中身
Object{apple: '400yen', cake: '600yen'}
・連想配列の値を取得
(ex)下記の連想配列からkey=nameを取得
var user = {name: 'Taro', age: 32, tel: '080-1234-5678'};
※添字を使用
console.log(user['name']);
※ドット(.)を使用
console.log(user.name);
・連想配列のキー項目の取得方法
簡単な方法はObject.keysを使用。
(ex)書式
Object.keys(args=連想配列)
(ex)下記連想配列のキー項目を取得
var user = {name: 'Taro', age: 32, tel: '080-1234-5678'};
var key = Object.keys(user);
console.log(key);
※実行結果
name,age,telが返却
※配列のように、key[1]で取得も可能
・連想配列のforループ
・for...inでループ処理
少ない記述で効率よくkeyやvalueを取得・設定可能。
(ex)書式
for (var 変数 in 連想配列) {}
(ex)下記連想配列からkey項目を取得
var user = {name: 'Taro', age: 32, tel: '080-1234-5678'};
for (var key in user) {
console.log(key);
}
※実行結果
name
age
tel
・forEachでループ処理
連想配列で使用する場合、Object.keys()を使用し、連想配列の
キー名称(key)だけを一時的に配列へ格納。
(ex)書式
Object.keys(①連想配列).forEach(②callback,③連想配列)
①連想配列のキー名称を配列化
②ループ処理、無名関数
③ループ処理内のthisが連想配列を指す
var arr = {apple: '400yen', banana: '300yen', cake: '600yen'};
①Object.keys(arr).forEach(function (②value) {
console.log(value + ':' + this[value]);
}, ③arr);
①連想配列を配列に変換
②forEachの実行で、valueにkeys(key項目)が格納
③第2引数に連想配列のarrを指定 -> ループ処理内のthisとイコール
※実行結果
apple: 400yen
banana: 300yen
cake: 600yen
・連想配列のソート
・連想配列のkeyを使用したソート
(ex)キーを取得
var user = {name: 'Taro', age: 32, tel: '080-1234-5678'};
①var result = {};
②var key = Object.keys(user);
key.sort();
①ソート後の連想配列を格納する変数②連想配列を配列データとして格納
(ex)ソートした順番で変数「result」に連想配列を格納
for(var i=0; i<key.length; i++) {
①result[key[i]] = user[key[i]];
}
console.log(result);
①元になる連想配列「user」と新規作成する「result」の
それぞれの添字をソート後の変数「key」に統一
※実行結果
{'age': 32, 'name': 'Taro', tel: '080-1234-5678'}
・複数の連想配列をソート
(ex)配列内の複数の連想配列が存在
var fruits = [
{store: 'first-shop', apple: '400yen', banana: '300yen', cake: '400yen'},
{store: 'second-shop', apple: '200yen', banana: '400yen', cake: '600yen'},
{store: 'third-shop', apple: '600yen', banana: '500yen', cake: '200yen'},
];
(ex)各店舗のappleの価格を比較して安い価格順にソート
①fruits.sort(function(a, b) {
②return a.apple < b.apple ? -1 : 1;
});
console.log(fruits);
※実行結果
0: {store: 'second-shop', apple: '200yen', banana: '400yen', cake: '600yen'}
1: {store: 'first-shop', apple: '400yen', banana: '300yen', cake: '400yen'}
2: {store: 'third-shop', apple: '600yen', banana: '500yen', cake: '200yen'}
①sort()で関数を利用し、それぞれの連想配列にある「apple」の価格を比較
②引数a,bには順番に連想配列を格納。
=>a.apple: 0番目のappleの値、b.apple: 1番目の値
それぞれの値を比較し、0より小は-1, 0より大は1を返却
[参考サイト]
Javascriptって2次元の連想配列できないの? « ウップス!!なかわけ
JavaScriptによる多次元連想配列 multidimensional-array associative-array | コードサンプル [日本語]