Search

検索したいワードを入力してください

2019年03月05日

JavaScriptの連想配列を操作する方法を解説

この記事では、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: 100b: '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の連想配列の基本的な操作方法をご説明してきました。

複数のデータを簡単に扱うことができる便利な機能なので、使いこなして効率的にシステムを作りましょう。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related