JS实现数组对象按某一属性进行分组处理得到新的数据格式

115 阅读1分钟

在很多情况下,会遇到后端返回的数据并不是前端想要的格式,需要处理后才能使用,打个比方,现在有这么一组数据。如下:

const oldData = [
   {
       id:1,
       name:'张三',
       time: '2021-10-13'
    },
   {
       id:2,
       name:'李四',
       time: '2021-10-12'
    },
   {
       id:3,
       name:'王王',
       time: '2021-10-13'
    }
]

现在我们有需求 需要将上面的数据转化为下面的格式(按时间进行分组形成一个新的数组)

newData = [
   {
       time: '2021-10-13',
       data: [
           {
               id:1,
               name:'张三',
               time: '2021-10-13'
            },
            {
               id:3,
               name:'王五',
               time: '2021-10-13'
            },
       ]
    },
   {
       time: '2021-10-12',
       data: [
           {
               id:2,
               name:'李四',
               time: '2021-10-12'
            }
       ] 
    }
]

这种结构的数据处理我们通过下面两个方法的处理就可以得到想要的数据结构

function groupData(arr, fun) {
    const groups = {}
    arr.forEach((el) => {
    const group = fun(el)
        groups[group] = groups[group] || []
        groups[group].push(el)
    })
    return Object.keys(groups).map((group) => {
        // 更改data的数据结构  可以改变新数据的结构 data即为newData的数组中每个数据的结构
        let data = {
            time: group,
            data: groups[group]
        }
        return data
    })
},
function getNewData(oldData, prop) {
    const newData = this.groupData(oldData, (item) => {
        return item[prop]
    })
    return newData
},
// oldData => 原始数据    'time' => 按time属性进行分组
const newData = getNewData(oldData, 'time')

通过上面一段代码即可实现这种结构数据的分组处理
记录备用。