LoginSignup
0
0

More than 1 year has passed since last update.

【Javascript】forEach関数について-学習ノート1

Posted at

初めに

javascriptのforEach()関数について学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

前回の記事:https://qiita.com/redrabbit1104/items/c3501e087f54facc52fe

forEach()関数

関数を引数にする関数(高階関数)の一つ。配列の要素を一つひとつに対して関数の中で記述した特定の処理を行うことができる。

for of文と比較しながら使ってみる

forEach()関数を使ってchangesという配列の各要素の値を2倍にしコンソールに表示してみます。

const changes = [100, 400, -300, 120, -50, -330, 1400, 500];

changes.forEach(function (change) {
  console.log(change * 2);
});

配列の各要素の値が2倍になって出力されました。
スクリーンショット 2021-06-21 7.24.59.png

これはfor of文を使えば同じような結果が得られます。

for (const change of changes) {
  console.log(change * 2);
}

for ofではentries()メソッドを使って、配列の要素をindexとvalueで分けて処理することができます。

for (const [i, change] of changes.entries()) {
  console.log(`${i} : ${change * 2}`);
}

スクリーンショット 2021-06-21 7.32.10.png

forEach()関数を使う場合、for of文と同じ処理ができますが引数の順番が「value, index, array」になるので要注意です。また、第3引数にarray(配列)を取ることができます。

changes.forEach(function (change, index, array) {
  console.log(`${array} // ${index} : ${change * 2}`);
});

スクリーンショット 2021-06-21 7.40.57.png

for of文とforEach()関数の違いは色々ありますが、for ofの場合break,continue,returnの3種類の制御文が使えるのに対し、forEach()では使えないところです。

for (const change of changes) {
  if (change > 0) {
    console.log(change * 2);
  } else {console.log('終了');
  break;}
};

スクリーンショット 2021-06-21 7.50.01.png
同じような処理をforEach()関数でやろうとすると、

changes.forEach(function (change) {
  if (change > 0) {
    console.log(change * 2);
  } else {console.log('終了');
  break;}
});

構文エラーが出てしまいます。forEach()関数は最初から最後まで途切れずに処理を行われるようになっていますので、途中で処理を制御したい場合にはfor of文を使うべきです。
スクリーンショット 2021-06-21 7.51.36.png

参考サイト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
http://var.blog.jp/archives/74672042.html

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0