本記事ではJavaScriptの連想配列について解説します。
連想配列は普通の配列とは使い方が異なるため、ややこしいと感じている初学者も多いかと思います。
今回は連想配列の作り方や操作方法を初心者でも分かるように解説します。
連想配列について知りたい方は本記事をぜひお読みください。
連想配列とは？
厳密に言うと、JavaScriptには連想配列はありません。
ただ、連想配列と似たようなものに「オブジェクト」というものがあります。
このオブジェクトを連想配列と呼ぶ場合もあります。
連想配列は、配列同様複数データを纏めて管理するものです。
配列について詳しく知りたい方は【入門編6】JavaScriptの配列を使って複数データを扱おうをお読み下さい。
まとめて1つの変数に格納すれば、変数の数が少なくて済みますし、管理が楽になります。
連想配列は、配列のそれぞれの値にプロパティがつけられています。
連想配列の値を呼ぶときは、プロパティを使って呼び出すのです。
値にプロパティを付けることで、プログラム全体が見やすくなる、などのメリットがあります。
連想配列の作り方
それでは具体的な連想配列の作り方をみていきましょう。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const human = {name:"tanaka",age:"14"};
</script>
</body>
</html>連想配列を作る場合は上記のようにします。
{プロパティ1:値1, プロパティ2:値2,……}
というような書き方をするのが基本です。
1つの値に対し、1つのプロパティをつけています。
値とプロパティは「:」によって繋げる文法ルールです。
また、1つの組み合わせ同士は「,」を使ってつなげます。
そして、{}を全ての繰り合わせをくくれば、連想配列の作成完了です。
連想配列の値を表示する
連想配列の作り方がわかったところで、次は連想配列の値の表示方法をみていきましょう。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const human = {name:"tanaka",age:"14"};
document.write(human.name);
</script>
</body>
</html>○実行結果
先程同様にhumanという変数に連想配列を格納しています。
「human.name」と記述することで、プロパティが「name」の値が出力されます。
上記ではプロパティが「name」なのは「tanaka」になっていますね。
それでは、プロパティが「age」の方を表示するにはどうすれば良いでしょうか？
○コード例
<script>
const human = {name:"tanaka",age:"14"};
document.write(human.age);
</script>○実行結果
この場合は「human.age」と記述すれば良いのです。
このように「変数名.プロパティ名」と記述することで、そのプロパティの値が表示されます。
連想配列の操作方法
つづいて、連想配列の操作方法をみていきましょう。
ここでは連想配列に値を追加する方法、値を削除する方法をそれぞれ解説します。
連想配列に値を追加する
連想配列に値を追加する場合、次のようにします。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const human = {name:"tanaka",age:"14"};
human.gender = "men";
document.write(human.gender);
</script>
</body>
</html>○実行結果
値を追加する場合は、
変数名.追加したいプロパティ名 = 追加したい値
というように記述すれば良いだけです。
上記ではgenderというプロパティの「men」を追加しています。
連想配列の値を削除する
連想配列の値を削除したい場合はどうするのでしょうか？
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const human = {name:"tanaka",age:"14"};
delete human.name;
document.write(human.name);
</script>
</body>
</html>○実行結果
削除したい場合は、delete文を使いましょう。
delete 変数名.プロパティ名;
と、書くことでそのプロパティおよび値が連想配列から削除されます。
削除されたため、document.writeで呼び出しても、「undefined」と表示されていますね。
まとめ
本記事ではJavaScriptの連想配列について解説しました。
連想配列の作り方や表示方法、追加方法、削除方法がお分かり頂けたかと思います。
連想配列は、JavaScriptの文法の中でも多く使われます。
プロパティを付けることで、プログラム全体が分かりやすくなり、バグも防げるでしょう。
ぜひこの機会に連想配列のやり方を覚えてみてくださいね。
次回はJavaScriptのオブジェクトについて、更に深堀りしていきましょう。
