【JavaScript】連想配列・配列を順に処理するには？（for...in・for...of）
takahide
初心者がITを楽しむブログ
【JavaScript】forEachで配列の繰り返しをしよう
takahide
おはようございます。タカヒデです。
本日は、「JavaScriptにおける、『配列の繰り返し処理』について、『forEachメソッド』」を紹介します。
こんな人にオススメ
- JavaScriptにおける『配列の繰り返し処理』が理解できない
- 『forEachメソッド』の記載方法を知りたい
- 『forEachメソッド』と『for文/for…of文』との違いを知りたい
ぜひ本記事を参考にしてください。
Contents
「配列の繰り返し処理」ってどんな時に使う？
ではさっそく、「配列の繰り返し処理」の解説に移っていきたいのですが、そもそもどのようなときに使うものなのでしょうか？
調べてみましたが、こんな時に使うようです。
- ECサイト
- 商品データをデータ配列から取り出して画面に表示するとき
- SNSや掲示板
- 投稿されたデータを配列から取り出して画面に表示するとき
案外、身近なもので使っているんですね。
となればこの使い方を理解しておいても損はなさそうですね。
配列の繰り返し処理の使い方（forEachメソッド）
続けて、実際の使い方を見ていきます。
配列の繰り返し処理には『forEachメソッド』を使用します。
記載方法は以下の通りです。
配列の値を順に取り出し実行します。
//記載方法
実行する配列.forEach(function(要素の値,インデックス番号,配列){
関数の処理
})ん？どういうこと？インデックス番号って？
となっているかもしれませんので、記載例も見ていきます。
以下が記載例です。
let data = ["dog", "cat", "rabbit"];
data.forEach(function (value, index, array) {
console.log(value);
})
//実行結果：dog,cat,rabbit配列dataの中身「dog,cat,rabbit」が順に実行できていることが分かりますね。
引数の名前は自由に設定でき、記載を省略することも可能です。
例えばこんな感じ。
data.forEach(function (value) {
console.log(value);
});
//実行結果：dog,cat,rabbit「index」と「array」は省略して、「value」のみでも実行できています。
forEachメソッドの引数を見てみる
もう少し詳しく「forEachメソッド」を見ていきましょう。
「forEachメソッド」のコールバック関数には「value」「index」「array」の3つの引数があります。
それぞれの引数をconsole.logで出力した場合にどのような結果になるのかを見ていきます。
①value：要素の値
「value」を実行するとこんな感じ。
let data = ["dog", "cat", "rabbit"];
data.forEach(function (value, index, array) {
console.log(value);
})
//実行結果：dog,cat,rabbitこれは先ほどの例と同じですね。
配列の要素の値をそれぞれ実行しています。
②index：インデックス番号
「index」を実行するとこんな感じ。
let data = ["dog", "cat", "rabbit"];
data.forEach(function (value, index, array) {
console.log(index);
})
//実行結果：0,1,2配列のインデックス番号をそれぞれ実行していることがわかります。
③array：配列
最期に「array」を実行するとこんな感じ。
let data = ["dog", "cat", "rabbit"];
data.forEach(function (value, index, array) {
console.log(array);
})
//実行結果：
//(3) ['dog', 'cat', 'rabbit']
//(3) ['dog', 'cat', 'rabbit']
//(3) ['dog', 'cat', 'rabbit']配列そのものを実行していることが分かります。
「forEach文」とfor文/for…of文との比較
この「forEach文」ですが、繰り返し処理と言われると、『for文』『for…of文』を思い浮かべませんか？
『for文』『for…of文』いずれも配列の繰り返し処理は可能です。
これらと何が違うのでしょうか？
それぞれの違いを以下の表に記載します。
| for | for…of | forEach | |
|---|---|---|---|
| 配列の繰り返し処理 | ○ | ○ | ○ |
| 記載例 | for(i=0;i<data.length;i++){ console.log(data[i]); } //実行結果：dog,cat,rabbit | for(let test of data){ console.log(test); } //実行結果：dog,cat,rabbit | data.forEach(function(value){ console.log(value); }) //実行結果：dog,cat,rabbit |
| 存在しない要素がある場合の実行結果 （例）[‘dog’,,’rabbit’]; | //dog //undefined //rabbit | //dog //undefined //rabbit | //dog //rabbit |
| break文による繰り返しの終了可否 | ○ | ○ | × |
このように、
- 存在しない要素がある場合の実行結果
- break文による繰り返しの終了可否
において実行結果が異なるようです。
必要な状況に応じて使い分けるようにしてください。
まとめ
以上が「JavaScriptにおける、『配列の繰り返し処理』について、『forEachメソッド』」でした。
まとめ
- 配列の繰り返し処理には『forEachメソッド』を使用
- forEachメソッドのコールバック関数には「value」「index」「array」の3つの引数がある
- 『for文』『for…of文』との違いには「存在しない要素がある場合」と「break文実行時」に違いがある
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
