JavaScriptで連想配列に対してforEachループを使う方法

JavaScriptのforEachは配列の要素をループ内で取得できる便利な関数です。

ただforEachを連想配列で使おうとするには少しだけ工夫が必要です。

という訳で連想配列でもforEachループを使う方法について紹介

forEachは連想配列では使えない

まず初めに分かっておかなければいけないこと・・・

それは連想配列ではそもそもforEachなんて関数は用意されてない、ということです。

 

例えば次のようなカラーコードと色名が対応する連想配列を作ったとしましょう。

 

それでこれを配列と同じような感覚でforEachループで回そうとしたとします。

このようなコードを書くとコンソールに次のようなエラーが出て怒られてしまいます。

上コードで  colors  から呼び出されている  forEach  は関数ではないというエラーが出てますね。

 

そもそも  forEach  はfor文やwhile文などの組み込みされた構文と違い、ただの関数です。

なのでArray型の配列では用意されていますが、連想配列はObject型なので使えないという訳です。

連想配列でforEachを使うには?

じゃあforEachをどうすれば連想配列でも使えるようになるのか?

という話ですが普通の方法では無理なので工夫します。

 

その工夫というのが連想配列のキー配列から  forEach  を呼び出すこと

連想配列のキーを配列として取得するには次のようにObject.keys関数が使えます。

keys関数には連想配列を渡せばOKです。

なのでこれをうまく使うことで連想配列に対してforEachループが使えるようになります。

こうすればキー名を  key  から、キーの値は  colors[key]  のようにして取得可能

 

ただ上の例だとキー値を取得するのにいちいち  colors[key]  などと書かないといけません。

それが面倒ならforEachの最後の引数で連想配列をthisオブジェクトとして渡すことも可能です。

例えば次はthisオブジェクトに連想配列を渡しているコード例

こうすることでforEach内でthisオブジェクトが  colors  という連想配列に置き換わります。

なので  colors[key]  というまどろっこしい書き方をせずとも  this[key]  で値が取得可能になる訳です。

ここまでのまとめ

ということで簡単にここまでのまとめ

  • 連想配列にforEachは使えない
    なぜなら  forEach  はObject型の連想配列には用意されていないから
  • 連想配列のキー配列からforEachが呼び出し可能
    キー配列はObject.keys関数から取得可能
    またforEachの最後の引数でthisオブジェクトも指定可

連想配列からは直接forEachは呼び出せないので少し工夫が必要です。

 

以上連想配列でforEachループを使う方法でした。

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

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

コメントを残す

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

CAPTCHA


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