forEachメソッド
配列の便利メソッドのうちの一つであるforEachメソッドについて学んでいきます。
配列操作に特化したループ処理。
コールバック関数を受け取り、配列の要素ごとに関数が呼ばれていきます。
サンプルを見てみましょう。
let numbers = [1, 2, 3, 4, 5];
//渡された値を出力するprint関数を作成
function print(element) {
console.log(element);
}
print(numbers[0]);
print(numbers[1]);
インデックスを用いて出力することが可能です。
numberという配列に対して「forEachメソッド」があるのでそれを使用して見ます。
let numbers = [1, 2, 3, 4, 5];
function print(element) {
console.log(element);
}
numbers.forEach(print);
// 1
// 2
// 3
// 4
// 5
配列に含まれる要素の値である数字を順に取り出し forEach メソッドの引数に記述したコールバック関数を呼び出していることがわかります。
上記の書き方もできますが、主流な書き方があります。
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function (element) {
console.log(element);
});
// 1
// 2
// 3
// 4
// 5
print関数をforEachの中に記述して使用することができます。
また関数名であるprintも省略されることがほとんどです。
for~ofでループ処理することも可能です。
const numbers = [1, 2, 3, 4, 5]
for (let elem of numbers) {
console.log(elem);
}
// 1
// 2
// 3
// 4
// 5
ただ、for~ofは最近の構文になります。それまではforEachがよく使用されていたので紹介しておきます。
もう一つサンプルを書いてみます。
const movies = [
{
title: 'Amadeus',
score: 99
},
{
title: 'Stand By Me',
score: 85
},
{
title: 'Parasite',
score: 95
},
{
score: 90
}
];
上記の映画の配列があり、評価が入っているものとします（あくまでサンプルです）
これを
// Amadeus - 99/100
のようにタイトルと評価を出力したかったとします。
movies.forEach(function (movie) {
console.log(`${movie.title} - ${movie.score}/100`);
});
このように記述できます。
少し砕いて記述し直すと、
const f = function (movie) {
console.log(`${movie.title} - ${movie.score}/100`);
}
movies.forEach(f);
forEachメソッドは要素を一つ一つ呼んでくれているイメージになります。
for~ofのほうがわかりやすい、配列以外でも列挙可能なオブジェクトに対して有効なのでよく使われることが多いで。しかし今回はforEachメソッドについても理解しておくことが大事なので学習しました。
