如何将js数组中对象的属性值相等的对象组合成一个新的数组元素，然后返回一个新的数组？

作者站长头像
站长
· 阅读数 6

将js数组中对象的属性值相等的对象组合成一个新的数组元素。可以使用reduce、map等函数

比如：

// 原始数组
const arr = [
  {title: '标题1', url: 'url', groupId: -1},
  {title: '标题2', url: 'url', groupId: 123},
  {title: '标题3', url: 'url', groupId: 123},
  {title: '标题4', url: 'url', groupId: -1},
  {title: '标题5', url: 'url', groupId: 456},
  {title: '标题6', url: 'url', groupId: 456},
  {title: '标题6', url: 'url', groupId: 789},
]

// 期望结果
const resArr = [
  {title: '标题1', url: 'url'},
  {groupId: 123, group: [{title: '标题2', url: 'url'}, {title: '标题3', url: 'url'}]},
  {title: '标题4', url: 'url'},
  {groupId: 456, group: [{title: '标题5', url: 'url'}, {title: '标题6', url: 'url'}]}
]

如果 groupId 为-1，则删除其groupId属性，并按顺序将该元素加入新的数组中即可

另外：arr数组中相同groupId的元素在数组中的位置总是相邻的。（groupId为-1的除外）比如：

// 正例
const arr = [
  {title: '标题1', url: 'url', groupId: -1},
  {title: '标题2', url: 'url', groupId: 123},
  {title: '标题3', url: 'url', groupId: 123},
  {title: '标题4', url: 'url', groupId: -1},
  {title: '标题5', url: 'url', groupId: 456},
  {title: '标题6', url: 'url', groupId: 456},
  {title: '标题4', url: 'url', groupId: -1},
]

// 反例
const arr = [
  {title: '标题1', url: 'url', groupId: -1},
  {title: '标题2', url: 'url', groupId: 123},
  {title: '标题4', url: 'url', groupId: -1},
  {title: '标题3', url: 'url', groupId: 123},

  {title: '标题5', url: 'url', groupId: 456},
  {title: '标题5', url: 'url', groupId: 789},
  {title: '标题6', url: 'url', groupId: 456},
]
回复
1个回答
avatar
test
2024-06-24

你可以看看是否满足你需求，reduce的别样用法

算了，我更新一下，直接给groupId取掉了，你看第二次的，第一次我还保留

const arr = [
  { title: '标题1', url: 'url', groupId: -1 },
  { title: '标题2', url: 'url', groupId: 123 },
  { title: '标题3', url: 'url', groupId: 123 },
  { title: '标题333', url: 'url', groupId: 123 },
  { title: '标题4', url: 'url', groupId: -1 },
  { title: '标题5', url: 'url', groupId: 456 },
  { title: '标题6', url: 'url', groupId: 456 },
]

const res = arr.reduce((previous, current) => {
  const len = previous.length
  const last = len && previous[len - 1]

  if (last.groupId === current.groupId) {
    // 如果标题4上面还有一个groupId为123的走这个
    if (last.group) {
      last.group.push({ ...current })
    }
    else {
      previous[len - 1] = {
        groupId: last.groupId,
        group: [{ ...last }, { ...current }]
      }
    }
  } else {
    previous.push(current)
  }
  return previous
}, [])

console.log(res)
/*
[
  { "title": "标题1", "url": "url", "groupId": -1 },
  {
    "groupId": 123,
    "group": [
      { "title": "标题2", "url": "url", "groupId": 123 },
      { "title": "标题3", "url": "url", "groupId": 123 },
      { "title": "标题333", "url": "url", "groupId": 123 }
    ]
  },
  { "title": "标题4", "url": "url", "groupId": -1 },
  {
    "groupId": 456,
    "group": [
      { "title": "标题5", "url": "url", "groupId": 456 },
      { "title": "标题6", "url": "url", "groupId": 456 }
    ]
  }
]
*/

-----第二次-----

const arr = [
  { title: '标题1', url: 'url', groupId: -1 },
  { title: '标题2', url: 'url', groupId: 123 },
  { title: '标题3', url: 'url', groupId: 123 },
  { title: '标题333', url: 'url', groupId: 123 },
  { title: '标题4', url: 'url', groupId: -1 },
  { title: '标题5', url: 'url', groupId: 456 },
  { title: '标题6', url: 'url', groupId: 456 },
]

const res = arr.reduce((previous, current) => {
  const len = previous.length
  const last = len && previous[len - 1]

  if (last.groupId === current.groupId) {
    // 如果标题4上面还有一个groupId为123的走这个
    if (last.group) {
      const { groupId: _2, ...currentData } = current
      last.group.push({ ...currentData })
    }
    else {
      const { groupId: _1, ...firstData } = last
      const { groupId: _2, ...currentData } = current
      previous[len - 1] = {
        groupId: last.groupId,
        group: [{ ...firstData }, { ...currentData }]
      }
    }
  } else {
    if (current.groupId === -1) delete current.groupId
    previous.push(current)
  }
  return previous
}, [])

console.log(res)
/*
[
  { "title": "标题1", "url": "url"},
  {
    "groupId": 123,
    "group": [
      { "title": "标题2", "url": "url" },
      { "title": "标题3", "url": "url" },
      { "title": "标题333", "url": "url" }
    ]
  },
  { "title": "标题4", "url": "url" },
  {
    "groupId": 456,
    "group": [
      { "title": "标题5", "url": "url" },
      { "title": "标题6", "url": "url" }
    ]
  }
]
*/
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容