JavaScriptで配列の各要素にループ処理を行う方法をまとめました。
- 配列に対するループ処理の記述、動作(for/for of/forEach/map/reduce/filter)
- forEachとmapの動作の違い
- reduceの活用例
ループ処理
for
まずは基本のfor文です。for(①初期化式; ②条件式; ③変化式){④処理} の書式で記載します。
①初期化式はループ開始時に１度だけ実行されます。
②条件式はループ毎に④処理を行う前に毎回判定し、不成立の場合forから抜けます。
③変化式は④処理実行後、次のループ前に毎回実行されます。
主に配列のindexを参照、使用したい場合に使用します。
let array = [1, 2, 3, 4];
for(let i = 0; i < array.length; i++){
console.log(array[i]*2);
}[結果]
2
4
6
8for of
for of文は配列の各要素を先頭から順番に直接取り出して処理を行います。for( 要素 of 配列){ 処理 } の書式で記述します。
let array = [1, 2, 3, 4];
for(let element of array){
console.log(element*2);
}[結果]
2
4
6
8
配列.forEach
forEachは配列(Array)オブジェクトに用意されているループ処理です。処理関数を渡すことで各要素を先頭から順番に処理関数に渡して処理を行います。配列.forEach(処理関数) の書式で記述します。
let array = [1, 2, 3, 4];
array.forEach(element => console.log(element*2));[結果]
2
4
6
8
また、forEachに指定する処理関数は第２、第３引数を持つことができます。第2引数は第1引数の要素のインデックス、第３引数は配列本体が渡されます。
let array = [1, 2, 3, 4];
array.forEach((element, i, ar) => console.log(element*2 + " " + i.toString() + " " + ar));[結果]
2 0 1,2,3,4
4 1 1,2,3,4
6 2 1,2,3,4
8 3 1,2,3,4引数 => 処理 はアロー関数という関数の記述方法です。詳細は以下の記事を参照してください。
配列.map
mapは配列(Array)オブジェクトに用意されているループ処理です。処理関数を渡すことで各要素を先頭から順番に処理関数に渡して処理を行い、結果を新しい配列として返します。
該当の配列の各要素に対して処理を行う点はforEachと同じですが、処理結果の配列が返却される点が異なります。配列.map(処理関数) の書式で記述します。
let array = [1, 2, 3, 4];
let maparray = array.map(element => {
console.log(element*2);
return element*2;
});
console.log("arrayの値:" + array);
console.log("maparrayの値:" + maparray);
[結果]
2
4
6
8
arrayの値:1,2,3,4
maparrayの値:2,4,6,8また、処理関数はforEachと同様に第２引数でインデックス、第３引数で配列本体を受け取ることができます。
ちなみにmap関数に渡す関数の第二引数には要素のインデックスが入ってきます。関数に第二引数を与えることでインデックスを使用することができます。
let array = [1, 2, 3, 4];
let maparray = array.map((element, index) => {
console.log(`${index + 1}の2倍は${element*2}です！`);
return element*2;
});
[結果]
1番目の要素の2倍は2です！
2番目の要素の2倍は4です！
3番目の要素の2倍は6です！
4番目の要素の2倍は8です！配列.reduce
reduceは配列(Array)オブジェクトに用意されているループ処理です。直前のループまでの結果を引き継ぎながら次のループ処理を行います。ループ毎の結果を蓄積して最終的な結果を生成したい場合に使うとよいでしょう。配列.reduce(処理関数) の書式で記述します。
let array = [1, 2, 3, 4];
// 配列の全要素の値を合算する処理
let result = array.reduce((prev, cur)=>{
console.log(`previous value:${prev}, currrent value:${cur}`);
return prev + cur;
});
// 処理結果がresultに入っているので出力する
console.log(`result = ${result}`);[結果]
previous value:1, current value:2
previous value:3, current value:3
previous value:6, current value:4
result = 10上記の例では、１回目のループのprevに配列の0番目要素(1)、curに1番目要素(2)が設定されてきています。この場合、curに対して処理を行うような関数の場合、最初の要素が処理されないため注意です。（今回は加算するだけなので偶々正しい結果になるだけ）
curに0番目要素(1)を設定するためには、reduce関数の第2引数に初期値を設定します。
let array = [1, 2, 3, 4];
// 配列の全要素の値を合算する処理
let result = array.reduce((prev, cur)=>{
console.log(`previous value:${prev}, currrent value:${cur}`);
return prev + cur;
}, 0); // ← 第二引数に初期値0を設定する
// 処理結果がresultに入っているので出力する
console.log(`result = ${result}`);[結果]
previous value:0, current value:1
previous value:1, current value:2
previous value:3, current value:3
previous value:6, current value:4
result = 10↑初期値が最初のprevになり、curに配列の先頭要素がくるようになった。これで全要素が正しく関数で実行されます。
reduce関数は配列のデータからHTMLを作成する場合などに使うと便利です。
例）配列の内容をそれぞれ<div>要素で囲ったHTML要素を作成したい場合：
let result = array.reduce((prev, cur) => {
return `${prev}\n<div>${cur}</div>`
}, "");
console.log(`result = ${result}`);[結果]
result =
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>配列.filter
filterは配列(Array)オブジェクトに用意されている抽出用のループ処理です。filter関数に渡した関数内で各要素について判定し、trueを返した要素だけ抽出した配列を返します。配列.reduce(処理関数) の書式で記述します。なお、判定時に各要素に対して引数で渡した関数が実行されます。
let array = [1, 2, 3, 4, 5];
// 奇数の数値のみ抽出する
let result = array.filter((val)=>{
console.log(val);
return val % 2 === 1; // 奇数ならtrue
});
console.log(result);[結果]
1
2
3
4
5
1, 3, 5結果より、
- 全ての要素に対して処理が実行されていること
- 関数がtrueを返した要素のみ抽出された新しい配列が生成されていること
が分かります。
