reduce的用法以及用该方法对对象进行分类

reduce的用法以及用该方法对对象进行分类

reduce() 方法接收一个函数作为累加器(accumulator),该方法可以接受两个参数。

当reduce方法里面只有一个参数,该参数是一个回调函数callback的时候,回调函数有四个参数,分别是:

  • prev上一次调用回调返回的值,第一次遍历时该prev是数组的第一项;
  • curr是数组中当前被处理的每一项元素,从数组的第二项开始;
  • index当前被处理元素在数组中的索引,从1开始;
  • array调用 reduce方法的原数组。

该回调函数被调用length-1次

const data = [1,2,3,4,5]
const newData = data.reduce((prev,curr) => {
      console.log(pre,'prev')  //1,3,6,10
      console.log(cur,'curr')  //2,3,4,5
      return prev+curr
}) 
console.log(newData,'newData')  //15
用reduce方法对对象分类,如下例子,用来对不同年龄进行分类
const dataSource = [
  {name: '小a', age: '22'},
  {name: '小b', age: '22'},
  {name: '小c', age: '23'},
  {name: '小d', age: '23'},
  {name: '小e', age: '11'},
]
const newDataSource = dataSource.reduce((prev,curr) => {
      const {age} = curr;
      if(prev[age]){
        prev[age].push(curr);
      }else{
        prev[age] = [curr]
      }
      
      return prev
})
console.log(newDataSource)   // {11: Array(1), 22: Array(1), 23: Array(2), name: "小a", age: "22"}

可以看到返回来的prev赋值给了newDataSource,但是有个问题,newDataSource里面包含了数组的第一项,只对数组第一项以后的元素进行了分类,因为前面提到prev在进行数组第一次遍历时是数组的第一项,解决办法是给reduce方法一个{ }作为参数,作为prev的初始值。

这时prev的初始值是{},curr此时从数组的第一项开始遍历,也就是从第一项开始对后面的数据进行分类。

const dataSource = [
  {name: '小a', age: '22'},
  {name: '小b', age: '22'},
  {name: '小c', age: '23'},
  {name: '小d', age: '23'},
  {name: '小e', age: '11'},
]
const newDataSource = dataSource.reduce((prev,curr) => {
      const {age} = curr;
      if(prev[age]){
        prev[age].push(curr);
      }else{
        prev[age] = [curr]
      }
      
      return prev
},{})
console.log(newDataSource)  //{11: Array(1), 22: Array(2), 23: Array(2)}
用reduce方法对对象进行两次的分类,先对address进行一次分类,再对type进行一次分类。
const dataSource = [
  {name: "应用服务器CPU", address: "172.16.134.101", time: "2019-01-25 10:13:09.448", type: "app-cpu", content: "0.0"},
  {name: "应用服务器内存", address: "172.16.134.101", time: "2019-01-25 10:13:09.448", type: "app-mem", content: "12.74"},
  {name: "应用服务器磁盘SDB", address: "172.16.134.101", time: "2019-01-25 10:13:09.448", type: "app-io-SDB", content: "0.00"},
  {name: "应用服务器CPU", address: "172.16.134.102", time: "2019-01-25 10:13:09.448", type: "app-cpu", content: "0.0"},
  {name: "应用服务器内存", address: "172.16.134.102", time: "2019-01-25 10:13:09.448", type: "app-mem", content: "12.74"},
  {name: "应用服务器磁盘SDB", address: "172.16.134.102", time: "2019-01-25 10:13:09.448", type: "app-io-SDB", content: "0.00"},
  {name: "应用服务器CPU", address: "172.16.134.103", time: "2019-01-25 10:13:09.448", type: "app-cpu", content: "0.0"},
  {name: "应用服务器内存", address: "172.16.134.103", time: "2019-01-25 10:13:09.448", type: "app-mem", content: "12.74"},
  {name: "应用服务器磁盘SDB", address: "172.16.134.103", time: "2019-01-25 10:13:09.448", type: "app-io-SDB", content: "0.00"},
 ]
 //先对地址进行一次分类成对象的形式
const dataSourceByAddress = dataSource.reduce((prev, curr) => {
            const {address} = curr;
            if (prev[address]) {
                prev[address].push(curr);
            } else {
            prev[address] = [curr];
            }

            return prev;
        }, {});

//再对前面处理好的对象再次根据type分类

Object.keys(dataSourceByAddress).forEach(key => {
    const value = dataSourceByAddress[key] || [];
    
    dataSourceByAddress[key] = value.reduce((prev, curr) => {
        const {type} = curr;
        if(prev[type]) {
            prev[type].push(curr);
        } else {
            prev[type] = [curr];
        }

        return prev;
    }, {});
});


//{172.16.134.101: {…}, 172.16.134.102: {…}, 172.16.134.103: {…}}
//172.16.134.101: {app-cpu: Array(1), app-mem: Array(1), app-io-SDB: Array(1)}
//172.16.134.102: {app-cpu: Array(1), app-mem: Array(1), app-io-SDB: Array(1)}
//172.16.134.103: {app-cpu: Array(1), app-mem: Array(1), app-io-SDB: Array(1)}
Object.keys()这个方法是取到对象里面的key值,然后组成一个数组。
const obj = {
  name:'小花',
  age: '12',
  job: 'it'
}
const newData = Object.keys(obj);

console.log(newData);   //["name", "age", "job"]

你可能感兴趣的:(reduce,数组方法)