根据现有 object 的属性值创建新的 object 数组将现有 object 添加到新数组

Question

我有一个现有的 objects 数组，它共享一个属性标题为 type 就像这样

[
 {
   id: 1,
   name: 'a',
   type: 'foo',
 },{
   id: 2,
   name: 'b',
   type: 'bar',
 },{
   id: 3,
   name: 'c',
   type: 'fizz',
 },{
   id: 4,
   name: 'd',
   type: 'foo',
 },
]

我需要能够构建一个 objects 的新数组，现有数组按 type 组合在一起，像这样

[
 {
  type: 'foo',
  groups: [
    {
      id: 1,
      name: 'a',
      type: 'foo',
    },{
      id: 4,
      name: 'd',
      type: 'foo',
    },
  ]
 },{
  type: 'bar',
  groups: [
    {
      id: 2,
      name: 'b',
      type: 'bar',
    }
  ]
 },{
  type: 'fizz',
  groups: [
    {
      id: 3,
      name: 'c',
      type: 'fizz',
    }
  ]
 }
]

这是我目前所拥有的，但我无法创建新数组并按类型组织 objects，只能获取类型本身任何帮助将不胜感激！

Observable.value.map(objects => {
    typesArr = [...new Set(objects.data.map(object => object.type))];
}); /// output = ['foo', 'bar', 'fizz']

Answer 1

使用 type 作为键将数组缩减为 Map。使用 Array.from() 将 Map 的值迭代器转换为数组：

const arr = [{"id":1,"name":"a","type":"foo"},{"id":2,"name":"b","type":"bar"},{"id":3,"name":"c","type":"fizz"},{"id":4,"name":"d","type":"foo"}]

const result = Array.from(arr.reduce((acc, o) => {
  const type = o.type
  if(!acc.has(type)) acc.set(type, { type, groups: [] })
  
  acc.get(type).groups.push(o)
  
  return acc
}, new Map()).values())

console.log(result)

为了让TS推断分组数组的类型，从原始数组中推断出一个项目的类型，并用它来设置Map的类型(TS playground):

const arr = [{"id":1,"name":"a","type":"foo"},{"id":2,"name":"b","type":"bar"},{"id":3,"name":"c","type":"fizz"},{"id":4,"name":"d","type":"foo"}]

type Item = (typeof arr)[0]

const result = Array.from(arr.reduce((acc, o) => {
  const type = o.type
  if(!acc.has(type)) acc.set(type, { type, groups: [] })
  
  acc.get(type)!.groups.push(o)
  
  return acc
}, new Map<string, { type: Item['type'], groups: Item[] }>()).values())

console.log(result)

另一种选择是将数组缩减为组 [type, object] 的映射，然后使用 Array.from() 将映射的条目转换为所需的形式 (TS playground):

const arr = [{"id":1,"name":"a","type":"foo"},{"id":2,"name":"b","type":"bar"},{"id":3,"name":"c","type":"fizz"},{"id":4,"name":"d","type":"foo"}]

const result = Array.from(
  arr.reduce((acc, o) => {
    const type = o.type
    if(!acc.has(type)) acc.set(type, [])

    acc.get(type).push(o)

    return acc
  }, new Map()),
  ([type, groups]) => ({ type, groups })
)

console.log(result)

根据现有 object 的属性值创建新的 object 数组将现有 object 添加到新数组

Create a new array of objects by property value from existing object add existing objects to new array

javascript

arrays

loops

typescript

根据现有 object 的 属性 值创建新的 object 数组 将现有 object 添加到新数组

Create a new array of objects by property value from existing object add existing objects to new array

javascript

arrays

loops

typescript

根据现有 object 的属性值创建新的 object 数组将现有 object 添加到新数组