この記事では、JavaScriptの連想配列の操作方法について解説しています。連想配列はJavaScriptプログラムにおいて、頻繁に利用されるデータ型なのでその操作方法の知識はとても大事になります。しっかり理解し、実際のプログラムで利用できるようにしましょう
JavaScriptの連想配列とは
連想配列と配列の違い
JavaScriptの連想配列と配列の違いについて解説します。どちらも複数のデータをひとまとまりに扱えるデータではありますが、その管理の仕方に違いがあります。
連想配列は、データを「キー」と「値」のペアで管理し、配列はデータを「インデックス番号」と「値」で管理します。
以下にサンプルを示します。
//連想配列
var assoc = {
a: 100,
b: 'bbbb',
c: {
d: [1, 2, 3]
}
};
//配列
var array = [1, 'bbbb', {d: [1,2,3]}];JavaScriptの連想配列は{ }で要素を囲みます。連想配列はキーと要素をそれぞれ指定する必要があるので、キー: 値という形で指定します。また、続きの要素がある場合は末尾に「,」(カンマ)をつけて次の要素を記述します。
JavaScriptの配列は[ ]で要素を囲みます。配列の場合はインデックス番号は自動で付与してくれるので、値を「,」カンマ区切りで指定していけばOKです。
JavaScriptでは、連想配列も配列も値にできる型に制限はありません。ただし、連想配列のキーは文字列である必要があります。
なお、連想配列のキーはクオーテーションなどで囲まなくても自動で文字列になります。
このように連想配列と配列は名前こそ似ていますが、その記述方法や利用方法に違いがあります。今回は連想配列の利用方法について解説しますが、配列との違いを意識しながら学習していきましょう。
JavaScriptの連想配列操作方法の基本
JavaScriptの連想配列の基本的な操作方法をご説明します。連想配列への要素取得方法、基本操作である追加と削除について解説します。
連想配列の値を取得する方法
JavaSriptの連想配列で値を取得するには、「連想配列.キー」または「連想配列[キー]」と記述します。連想配列[キー]で取得する際は、キーを'または"で囲む必要があります。
以下にサンプルコードを示します。
var assoc = {
a: 100,
b: 'bbbb',
c: {
d: [1, 2, 3]
}
};
console.log(assoc.c); //{ d: [ 1, 2, 3 ] }
console.log(assoc['c']); //{ d: [ 1, 2, 3 ] }なお、キーを変数で指定する場合は連想配列[キー]の方の指定しかできません。
var assoc = {
a: 100,
b: 'bbbb',
c: {
d: [1, 2, 3]
}
};
var key = 'c';
console.log(assoc[key]); //{ d: [ 1, 2, 3 ] }キーを取得する方法
JavaScriptで、連想配列のキーを取得する簡単な方法は、Object.keysメソッドを利用する方法です。Object.keysメソッドは、連想配列のキーを要素とした配列を返してくれるメソッドです。
以下にサンプルコードを示します。
var assoc = {
a: 100,
b: 'bbbb',
c: {
d: [1, 2, 3]
}
};
console.log(Object.keys(assoc)); //[ 'a', 'b', 'c' ]連想配列の要素を追加する方法
JavaScriptで連想配列に要素を追加するには、以下の2通りの方法があります。
・.（ドット）で指定する方法
・[ ]で指定する方法
そのそれぞれについてサンプルを示します。
var assoc = {
a: 100,
b: 'bbbb',
c: {
d: [1, 2, 3]
}
};
//.で指定
assoc.e = 'eeee';
//[]で指定
assoc['f'] = 'fffff';
console.log(assoc); //{ a: 100, b: 'bbbb', c: { d: [ 1, 2, 3 ] }, e: 'eeee', f: 'fffff' }連想配列.キー = 値の指定と、連想配列[キー] = 値という指定ができます。連想配列[キー] = 値で指定する場合は、キーを「’」（シングルクオーテーション）や「”」（ダブルクオーテーション）で囲む必要があります。
どちらも大きな違いはありませんが、もしキーを変数から取得したい場合は連想配列[変数] = 値でしか指定できません。
var assoc = {
a: 100,
b: 'bbbb',
c: {
d: [1, 2, 3]
}
};
var key = 'e';
assoc[key] = 'value';
console.log(assoc); //{ a: 100, b: 'bbbb', c: { d: [ 1, 2, 3 ] }, e: 'value' }連想配列の要素を削除する方法
JavaScriptで連想配列から要素を削除するには、delete文を利用します。delete文は、delete 連想配列[キー]またはdelete 連想配列.キーで指定します。
削除する値の指定の仕方は、値取得の際と同様です。上記のようにしていすることで、キーと値のペアを削除することができます。
以下にサンプルコードを示します。
var assoc = {
a: 100,
b: 'bbbb',
c: {
d: [1, 2, 3]
}
};
delete assoc['b'];
delete assoc.a;
console.log(assoc); //{ c: { d: [ 1, 2, 3 ] } }連想配列のa: 100とb: 'bbbb'が削除されていることがわかります。
またキーを変数を用いて指定する場合は、取得の場合と同じくdelete 連想配列[変数]で指定する必要があります。
var assoc = {
a: 100,
b: 'bbbb',
c: {
d: [1, 2, 3]
}
};
var key = 'b'
delete assoc[key];
console.log(assoc); //{ a: 100, c: { d: [ 1, 2, 3 ] } }JavaScriptの連想配列でforループを使う
JavaScriptでは、連想配列でもループ処理を行うことができます。今回は、for-in文を用いる方法とforEachメソッドを用いる方法の2つを紹介します。
どちらでも同じ処理を対応できますが、それぞれ特徴がありますのでしっかり違いを学習しましょう。
for-in文でループ処理をする方法
JavaScriptの連想配列は、for-in文を利用することでループ処理を行うことができます。for(var 変数 in 連想配列){ 処理 }と指定します。変数には、連想配列の各キーが渡されます。
以下にサンプルコードを示します。
サンプルコード
var score = {
math: 68,
japanese: 89,
english: 57
};
for(var key in score){
console.log(key + ': ' + score[key]);
}
結果
math: 68
japanese: 89
english: 57このように、for-in文を利用することで連想配列でもループ処理を行えます。
forEach文でループ処理をする方法
JavaScriptには、配列オブジェクトに対してforEachメソッドが用意されています。これを利用すると、配列のループ処理を行うことができるのですが、これを連想配列で利用することも可能です。
連想配列でforEacchを利用するには、Object.keysメソッドをつかって「Object.keys(連想配列).forEach(funciton(変数){ 処理 }, 連想配列);と指定します。
forEachの第二引数に連想配列を設定することで、forEachの第一引数に指定したコールバック関数の中でthisとして利用できます。
以下にサンプルコードを示します。
サンプルコード
var score = {
math: 68,
japanese: 89,
english: 57
};
Object.keys(score).forEach(function(key){
console.log(key + ': ' + this[key]);
}, score);
結果
math: 68
japanese: 89
english: 57なお、forEachのコールバック関数内のthisは、第二引数の連想配列そのものを表します。なので、thisへの更新はもとの連想配列にも反映されます。
var score = {
math: 68,
japanese: 89,
english: 57
};
Object.keys(score).forEach(function(key){
this[key] += 10;
}, score);
console.log(score); //{ math: 78, japanese: 99, english: 67 }連想配列でのソート方法
JavaScriptの連想配列をソートするには、配列のように簡単ではなく、一工夫必要になります。
なお、連想配列をソートする場合
・キーを軸にソート
・値を軸にソート
の2種類の考え方が存在します。ここでは、連想配列のキーをよしなに利用して、2つのソートを実現する方法について解説します。
連想配列のキーを使ったソートの方法
JavaScriptで、キーを軸にソートする場合、以下のような手順を踏んでソートをしていきます。
1. Object.keysメソッドで連想配列のキー配列を取得
2. キー配列をソート
3. キー配列でループ処理を行い、新しい連想配列の変数にキーと値を代入
この手順でソートが可能です。
以下にサンプルコードを示します。
var score = {
math: 68,
japanese: 89,
english: 57
};
//1. 連想配列のキー配列を取得
var keys = Object.keys(score);
//キー配列をソート
keys.sort();
// キー配列でループ処理を行い、新しい連想配列の変数にキーと値を代入
var new_score = {};
keys.forEach(function(key){
this[key] = score[key];
}, new_score);
console.log(new_score); //{ english: 57, japanese: 89, math: 68 }連想配列のキーが辞書順にソートされ、値も対応したものになっていることがわかります。
連想配列の値を軸にソート
JavaScriptで、値を軸にソートする場合、以下のような手順を踏んでソートしていきます。
1. Object.keysメソッドで連想配列のキー配列を取得
2. キー配列に対し、sortメソッドのコールバック関数を用いてキー配列を並べ替える。
3. キー配列でループ処理を行い、新しい連想配列の変数にキーと値を代入
この手順でソートが可能です。
以下にサンプルコードを示します。
var score = {
math: 68,
japanese: 89,
english: 57
};
//1. 連想配列のキー配列を取得
var keys = Object.keys(score);
//2. キー配列に対し、sortメソッドのコールバック関数を用いてキー配列を並べ替える。
keys.sort(function(a, b){
return score[a] - score[b];
});
//3. キー配列でループ処理を行い、新しい連想配列の変数にキーと値を代入
var new_score = {};
keys.forEach(function(key){
this[key] = score[key];
}, new_score);
console.log(new_score); //{ english: 57, math: 68, japanese: 89 }連想配列の値が昇順にソートされ、キーも対応したものになっていることがわかります。
複数の連想配列をソートする方法
最後に、JavaScriptで複数の連想配列をソートする方法について解説します。ここでは、同形の連想配列が要素となった配列について考えます。例えば以下のような配列です。
var scores = [
{math: 68,japanese: 89,english: 57},
{math: 90,japanese: 41,english: 82},
{math: 32,japanese: 100,english: 69},
];この配列の要素を、englishの値でソートします。その際、もちろんsortメソッドを利用するのですが、このコールバック関数を上手く利用することでスッキリとしたJavaScriptプログラムで実現することができます。
以下にサンプルコードを示します。
サンプルコード
var scores = [
{math: 68,japanese: 89,english: 57},
{math: 90,japanese: 41,english: 82},
{math: 32,japanese: 100,english: 69},
];
scores.sort(function(a, b){
return a.english - b.english;
});
console.log(scores);
結果
[ { math: 68, japanese: 89, english: 57 },
{ math: 32, japanese: 100, english: 69 },
{ math: 90, japanese: 41, english: 82 } ]englishの値で昇順にソートされていることがわかります。連想配列が要素の配列に対するソートは上記のような記述が可能なので、覚えておきましょう。
連想配列を使って効率的なプログラミングをしよう
いかがだったでしょうか？JavaScriptの連想配列の基本的な操作方法をご説明してきました。
複数のデータを簡単に扱うことができる便利な機能なので、使いこなして効率的にシステムを作りましょう。
