15_js中的reduce了解吗？都用他解决过什么问题

一、介绍reduce

arr.reduce(callback, initialValue) 迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值

1、参数

• callback: previousValue 必选 --上一次调用回调返回的值，或者是提供的初始值（initialValue）
• currentValue 必选 --数组中当前被处理的数组项
• index 可选 --当前数组项在数组中的索引值
• array 可选 --原数组
• initialValue: 可选 --初始值

2、实现方法

回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值.

let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) => 
    preValue + curValue
)
console.log(arr1)    // 10

let arr2 = arr.reduce((preValue,curValue)=>preValue + curValue,5)
console.log(arr2)    // 15

二、reduce的高级用法

1、计算数组中每个元素出现的次数

let names = ['peter', 'tom', 'mary', 'bob', 'tom','peter'];


let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1
  }
  return pre
},{})
console.log(nameNum); //{ peter: 2, tom: 2, mary: 1, bob: 1 }

2、计算一个字符串中每个字母出现次数

const str = 'jshdjsihh';
const obj = str.split('').reduce((pre,item) => {
     pre[item] ? pre[item] ++ : pre[item] = 1
    return pre
    },{})
console.log(obj) // {j: 2, s: 2, h: 3, d: 1, i: 1}

3、数组去重

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]

4、求数组项最大值

let arr = [2, 44, 96, 86];
var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});
console.log('max============>',max); // 96

5、将多维数组转化为一维

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]

6、过滤对象中指定的属性值

var only = function(obj, keys){
  obj = obj || {};
  if ('string' == typeof keys) keys = keys.split(/ +/);
  return keys.reduce(function(ret, key){
    if (null == obj[key]) return ret; //如果对象obj中存在key 字段,则赋值给ret 否则直接返回
    ret[key] = obj[key];
    return ret;
  }, {});
};

var a = {
    env : 'development',
    proxy : false,
    subdomainOffset : 2
}
only(a,['env','proxy'])   // {env:'development',proxy : false}

7、计算总成绩，且学科的占比不同

const scores = [
    {
        subject: 'math',
        score: 88
    },
    {
        subject: 'chinese',
        score: 95
    },
    {
        subject: 'english',
        score: 80
    }
];
const dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
}
const sum = scores.reduce((pre,item) => {
    return pre + item.score * dis[item.subject]
},0)
console.log(sum) // 88.5

8、递归利用reduce处理tree树形

var data = [{
            id: 1,
            name: "办公管理",
            pid: 0,
            children: [{
                    id: 2,
                    name: "请假申请",
                    pid: 1,
                    children: [
                        { id: 4, name: "请假记录", pid: 2 },
                    ],
                },
                { id: 3, name: "出差申请", pid: 1 },
            ]
        },
        {
            id: 5,
            name: "系统设置",
            pid: 0,
            children: [{
                id: 6,
                name: "权限管理",
                pid: 5,
                children: [
                    { id: 7, name: "用户角色", pid: 6 },
                    { id: 8, name: "菜单设置", pid: 6 },
                ]
            }, ]
        },
    ];
    const arr = data.reduce(function(pre,item){
        const callee = arguments.callee //将运行函数赋值给一个变量备用
        pre.push(item)
        if(item.children && item.children.length > 0) item.children.reduce(callee,pre); //判断当前参数中是否存在children，有则递归处理
        return pre;
    },[]).map((item) => {
        item.children = []
        return item
    })
    console.log(arr)