こんにちはtakosanです。
forEachの理解って最初は難しいですよね。
ぼくも理解できない頃は泣きそうになってました。
今回はそんなforEachを丁寧にサンプルを交えて解説しようと思います。
forEachの使い方
forEachってそもそも何?という話ですが、
forEachメソッドは、配列データに対して一気にループ処理を行うためのものです。
と、言われても良く分からないと思うので、サンプルを見ながらやっていきましょう!
サンプル
ここにとあるTodoリストがあるとします。
あなたはその中の要素を全て取得してconsole.log()で内容を表示したい、とします。
forEachはこんな時に便利です。
codepenの中のコメントにも書いてありますが、ひとつずつ解説していきます。
まず下記の部分では、todosというidを持ったul要素の中のliをquerySelectorAll()で取得し、targetsという変数に入れています。
// todosのliを配列で取得
const targets = document.querySelectorAll('#todos li');
そして続きの下記の部分では、targetsとして取得した配列データのひとつひとつをtargetとして取り出していき、
console.log()の中でそのinnnerHTML、つまりli要素の中のテキストを表示する、と指定しているわけですね。
//配列targetsの要素を一つずつtargetとして処理する
targets.forEach((target)=>{
//target、つまりli要素のinnerHTML=中身のテキストを表示する
console.log(target.innerHTML);
})
for文でやってみる
ループならfor文でもできるんじゃじゃないの?
おっしゃる通りです。
一応for文バージョンも書いてみましょう。
HTMLは同じものとして、JSを下記のようにしてみましょう。
const targets = document.querySelectorAll('#todos li');
for(let i = 0; i<targets.length; i++){
console.log(targets[i].innerHTML);
}
上記はたぶん見たことあるfor文を使ったパターンでの書き方です。
ループの上限回数をtargetsの長さ(配列の個数)=targets.lengthとして指定することで、
forEachと同じく配列のデータの個数分だけループを回しています。
ただ少し書く量が多いので、慣れてくるとforEachの方が便利になってくるでしょう。
さいごに
forEachのことなんとなくわかったでしょうか?ぼくも昔は理解できず苦労しました。
ただ分かってしまえば簡単なものだし、使えるようになると結構便利です。
なんとなく雰囲気からつかんでいき、サクっと学んでいきましょう!
ではよいWebライフを~