JavaScript 配列で関数を使用(forEach/map/filter/reduce)

JavaScriptの配列で関数を使用するサンプルです。

確認環境
・Google Chrome

Arrayオブジェクト
配列を関数に渡して１回ずつ実行する(forEachメソッド)
配列の各値を関数で実行＋新しい配列を作成(mapメソッド)
配列の各値を関数で実行＋新しい配列を作成＋絞る(filterメソッド)
配列の各値を関数で実行＋新しい配列を作成＋単一の値にする(reduceメソッド)

Arrayオブジェクト

Arrayオブジェクトは配列を扱うためのオブジェクトです。
以下のサンプルは、Arrayオブジェクトのメソッドです。
以下はMDNのArrayオブジェクトのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

配列を関数に渡して１回ずつ実行する(forEachメソッド)

配列.forEach(function callback(currentValue [, index [, array]]) {
//繰り返される箇所
}[, thisArg]);

配列を関数に渡して１回ずつ実行するサンプルです。

<script>

const a = ["A","B","C"];

a.forEach(function(b){
	console.log(b + "です"); //Aです Bです Cです
});

</script>

5行目は、配列の値の数分、function(b)を実行します。
bには、配列の各値(A,B,C)が順番にはいります。
6行目は、console.logが3回実行されます。
breakは使用できません。

配列の各値を関数で実行＋新しい配列を作成(mapメソッド)

var 変数 = 配列.map(function callback(currentValue[, index[, array]]) {
// 処理
}[, thisArg])

配列の各値を関数で実行+新しい配列を作成するサンプルです。

<script>

const a = ["A","B","C"];

const c = a.map(function(b){
	return b + "です";
});

console.log(c); //(3) ["Aです", "Bです", "Cです"]

console.log(a); //(3) ["A", "B", "C"]

</script>

5行目は、配列の値の数分、function(b)を実行します。bに各値が入ります。
bには、配列の各値(A,B,C)が順番にはいります。
6行目は、3回実行されます。
9行目は、新規で作成された配列のcです。
11行目は、元の配列です。値は変更されていません。

配列の各値を関数で実行＋新しい配列を作成＋絞る(filterメソッド)

var 変数 = 配列.filter(callback(element[, index[, array]]){
// 処理
}[, thisArg])

配列の各値を関数で実行＋新しい配列を作成＋絞るサンプルです。

<script>

const a = [1,5,9];

const c = a.filter(function(b){
	return b > 6;
});

console.log(c); //[9]

console.log(a); //(3) [1, 5, 9]

</script>

5行目は、配列の値の数分、function(b)を実行します。bに各値が入ります。
bには、配列の各値(A,B,C)が順番にはいります。
6行目は、条件にあったものが実行されます。
9行目は、新規で作成された配列のcです。
11行目は、元の配列です。値は変更されていません

配列の各値を関数で実行＋新しい配列を作成＋単一の値にする(reduceメソッド)

配列.reduce(callback[, initialValue])

配列の各値を関数で実行＋新しい配列を作成＋単一の値にするサンプルです。
配列の各値を合計するときなどに使用します。

<script>

const a = [1,5,9,3];

const c = a.reduce(function(b,c){
	return b + c;
});

console.log(c); //18

console.log(a); //(3) [1,5,9,3]

</script>

5行目の引数は、以下のように実行されます。
1回目は、引数のbには1つめの配列の値、cには2つめの配列の値がはいります。→戻り値は6
2回目は、引数のbには1回めの戻り値、cには3つめの配列の値がはいります。→戻り値は15
3回目は、引数のbには2回めの戻り値、cには4つめの配列の値がはいります。→戻り値は18

9行目は、新規で作成された配列のcです。
11行目は、元の配列です。値は変更されていません