![見出し画像](https://assets.st-note.com/production/uploads/images/137675498/rectangle_large_type_2_f802964afd7d69ea5360e15a4f4435a8.png?width=1200)
【JavaScript】「for」と「forEach」の違い
※notionと同じ内容です
1. 「for」と「forEach」の違い
1-1 ■forEachは配列のみ
forEachが繰り返せるのは配列のみ
1-2 ■forEachは配列の持っている要素の数だけ繰り返す
無限ループエラーになりにくいメリット
1-3 ■forEachはコード記述が効率的
forのように繰り返し条件を書く必要が無い
2. 基本構文
![](https://assets.st-note.com/img/1713411128850-4orYRmXhZh.png?width=1200)
3. コード例
/*-------------------------------------------
画像にマウスオーバーした時のイベント
-------------------------------------------*/
// 1. メインの画像要素を取得します
const mainImage = document.querySelector('.gallery-image img');
// 2. サムネイルの画像要素を取得します
const thumbImages = document.querySelectorAll('.gallery-thumbnails img');
// 3. サムネイルの画像要素のそれぞれに対して、マウスオーバーイベントを追加します
thumbImages.forEach((thumbImage) => {
thumbImage.addEventListener('mouseover', (event) => {
// 4. マウスオーバーされたサムネイルの画像のソースをメインの画像に設定します
mainImage.src = event.target.src;
// 5. コンソールにサムネイルの画像のソースを出力します
console.log(thumbImage.src);
// 6. メインの画像をフェードインするアニメーションを500ミリ秒で実行します
mainImage.animate({opacity: [0, 1]}, 500);
});
});
3-1 コード解説
複数あるthumbImages という画像をマウスオーバーすると
mainImage という大きな画像にマウスオーバーした画像が反映する
メインの画像要素とサムネイルの画像要素をJavaScriptで取得します。
サムネイルの画像要素にマウスオーバーイベントを追加するために forEach メソッドを使用します。
サムネイルの画像要素がマウスオーバーされた時に実行される関数を定義します。
マウスオーバーされたサムネイルの画像のソースをメインの画像のソースに設定します。
コンソールにサムネイルの画像のソースを出力します(デバッグ用)。
メインの画像をフェードインするアニメーションを実行します。
この記事が気に入ったらサポートをしてみませんか?