JavaScriptのforEachは配列の要素をループ内で取得できる便利な関数です。
ただforEachを連想配列で使おうとするには少しだけ工夫が必要です。
という訳で連想配列でもforEachループを使う方法について紹介
forEachは連想配列では使えない
まず初めに分かっておかなければいけないこと・・・
それは連想配列ではそもそもforEachなんて関数は用意されてない、ということです。
例えば次のようなカラーコードと色名が対応する連想配列を作ったとしましょう。
|
1 2 3 4 5 |
var colors = { 'red': '赤', 'green': '緑', 'blue': '青' }; |
それでこれを配列と同じような感覚でforEachループで回そうとしたとします。
|
1 2 3 4 |
colors.forEach(function(key){ console.log('key = ' + key); console.log('value = ' + colors[key]); }); |
このようなコードを書くとコンソールに次のようなエラーが出て怒られてしまいます。
|
1 2 3 |
colors.forEach(function(key){ ^ TypeError: colors.forEach is not a function |
上コードで colors から呼び出されている forEach は関数ではないというエラーが出てますね。
そもそも forEach はfor文やwhile文などの組み込みされた構文と違い、ただの関数です。
なのでArray型の配列では用意されていますが、連想配列はObject型なので使えないという訳です。
連想配列でforEachを使うには？
じゃあforEachをどうすれば連想配列でも使えるようになるのか？
という話ですが普通の方法では無理なので工夫します。
その工夫というのが連想配列のキー配列から forEach を呼び出すこと
連想配列のキーを配列として取得するには次のようにObject.keys関数が使えます。
|
1 |
var keys = Object.keys(object); |
keys関数には連想配列を渡せばOKです。
なのでこれをうまく使うことで連想配列に対してforEachループが使えるようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** カラーコードと色名が対応する連想配列 */ var colors = { 'red': '赤', 'green': '緑', 'blue': '青' }; /** 連想配列のキー配列に対してforEachを回す */ Object.keys(colors).forEach(function(key){ console.log('key = ' + key); console.log('value = ' + colors[key]); }); |
こうすればキー名を key から、キーの値は colors[key] のようにして取得可能
ただ上の例だとキー値を取得するのにいちいち colors[key] などと書かないといけません。
それが面倒ならforEachの最後の引数で連想配列をthisオブジェクトとして渡すことも可能です。
例えば次はthisオブジェクトに連想配列を渡しているコード例
|
1 2 3 4 |
Object.keys(colors).forEach(function(key){ console.log('key = ' + key); console.log('value = ' + this[key]); }, colors); |
こうすることでforEach内でthisオブジェクトが colors という連想配列に置き換わります。
なので colors[key] というまどろっこしい書き方をせずとも this[key] で値が取得可能になる訳です。
ここまでのまとめ
ということで簡単にここまでのまとめ
- 連想配列にforEachは使えない
なぜなら forEach はObject型の連想配列には用意されていないから
- 連想配列のキー配列からforEachが呼び出し可能
キー配列はObject.keys関数から取得可能
またforEachの最後の引数でthisオブジェクトも指定可
連想配列からは直接forEachは呼び出せないので少し工夫が必要です。
以上連想配列でforEachループを使う方法でした。
ではでは($・・)/~~~
