【JavaScript】配列に対するループ処理の種類(for, for of, forEach, map, reduce, filter)

let array = [1, 2, 3, 4];
for(let i = 0; i < array.length; i++){
    console.log(array[i]*2);
}

[結果]
2
4
6
8

let array = [1, 2, 3, 4];
for(let element of array){
    console.log(element*2);
}

[結果]
2
4
6
8

let array = [1, 2, 3, 4];
array.forEach(element => console.log(element*2));

[結果]
2
4
6
8

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

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

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です！

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

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

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