JavaScriptのforEach: 配列を順に参照していく簡略された記法
- 作成日: 2020-08-11
- 更新日: 2023-12-28
- カテゴリ: JavaScript
JavaScriptのforEachの使い方
JavaScriptの配列には配列をループで回したい時に使えるメソッドforEachがあります。
今回はこのforEachメソッドについて具体的に解説します。
forEachは配列をループで回したい時に使えるメソッドです。
関連記事
プログラミングの種類とできることを解説します【Python, JavaScript】
【C言語】配列を0クリアで初期化する方法
Vueのwatchの革命的な使い方【JavaScript】
TypeScriptのArray（配列）の使い方
プログラミングの種類とできることを解説します【Python, JavaScript】
Vueのwatchの革命的な使い方【JavaScript】
forEachの基本
配列のメソッドforEachを呼び出すとき、その引数に関数を渡すと関数の引数に配列の要素が渡されます。
forEachは配列の先頭から順に要素を参照し、そのたびに関数を呼び出し引数に要素を渡します。
const ary = [1, 2, 3]
ary.forEach(el => {
console.log(el)
})
↑のコードの実行結果は↓のようになります。
1
2
3
↑の例ではアロー関数を渡していますが↓のように普通の関数も使えます。
ary.forEach(function (el) {
console.log(el)
})
↑のelというのが関数の引数です。
配列の要素がこの引数に順に渡されていきます。
普通のfor文と何が違うの？
単純に配列を順に参照したい場合は、forEachのほうが短く書けるのがメリットです。
普通のfor文と比べてみましょう。
const ary = [1, 2, 3]
for (let i = 0; i < ary.length; i++) {
console.log(ary[i])
}
ary.forEach(el => {
console.log(el)
})
forEachのほうがスッキリしてますね。
普通のfor文はカウント変数をカウントしていてインクリメント演算子などが露出しています。
しかしforEachのほうは単純に配列の要素だけが取り出されています。
添え字が必要ないケースではこのようにforEachを書くと処理を簡略化できます。
添え字の参照
forEach内で現在走査中の配列の添え字を参照したい場合は、関数の2番目の引数を参照します。
const ary = [1, 2, 3]
// ↓これ
ary.forEach((el, index) => {
console.log(index)
})
↑のコードの実行結果は↓のようになります。
0
1
2
indexには現在の要素の添え字が渡されます。
添え字を参照することで普通のfor文とそん色ない使い方も可能です。
関連記事
JavaScriptのfor文の書き方: 初期化、判定、更新、処理についてやinやofの使い方
配列自体の参照
forEach内で走査中の配列自体を参照したい場合は、関数の3番目の引数を参照します。
const ary = [1, 2, 3]
// ↓これ
ary.forEach((el, index, array) => {
console.log(array[index])
})
↑のコードの実行結果は↓のようになります。
1
2
3
↑のarrayはary自体になります。
配列を参照したい場合はこのように関数の第3引数を参照します。
抜けてる要素には何もしない
たとえば
[1, 2, , 4]
のような途中が欠落（未初期化）してる配列をforEachで走査した場合、forEachは欠落した（未初期化の）要素を参照しません。
const ary = [1, 2, , 4]
ary.forEach(el => {
console.log(el)
})
↑のコードの実行結果は↓のようになります。
1
2
4
欠落した要素がスキップされているのがわかります。
thisの参照先を変える
たとえばforEachに普通の関数を渡している時に、thisの参照先を変えたい場合があります。
旧来のように関数を使って疑似的なクラスを作るときを考えてみます。
配列の合計を計算するクラスを作ってみましょう。
function SumCounter () {
this.sum = 0
}
SumCounter.prototype.calc = function (ary) {
ary.forEach(function (el) {
this.sum += el
}, this)
// ↑ ここに注目
}
const sumCounter = new SumCounter()
sumCounter.calc([1, 2, 3])
console.log(sumCounter.sum) // 6
forEach内でthis.sumにアクセスしています。
このthisの参照先を明示的に変更したい場合は、↑のようにforEachの2番目の引数に参照先を渡します。
↑のコードで2番目の引数を省略した場合、出力される値は「0」になります。
ofを使って同様な処理は可能
最近のJavaScriptだとfor文にofを使えます。
ofを使うとforEachのようなfor文が書けます。
const ary = [1, 2, 3]
for (const el of ary) {
console.log(el)
}
最近のJavaScriptではforEachよりもこのofを使うケースの方が多いかもしれません。
もっとも機能的にはforEachのほうが沢山あるので用途に合わせて使う必要もあります。
関連記事
JavaScriptのfor文の書き方: 初期化、判定、更新、処理についてやinやofの使い方
問題
Q1: forEachの第1引数に渡せるものは何か答えよ。
- 配列
- 関数
- 整数
Q2: forEachのコールバック関数の第2引数の役割を答えよ
- 要素の参照
- 配列の参照
- 添え字の参照
Q3: forEachのメリットとして正しいものを答えよ
- 普通のfor文と比べて詳細に書ける
- 普通のfor文と比べて単純に書ける場合がある
- 普通のfor文と比べて添え字が参照しやすい
正解
Q1: 2
Q2: 3
Q3: 2