JavaScript での reduce メソッドの詳細な説明

意味

1. reduce() メソッドはアキュムレータとして関数を受け取り、配列内の各値 (左から右へ) が縮小され始め、最終的に値として計算されます。

2. 関数合成の高階関数としてreduce()が使える

3. reduce() は空の配列に対してコールバック関数を実行しません

文法

array.reduce(function(prev, currentValue, currentIndex, arr), initialValue)

reduce 関数は 2 つのパラメーターを受け取ります。1 つはコールバック関数で、もう 1 つは初期割り当てです。

最初のパラメータのコールバック関数は、(初期値または計算後の戻り値、現在の要素、現在の要素のインデックス、現在の要素が属する配列オブジェクト) の 4 つのパラメータを受け取ります。

2 番目のパラメーターは関数に渡される初期値であり、必須ではありません

prev: 関数によって渡された初期値、または最後のコールバックの戻り値

currentValue: 配列内で現在処理されている要素の値

currentIndex: 現在の要素のインデックス

arr: 現在の要素が属する配列自体

initialValue: 関数に渡される初期値

ブラウザのサポート

Google、Firefox、ie9 以上などの主流ブラウザをサポート

例 1

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (prev, cur, index, arr) {
  console.log(prev, cur, index);
  return prev + cur;
});
console.log(arr, sum);

このとき、prev には初期値を代入しません。

上記の例では、インデックスは 1 から始まり、最初の prev の値は配列の最初の値、最初の cur の値は配列の 2 番目の値、配列の長さは 4、reduce は関数は 3 回ループします。

打印结果
1 2 1
3 3 2
6 4 3
[ 1, 2, 3, 4 ] 10

例 2

次に、initvalue に初期値 0 を指定します。

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (prev, cur, index, arr) {
  console.log(prev, cur, index);
  return prev + cur;
}, 0);
console.log(arr, sum);

この例では、インデックスは 0 から始まり、最初の prev の値は 0 に設定した初期値であり、配列の長さは 4 で、reduce 関数は 4 回ループします。

打印结果
0 1 0
1 2 1
3 3 2
6 4 3
[ 1, 2, 3, 4 ] 10

概要: initialValue が指定されていない場合、reduce はインデックス 1 からコールバックメソッドを実行し、最初のインデックスをスキップします。initialValue が指定されている場合は、インデックス 0 から始まります。

例のアルゴリズムを減らす

配列の累積結果を計算する

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (prev, cur, index, arr) {
  return prev * cur;
}, 1);
console.log(arr, sum);

打印结果
[ 1, 2, 3, 4 ] 24

配列内の各要素の出現回数をカウントする

var arr = ["one", "two", "three", "six", "four", "five", "six"];

var newArr = arr.reduce((pre, cur) => {
  console.log(cur, pre);
  if (cur in pre) {
    pre[cur]++;
  } else {
    pre[cur] = 1;
  }
  return pre;
}, {});//这里注意初始值要默认赋予空对象，不然会报错
console.log(newArr);


打印结果
one {}
two { one: 1 }
three { one: 1, two: 1 }
six { one: 1, two: 1, three: 1 }
four { one: 1, two: 1, three: 1, six: 1 }
five { one: 1, two: 1, three: 1, six: 1, four: 1 }
six { one: 1, two: 1, three: 1, six: 1, four: 1, five: 1 }
{ one: 1, two: 1, three: 1, six: 2, four: 1, five: 1 }

アレイの重複排除

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);

打印结果
[1, 2, 3, 4]

2D から 1D への配列の平坦化

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); 

打印结果
[0, 1, 2, 3, 4, 5]

多次元から 1 次元への配列の平坦化

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); 


打印结果
[0, 1, 2, 3, 4, 5, 6, 7]

オブジェクトプロパティの合計

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];
 
var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) 

打印结果
60