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

这篇博客介绍了reduce方法的用法,特别是如何利用它来对对象进行分类。首先,详细解释了reduce方法的参数和工作原理,然后展示了如何通过reduce对不同年龄的对象进行分类,并解决了分类过程中遇到的问题。进一步,文章探讨了如何进行两次分类,先按address,再按type进行。同时提到了Object.keys()方法在获取对象键值方面的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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"]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值