1.文法
arr.reduce(function(prev,cur,index,arr){
...
}, init);
arr：元の配列;
prev：コールバックが最後に呼び出されたときの戻り値、または初期値init;
cur：現在処理されている配列要素;
index：現在処理されている配列要素のインデックス（初期値の場合）が指定されている場合、インデックスは0です。それ以外の場合、インデックスは1です
。init：初期値
実際、一般的に使用されるパラメーターは、prevとcurの2つだけです。
2.一般的な使用法
2.1配列の合計
var arr = [1,2,3,4];
var sum = arr.reduce((prev,cur)=>{
return prev + cur;
}) // 10
<!-- 设定初始值求和 -->
var sum = arr.reduce((prev,cur)=>{
return prev + cur;
},10) // 20
<!-- 对象数组求和 -->
var result = [
{
subject: 'math', score: 80 },
{
subject: 'chinese', score: 90 },
{
subject: 'english', score: 80 }
];
var sum = result.reduce((prev, cur) => prev + cur.score, 0); // 250
<!-- 总分扣除10分 -->
var sum = result.reduce((prev, cur) => prev + cur.score, -10); // 240
2.2配列項目の最大値
var arr = [1,2,3,4];
// 法1：
var max = arr.reduce(function (prev, cur) {
return prev > cur ? prev : cur;
}); // 4
// 法2：:Math.max(a,b,...,x,y) 返回数个数字中较大的值
var max = arr.reduce(function (prev, cur) {
return Math.max(prev,cur);
}); // 4
2.3アレイの重複排除
var arr = [1,2,3,4,2,1,5];
var newArr = arr.reduce((prev, cur)=> {
prev.indexOf(cur) === -1 && prev.push(cur);
return prev;
},[]); // [1, 2, 3, 4, 5]
実現の基本原則は次のとおりです。
①空の配列を初期化
します。②初期化配列で重複排除する必要がある配列の最初のアイテムを見つけます。見つからない場合（空の配列では間違いなく見つからない場合）、アイテムを初期化配列に追加します。
③初期化配列で重複排除が必要な配列内の2番目の項目を見つけます。見つからない場合は、引き続き初期化配列に項目を追加します
。④……
⑤重複排除が必要な配列内のn番目の項目検索初期化配列で、見つからない場合は、引き続きアイテムを初期化配列に追加します
。⑥この初期化配列を返します。
2.4配列オブジェクトでの使用
const objArr = [{
name: '唐僧'},{
name: '悟空'}, {
name: '八戒'}, {
name: '沙僧'}];
const res = objArr.reduce((pre, cur, index, arr) => {
if (index === 0) {
return cur.name;
}else if (index === (arr.length - 1)) {
return pre + '和' + cur.name;
}else {
return pre + '、' + cur.name;
}
}, ''); // 唐僧、悟空、八戒和沙僧
2.5文字列内の文字の出現回数
const str = 'sfhjasfjgfarda-cm';
const res = str.split('').reduce((prev, cur) => {
prev[cur] ? prev[cur]++ : prev[cur] = 1;
return prev;
}, {
}); // {-: 1,a: 3,c: 1,d: 1,f: 3,g: 1,h: 1,j: 2,m: 1,r: 1,s: 2}
2.6配列から配列（特定の規則に従って配列に変換）
var arr = [1, 2, 3,]; // 每个值的平方
var newarr = arr.reduce((prev, cur) => {
prev.push(cur * cur);
return prev;
}, []); // [1, 4, 9]
2.7オブジェクトへの配列
var streams = [{
name: '开发', id: 1}, {
name: '设计', id: 2}];
var obj = streams.reduce((prev, cur) => {
prev[cur.id] = cur.name;
return prev;
}, {
}); // {1: "开发", 2: "设计"}
2.8多次元オーバーレイ実行操作
<!-- 各科成绩占比重不一样， 求结果 -->
var result = [
{
subject: 'math', score: 80 },
{
subject: 'chinese', score: 90 },
{
subject: 'english', score: 80 }
];
var dis = {
math: 0.5,
chinese: 0.3,
english: 0.2
};
var res = result.reduce((prev, cur) => dis[cur.subject] * cur.score + prev, 0); // 83
<!-- 加大难度， 商品对应不同国家汇率不同，求总价格 -->
var prices = [{
price: 23}, {
price: 45}, {
price: 56}];
var rates = {
us: '6.5',
eu: '7.5',
};
var initialState = {
usTotal:0, euTotal: 0};
var res = prices.reduce((prev1, cur1) => Object.keys(rates).reduce((prev2, cur2) => {
prev1[`${
cur2}Total`] += cur1.price * rates[cur2];
return prev1;
}, {
}), initialState);
var manageReducers = function() {
return function(state, item) {
return Object.keys(rates).reduce((nextState, key) => {
state[`${
key}Total`] += item.price * rates[key];
return state;
}, {
});
}
};
var res1 = prices.reduce(manageReducers(), initialState); // {usTotal: 1612, euTotal: 1860}
2.9多次元オーバーレイ実行操作
var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((prev, cur) => prev.concat(cur), []); // [1, 2, 8, 3, 4, 9, 5, 6, 10]
2.10配列オブジェクトの重複排除
var arr = [{
id: 1, name: 'A'}, {
id: 2,name: 'A'}, {
id: 3,name: 'B'}, {
id: 4,name: 'C'}];
var obj = {
};
var newArr = arr.reduce((prev, cur) => {
obj.hasOwnProperty(cur.name) ? '': obj[cur.name] = true && prev.push(cur);
return prev;
}, []);
console.log(obj,newArr);
// {A: 1, B: 2, C: 3} [{id: 1, name: 'A'}, {id: 3,name: 'B'}, {id: 4,name: 'C'}]
var newArr = arr.reduce((prev, cur) => {
if(!obj.hasOwnProperty(cur.name)){
obj[cur.name] = cur.id;
prev.push(cur);
}
return prev;
}, []);
console.log(obj,newArr);
// {A: 1, B: 3, C: 4} [{id: 1, name: 'A'}, {id: 3,name: 'B'}, {id: 4,name: 'C'}]
3. reduceRight（）
このメソッドの使用法は、トラバーサルの順序が逆になることを除いて、実際にはreduce（）と同じです。配列の最後のアイテムから始まり、最初のアイテムに向かってトラバースします。