JavaScriptで多次元の連想配列を操作する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで多次元の連想配列を操作する方法について現役エンジニアが解説しています。配列も連想配列もJavaScriptではオブジェクトになっています。連想配列にアクセスするには、配列のキー名、オブジェクトのプロパティにアクセスするようなドット記号を使うことが出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで多次元の連想配列を操作する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで多次元の連想配列を操作する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

連想配列とは

JavaScriptでの連想配列とは「キー」と「値」のペアによるデータ構造のことです。

一般的なオブジェクト構造と同じになります。

 

var hash = { "Apple" : 10, "Banana": 20, "Cerry" : 30, "Dream" : 40};

 

JavaScriptで多次元の連想配列を操作する方法

JavaScriptで多次元の連想配列を取り出す方法は、配列のように要素の順番で呼び出すのではなく、与えられたキーを連続して指定することで呼び出せます。

 

var obj = { "Apple" : {"small": 10, "medium" : 30, "big" : 50},

"Banana" : {"small" : {"1set" : 100}, "medium" : {"1set" : 300}, "big" : {"1set" : 500}}

};

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

多次元のデータを取得する方法

多次元配列のデータを取得する方法としては2通りあります。

1つ目は、通常の配列を順番指定で取得するように、キーを[]で連続して指定すると取得できます。
 

console.log(obj["Apple"]["small"]);

// 10

console.log(obj["Apple"]["medium"]);

// 30

 

2つ目は、メソッド呼び出しのようにドット(.)で繋いでキーを指定すると取得できます。

 

console.log(obj.Banana.small.1set);

// 100

console.log(obj.Banana.medium.1set);

// 300

 

多次元にデータを追加する方法

多次元連想配列にデータを追加する方法としては、データを取得するときと同じように

データを追加する階層までキーを指定したあとに、追加したいキーに値を代入して作成します。

 

// "2set"というキーと200という値をsmallに追加する

// 追加したい階層に新規のキーを[]で入れて、値を代入する

obj["Banana"]["small"]["2set"] = 200;

console.log(obj["Banana"]["small"]);

// {"1set" : 100, "2set" : 200}

 

多次元のデータを削除する方法

多次元連想配列のデータを削除するにはdelete文を使用します。

delete 削除したい要素を指定して削除することが出来ます。

//2set を削除する

 

delete obj["Banana"]["small"]["2set"]

 

実際に書いてみよう

 

//for-in文を使用して、キーと値を表示する

var obj = { "Apple" : {"small" : 10, "medium": 30, "big" : 50}};

for( var item in obj["Apple"] ) {

console.log("キー:" + item);

console.log("値:" + obj["Apple"][item]);

}

// キー:small

// 値:10

// キー:medium

// 値:30

// キー:big

// 値:50

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。