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が連想配列を指す

(ex)下記連想配列からkeyとvalueを取得

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とイコール

※this[value]で連想配列の値を取得可能

※実行結果

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を返却