配列で欠かせないのがforEachです。他のプログラミングと違ってJavaScriptのforEachは少し使い方が違います、そもそも構文ではなくforEach()←メソッドになっています。そしてややこしいのがコールバック関数を使うところです。ただしココは初心者向けですのでコールバック関数に関しては鵜呑みでも大丈夫なようにしてあります。ご心配なく。
forEach()の書き方
forEach()の書き方です。いきなりでてきましたね、コールバック関数
| 配列名.forEach( コールバック関数(要素の値) ) |
頭を抱え込む前にサンプルを見てください。
//配列を作成
let ekimei = ["東京", "新橋", "品川", "川崎", "横浜"];
ekimei.forEach(function (itm) {
console.log(itm);
});| 実行結果 東京 新橋 品川 川崎 横浜 |
サンプルは下のように書くこともできます。
| let 変数名 = [要素1, 要素2, 要素3, ・・・]; 変数名.forEach(function (要素の値) { console.log(要素の値); }); |
上記を構文として覚えておけば簡単です。「コールバック関数なんて出すな」って話ですけど…
最後のセミコロンは忘れずにね。
for文と比較してみる
上記のサンプルをfor文で書くと次のようになります。
//配列を作成
let ekimei = ["東京", "新橋", "品川", "川崎", "横浜"];
for (let i = 0; i < ekimei.length; i++) {
console.log(ekimei[i]);
}こっちのほうがシンプルにみえるかもしれませんね。ところがですよ、for文の場合インデックスの数だけぜ～んぶ調べるため途中に何か問題があってもお構いなしです。
次のサンプルは配列の要素の途中に空の部分を設けています。
//配列を作成
let ekimei = ["東京", "新橋", "品川", , , "川崎", "横浜"];
for (let i = 0; i < ekimei.length; i++) {
console.log(ekimei[i]);
}| 実行結果 東京 新橋 品川 undefined undefined 川崎 横浜 |
for文の場合は途中に空の部分があると何があってもただ繰り返すだけなので「undefined」のエラーが出てしまいます。
forEachの場合はこうなります。とりあえずサンプル
//配列を作成
let ekimei = ["東京", "新橋", "品川", , , "川崎", "横浜"];
ekimei.forEach(function(itm){
console.log(itm);
});| 実行結果 東京 新橋 品川 川崎 |
ちゃんと問題の箇所を正常に処理してくれてます。ありがとうforEach！
このようにforEachメソッドは配列に特化しているため非常に便利な仕様になっています。
forEachは繰り返し回数の概念がないためbreakや、繰り返し処理をスキップするcontinueを使うとシンタックスエラーになるから注意が必要です。
どうしても使いたい場合はforEachをやめてfor文にするか工夫をします。
さらに構文
forEachにはもう2個構文があります。
| 1. 配列名.forEach( コールバック関数(要素の値, 要素のインデックス) ) 2. 配列名.forEach( コールバック関数(要素の値, 要素のインデックス, 配列) ) |
1番目
要素とインデックスを取得しています。
//配列を作成
let ekimei = ["東京", "新橋", "品川", "川崎", "横浜", "戸塚"];
ekimei.forEach(function (itm, indnum) {
//要素とインデックスを取り出す
console.log(itm+ indnum);
});| 実行結果 東京0 新橋1 品川2 川崎3 横浜4 戸塚5 |
要素とそのインデックスを取得する場合は下記のように覚えておけばコールバック関数なんて知らなくても大丈夫ですよ。
| let 変数名 = [要素1, 要素2, 要素3, ・・・]; 変数名.forEach(function (要素の値 , インデックス) { 処理; }); |
if文を入れてみる。
//配列を作成
let ekimei = ["東京", "新橋", "品川", "川崎", "横浜", "戸塚"];
ekimei.forEach(function (itm, indnum) {
if (indnum == 1) {
document.write(itm);
}
});| 実行結果 新橋 |
2番目
配列ekimeiの後ろにすべて「駅」を足して上書きしました。配列の中を要素分だけ繰り返して処理をしてます。
//配列を作成
let ekimei = ["東京", "新橋", "品川"];
ekimei.forEach(function (itm, indnum, ar) {
ar[indnum] = itm + "駅";
});
console.log(ekimei[0] + ekimei[1] + ekimei[2]);| 実行結果 東京駅新橋駅品川駅 |
はい、これも簡単にするために下記のようにしますね。
| let 変数名 = [要素1, 要素2, 要素3, ・・・]; 変数名.forEach(function (要素の値 , インデックス,配列) { 処理; }); 処理; |
ここもif文を入れてみます。
//配列を作成
let ekimei = ["東京", "新橋", "品川"];
ekimei.forEach(function (itm, indnum, ar) {
if (indnum == 1) {
ar[indnum] = itm + "駅";
}
});
document.write(ekimei[0] + ekimei[1] + ekimei[2]);| 実行結果 東京新橋駅品川 |
こんなサンプルもあります。どこのサイトにもあるやつ
//配列を作成
let suuji = [1, 2, 3, 4, 5];
suuji.forEach(function (itm, indnum, ar) {
ar[indnum] = itm * 2
});
document.write(suuji);| 実行結果 2,4,6,8,10 |
配列の要素数だけ繰り返して要素を2倍してます。
はい。JavaScriptのforEachを列挙しました、今までと書き方が少し変なので慣れないうちは難しく感じるかもしれません。でも、慣れれば大丈夫です。forEachは配列操作ではめっちゃ重要なので使ってくださいね。
このページはこれでおしまいです。
お疲れ様でした！
前のページ INDEX 次のページ
コメント