持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

写在前面: 记录总结一下关于数组的reduce方法的使用方式.

事关于reduce方法的一些用法

reduce简介

let value = arr.reduce(function(previousValue, item, index, array) {\
  // ...\
}, [initial]);

一个reduce数组函数,可以实现业务中大部分常用数组功能,包括但不限于合并(扩展运算符),累加,去重(set),循环(forEach),过滤(filter),逆序(reverse)等等,这函数是强大还是鸡肋?

参数

• accumulator/previousValue (累计器)
  • 上一个函数调用的返回的结果
• currentValue/item (当前值)
  • 当前的数组元素
• currentIndex/index (当前索引)
  • 当前的数组索引
• array (数组)
  • 数组本身

过程

• 以accumulator作为累计结果的初始值，不设置accumulator则以数组第一个元素为初始值
• 开始遍历，使用累计器处理currentValue，将currentValue的映射结果累计到accumulator上，结束此次循环，返回accumulator
• 进入下一次循环，重复上述操作，直至数组最后一个元素
• 结束遍历，返回最终的accumulator

实际场景

计算数组的前后项,并累计最终值

const array = [2,3,4,5]
const array2 = array.reduce((prev,next) => {
        return prev * next;
})
console.log(array2) //120

计算对象数组的某一个值的和

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum)

数组扁平化

// 二维数组转一维数组
const arr2 = [ [1, 2], [3, 4], [5, 6]].reduce((acc, cur) => {
     return acc.concat(cur);
}, []);
console.log(arr2);  // [1,2,3,4,5,6]

// 多维数组转一维数组
const arr3 = [ [1, 2], [3, 4], [5, [7, [9, 10], 8], 6],];
const flatten = arr =>
 arr.reduce(
  (pre, cur) => pre.concat(Array.isArray(cur) ? flatten(cur) : cur),
  []
 );
console.log(flatten(arr3));  // [ 1, 2, 3, 4, 5, 7, 9, 10, 8, 6 ]


// 其实新语法有更简单的,但reduce毕竟也能实现
const arr2 = [ [1, 2], [3, 4], [5, 6]].flat(); // [1,2,3,4,5,6]

const arr3 = [ [1, 2], [3, 4], [5, [7, [9, 10], 8], 6]].flat(Infinity);

异步累加

async function AsyncTotal(arr = []) {
    return arr.reduce(async(t, v) => {
        const at = await t; 
        const todo = await Todo(v);
        at[v] = todo;
        return at;
    }, 
    Promise.resolve({}));
}

数组转对象

const people = [ { area: "GZ", name: "YZW", age: 27 }, { area: "SZ", name: "TYJ", age: 25 } ]; 

const map = people.reduce((t, v) => {
    const { name, ...rest } = v;
    t[name] = rest; return t;
    }, {}); // { YZW: {…}, TYJ: {…} }

连接长度不均匀的数组

let data = [ ["a","new", "car"], 
["God","is","a","gril"],
["everyday","to","be","better"],
["why","so","serious"] ] 
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))  
['a new car', 'God is a gril', 'everyday to be better', 'why so serious']

End