forEachを使ってみる。
ループを書く時によく使うので、覚えておいた方が良いでしょう。
当記事では、最初にtypescriptで書いた場合について記載しており、javascriptでの書き方は後述しています。
typescriptで書いてみる
基本的な書き方
array1の配列をループしてみる
その結果をconsole.logで表示。
const array1: number[] = [1, 2, 3, 4, 5];
array1.forEach(value => console.log('配列の数ループ'));
上記コードを実行した結果は以下のようになります。
配列の数ループ 配列の数ループ 配列の数ループ 配列の数ループ 配列の数ループ
配列の数である5回ループできました。
関数で記載したい時
アロー関数を使えば、関数として記載できるので自由に処理を書くことができます。
const array1: number[] = [1, 2, 3, 4, 5];
array1.forEach(value => {
console.log('配列の数ループ');
});
上記コードを実行した結果は以下のようになります。
配列の数ループ 配列の数ループ 配列の数ループ 配列の数ループ 配列の数ループ
行連番を処理で使いたい場合
条件の処理の中で行連番を使いたい場合というのは結構ありますよね。
そういう時は第二引数を取得して使用できます。
const array1: number[] = [1, 2, 3, 4, 5];
array1.forEach((value, index) => {
console.log('index:', index);
});
上記コードを実行した結果は以下のようになります。
index: 0 index: 1 index: 2 index: 3 index: 4
行連番を取得して処理したい場合に活用します。
もう少し丁寧に書いてみます。
const array1: number[] = [1, 2, 3, 4, 5];
array1.forEach((value: number, index: number) => {
console.log('index:', index, ', value:', value);
});
上記コードを実行した結果は以下のようになります。
index: 0 , value: 1 index: 1 , value: 2 index: 2 , value: 3 index: 3 , value: 4 index: 4 , value: 5
javascriptの場合
同じような書き方ではあるのでtypescriptの書き方がわかれば、問題なく書くことができると思いますが、
念の為javascriptバージョンも載せておきます。
基本的な書き方
const array1: number[] = [1, 2, 3, 4, 5];
array1.forEach(function (value) { return console.log('配列の数ループ'); });
上記コードを実行した結果は以下のようになります。
配列の数ループ 配列の数ループ 配列の数ループ 配列の数ループ 配列の数ループ
関数で記載したい時
const array1: number[] = [1, 2, 3, 4, 5];
array1.forEach(function (value) {
console.log('配列の数ループ');
});
上記コードを実行した結果は以下のようになります。
配列の数ループ 配列の数ループ 配列の数ループ 配列の数ループ 配列の数ループ
行連番を処理で使いたい場合
var array1 = [1, 2, 3, 4, 5];
array1.forEach(function (value, index) {
console.log('index:', index);
});
上記コードを実行した結果は以下のようになります。
index: 0 index: 1 index: 2 index: 3 index: 4
もう少し丁寧に書いてみます。
var array1 = [1, 2, 3, 4, 5];
array1.forEach(function (value, index) {
console.log('index:', index, ', value:', value);
});
上記コードを実行した結果は以下のようになります。
index: 0 , value: 1 index: 1 , value: 2 index: 2 , value: 3 index: 3 , value: 4 index: 4 , value: 5
まとめ
forEachは非常によく使用します。
使用頻度は決して低くないので、基本はおさえておきましょう
