javascriptでの連想配列の作り方や操作方法まとめ

JavaScriptで配列に加えてよく使うデータ構造が連想配列と呼ばれるものです。

ただ配列と比べると少し複雑なので扱いが難しく感じることもあるかもしれません。

ということで自分の記憶を整理も兼ねて連想配列の作り方や扱い方についてまとめます。

連想配列とは?作り方の基本

連想配列とは次のように  {}  で囲まれていてキーと値がペアになったデータのことです。

上の例なら  'red'  というキーに対して '赤' という値、 'green'  というキーに対して  '緑'  、 'blue'  というキーに対しては  '青'  という値が対応しています。

 

また連想配列は次のように内部にさらに配列連想配列を持つことも可能です。

 

実際にコード中で宣言するには変数に  {}  または連想配列を代入するだけです。

これで変数から連想配列を扱うことができます。

連想配列の扱い方

連想配列を作ったら当然値を代入したり、値にアクセスする方法も知らないと使えません。

ということで次は連想配列の扱い方についてまとめます。

連想配列の値にアクセスする

まずは連想配列のキーに対応する値にアクセスする方法です。

そのやり方は次の2通り

 

まず1つめはドット(.)演算子を使って値アクセスするやり方です。

例えば次のように連想配列の後に  .キー名  とすれば値が取得可能

fruits.apple  とか  fruits.banana  のようにすればそのキーに対応する値になります。

 

そして2つめの方法は  []  を使って配列の添え字のようにアクセスする方法です。

例えば次が  []  を使ってキーに対応する値にアクセスしているコード例

fruits['apple'] とか  fruits['banana']  とかのように [] のなかにキー名を書くことでアクセスできます。

ただし注意点として次のようにそのままキー名を指定することはできないので注意してください。

必ずキー名はダブルクォート( " )またはシングルクォート( ' )で囲むようにしましょう。

以上が連想配列の値にキーからアクセスする方法です。

連想配列に値を代入する方法

次は連想配列に値を代入する方法です。

代入に関しては先ほど紹介した2つのアクセス方法が使えます。

そのやり方は次の通り

 

まずは1つめはドット(.)演算子を使ってあるキーに対応する値を代入する方法

そのコード例は次の通りです。

値にアクセスして新たな値を代入すればいいだけです。

 

また値を代入するなら添え字形式で  []  を使っても同じことができます。

そのコード例が次の通り

 

ちなみに連想配列には存在しないキーに対して値を代入することも可能です。

例えば次のそのコード例

上のコード例なら  'orange'  というキーが連想配列内に新たに作られます。

つまりこのコードなら fruits という変数の中身は次のようになるということです。

このように連想配列にはいくらでも新しいキーや値が追加可能です。

連想配列を使う時の注意点

JavaScriptで連想配列を扱うときに特に注意しなくてはいけないこと・・・

それは連想配列のキー名に変数は使えない、ということです。

どういうことか例を使って説明しましょう。

 

例えば次のように本の情報を連想配列で定義して表示するコードを考えてみてください。

キー名の所は  titleKey  や  authorKey  のような変数名になっています。

さて、このコードはコンソールにどのような表示をするでしょうか?

 

正解は次のような表示になります。

変数名がそのまま表示されてしまっています・・・

つまり連想配列のキー名には変数は使うことができないということです。

このキー名に変数が使えないのがJavaScriptの連想配列で引っかかりやすい罠ですね。

 

ただしこれは古いJavaScriptでの話です。

最新のES2015以降では次のように  []  でキー名をくくれば変数もOKになりました。

ただこれは当然ながら古いJavaScriptでは動作しないコードになります。

 

各ブラウザでES2015の構文が対応しているかどうかは次のサイトで確認可能です。

ちなみにChromeやFireFox、サファリなどの主要ブラウザではほとんどES2015に対応しているのでそれほど気にしなくてはいいかもしれません。

なので  []  で変数をキー名に使う方法も古いブラウザでの対応が不要なら問題ないでしょう。

ここまでのまとめ

ここまでのことを最後に簡単にまとめます。

 

まず連想配列について基本的で大事なことは次の2つ

  • キーと値のペアを持つデータのこと
    キー名:   のような形式でデータが定義されている
  • 連想配列を作るときは {} を代入
    変数を連想配列として扱うなら  var mixed = {};  のように初期化が必要

 

そして連想配列の値へのアクセス方法は次の2通り

  • ドット(.)演算子を使う方法
    fruist.apple  や  fruits.banana  のような形式でアクセス
  • 添え字を使う方法
    fruist['apple']  や  fruits['banana']  のような形式でアクセス

    ただし
    キー名はクォートで囲む必要があることに注意

 

ということで連想配列の作り方や使い方についてまとめてみました。

よく使うデータ構造なので使い方についてはマスターしておきたいですね。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください