JavaScriptで配列に加えてよく使うデータ構造が連想配列と呼ばれるものです。
ただ配列と比べると少し複雑なので扱いが難しく感じることもあるかもしれません。
ということで自分の記憶を整理も兼ねて連想配列の作り方や扱い方についてまとめます。
連想配列とは？作り方の基本
連想配列とは次のように {} で囲まれていてキーと値がペアになったデータのことです。
|
1 2 3 4 5 |
{ 'red' : '赤', 'green': '緑', 'blue' : '青' }; |
上の例なら 'red' というキーに対して '赤' という値、 'green' というキーに対して '緑' 、 'blue' というキーに対しては '青' という値が対応しています。
また連想配列は次のように内部にさらに配列や連想配列を持つことも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 |
{ 'numbers': ['one', 'tow', 'three'], fruits: { 'apple' : 'リンゴ', 'banana': 'バナナ', 'cherry': 'チェリー' } }; |
実際にコード中で宣言するには変数に {} または連想配列を代入するだけです。
|
1 2 3 4 5 6 7 8 9 |
/** 空の連想配列を宣言 */ let mixed = {}; /** または値が入った連想配列を渡す */ let mixed = { 'red' : '赤', 'green': '緑', 'blue' : '青' }; |
これで変数から連想配列を扱うことができます。
連想配列の扱い方
連想配列を作ったら当然値を代入したり、値にアクセスする方法も知らないと使えません。
ということで次は連想配列の扱い方についてまとめます。
連想配列の値にアクセスする
まずは連想配列のキーに対応する値にアクセスする方法です。
そのやり方は次の２通り
まず１つめはドット(.)演算子を使って値アクセスするやり方です。
例えば次のように連想配列の後に .キー名 とすれば値が取得可能
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let fruits = { 'apple' : 'リンゴ', 'banana': 'バナナ', 'cherry': 'チェリー' } console.log( fruits.apple ); /// => コンソール画面に 'リンゴ' と表示 console.log( fruits.banana ); /// => コンソール画面に 'バナナ' と表示 console.log( fruits.cherry ); /// => コンソール画面に 'チェリー' と表示 |
fruits.apple とか fruits.banana のようにすればそのキーに対応する値になります。
そして２つめの方法は [] を使って配列の添え字のようにアクセスする方法です。
例えば次が [] を使ってキーに対応する値にアクセスしているコード例
|
1 2 3 4 5 6 7 8 9 |
let fruits = { 'apple' : 'リンゴ', 'banana': 'バナナ', 'cherry': 'チェリー' } console.log( fruits['apple'] ); console.log( fruits['banana'] ); console.log( fruits['cherry'] ); |
fruits['apple'] とか fruits['banana'] とかのように [] のなかにキー名を書くことでアクセスできます。
ただし注意点として次のようにそのままキー名を指定することはできないので注意してください。
|
1 2 3 4 |
/** [] でアクセスするときのNG例 */ fruits[apple] fruits[banana] fruits[cherry] |
必ずキー名はダブルクォート( " )またはシングルクォート( ' )で囲むようにしましょう。
以上が連想配列の値にキーからアクセスする方法です。
連想配列に値を代入する方法
次は連想配列に値を代入する方法です。
代入に関しては先ほど紹介した２つのアクセス方法が使えます。
そのやり方は次の通り
まずは１つめはドット(.)演算子を使ってあるキーに対応する値を代入する方法
そのコード例は次の通りです。
|
1 2 3 4 5 6 7 8 9 |
let fruits = { 'apple' : '', 'banana': '', 'cherry': '' } fruits.apple = 'リンゴ'; fruits.banana = 'バナナ'; fruits.cherry = 'チェリー'; |
値にアクセスして新たな値を代入すればいいだけです。
また値を代入するなら添え字形式で [] を使っても同じことができます。
そのコード例が次の通り
|
1 2 3 4 5 6 7 8 9 |
let fruits = { 'apple' : '', 'banana': '', 'cherry': '' } fruits['apple'] = 'リンゴ'; fruits['banana'] = 'バナナ'; fruits['cherry'] = 'チェリー'; |
ちなみに連想配列には存在しないキーに対して値を代入することも可能です。
例えば次のそのコード例
|
1 2 3 4 5 6 7 8 9 10 11 |
let fruits = { 'apple' : 'リンゴ', 'banana': 'バナナ', 'cherry': 'チェリー' } fruits['orange'] = 'オレンジ'; /** または */ fruits.orange = 'オレンジ'; console.log(fruits); |
上のコード例なら 'orange' というキーが連想配列内に新たに作られます。
つまりこのコードなら fruits という変数の中身は次のようになるということです。
|
1 2 3 4 5 6 |
{ apple: 'リンゴ', banana: 'バナナ', cherry: 'チェリー', orange: 'オレンジ' } |
このように連想配列にはいくらでも新しいキーや値が追加可能です。
連想配列を使う時の注意点
JavaScriptで連想配列を扱うときに特に注意しなくてはいけないこと・・・
それは連想配列のキー名に変数は使えない、ということです。
どういうことか例を使って説明しましょう。
例えば次のように本の情報を連想配列で定義して表示するコードを考えてみてください。
|
1 2 3 4 5 6 7 8 9 10 11 |
let titleKey = 'title'; let authorKey = 'author'; let priceKey = 'price'; let book = { titleKey : '走れメロス', authorKey: '太宰治', priceKey : '432yen' } console.log(book); |
キー名の所は titleKey や authorKey のような変数名になっています。
さて、このコードはコンソールにどのような表示をするでしょうか？
正解は次のような表示になります。
|
1 2 3 4 5 |
{ titleKey: '走れメロス', authorKey: '太宰治', priceKey: '432yen' } |
変数名がそのまま表示されてしまっています・・・
つまり連想配列のキー名には変数は使うことができないということです。
このキー名に変数が使えないのがJavaScriptの連想配列で引っかかりやすい罠ですね。
ただしこれは古いJavaScriptでの話です。
最新のES2015以降では次のように [] でキー名をくくれば変数もOKになりました。
|
1 2 3 4 5 |
let book = { [titleKey]: '走れメロス', [authorKey]: '太宰治', [priceKey]: '￥432' } |
ただこれは当然ながら古いJavaScriptでは動作しないコードになります。
各ブラウザでES2015の構文が対応しているかどうかは次のサイトで確認可能です。
ちなみにChromeやFireFox、サファリなどの主要ブラウザではほとんどES2015に対応しているのでそれほど気にしなくてはいいかもしれません。
なので [] で変数をキー名に使う方法も古いブラウザでの対応が不要なら問題ないでしょう。
ここまでのまとめ
ここまでのことを最後に簡単にまとめます。
まず連想配列について基本的で大事なことは次の２つ
- キーと値のペアを持つデータのこと
キー名: 値 のような形式でデータが定義されている
- 連想配列を作るときは {} を代入
変数を連想配列として扱うなら var mixed = {}; のように初期化が必要
そして連想配列の値へのアクセス方法は次の２通り
- ドット(.)演算子を使う方法
fruist.apple や fruits.banana のような形式でアクセス
- 添え字を使う方法
fruist['apple'] や fruits['banana'] のような形式でアクセス
ただしキー名はクォートで囲む必要があることに注意
ということで連想配列の作り方や使い方についてまとめてみました。
よく使うデータ構造なので使い方についてはマスターしておきたいですね。
ではでは($・・)/~~~
