将数据缩减为嵌套类别

Question

我正在尝试将数据数组缩减为嵌套对象。除了下一个项目，我几乎拥有它。它没有推入数组，而是覆盖了整个数组本身，只留下 1 个值。

我 100% 确定问题出在这行代码 [...(acc[t.sub_region] || []), t] 我的直觉告诉我我需要按照 [...(acc[t.region][t.sub_region] || []), t] 的方式做一些事情但是当我尝试时它出错了这个。

我在下面发布了一个片段，如您所见，SOUTH_EUROPE 它的数组中只有 1 个项目，而它应该有 2 个项目。

想要的结果

const sorted = {
    EUROPE: {
        SOUTH_EUROPE: [{ item: 'Item 1' }, { item: 'Item 2' }],
        NORTH_EUROPE: [{ item: 'Item 3' }],
    },
    AMERICAS: {
        NORTH_AMERICA: [{ item: 'Item 4' }],
    },
}

const items = [
    {
        region: 'EUROPE',
        sub_region: 'SOUTH_EUROPE',
        item: 'Item 1'
    },
    {
        region: 'EUROPE',
        sub_region: 'SOUTH_EUROPE',
        item: 'Item 2'
    },
    {
        region: 'EUROPE',
        sub_region: 'NORTH_EUROPE',
        item: 'Item 3'
    },
    {
        region: 'AMERICAS',
        sub_region: 'NORTH_AMERCA',
        item: 'Item 4'
    },
]

const sorted = items.reduce((acc, t) => {
    return {
        ...acc,
        [t.region]: {
            ...acc[t.region],
            [t.sub_region]: [...(acc[t.sub_region] || []), t],
        },
    }
}, {})

console.log(sorted)

Answer 1

sub_region是嵌套的属性，所以需要用acc?.[t.region]?.[t.sub_region]访问。请注意，optional chaining operator 用于防止在该区域尚不存在时抛出错误。

const items = [
    {
        region: 'EUROPE',
        sub_region: 'SOUTH_EUROPE',
        item: 'Item 1'
    },
    {
        region: 'EUROPE',
        sub_region: 'SOUTH_EUROPE',
        item: 'Item 2'
    },
    {
        region: 'EUROPE',
        sub_region: 'NORTH_EUROPE',
        item: 'Item 3'
    },
    {
        region: 'AMERICAS',
        sub_region: 'NORTH_AMERCA',
        item: 'Item 4'
    },
]

const sorted = items.reduce((acc, t) => {
    return {
        ...acc,
        [t.region]: {
            ...acc[t.region],
            [t.sub_region]: [...(acc?.[t.region]?.[t.sub_region] || []),
                              {item: t.item}],
        },
    }
}, {})

console.log(sorted)

Answer 2

跟进我的评论，推荐更易于管理但“不太干净”的 for 循环。无论如何，我推荐 for loop 的原因是，根据我的经验，没有多少开发人员对 reduce 函数有广泛的了解，尤其是当你的团队中有初级开发人员时。但是我同意好的文档也可以提供必要的信息来维护它。但是，您在阅读函数时无法快速理解函数，这通常意味着变量名称信息不详、过于复杂或缺少文档。

const items = [{
    region: 'EUROPE',
    sub_region: 'SOUTH_EUROPE',
    item: 'Item 1'
  },
  {
    region: 'EUROPE',
    sub_region: 'SOUTH_EUROPE',
    item: 'Item 2'
  },
  {
    region: 'EUROPE',
    sub_region: 'NORTH_EUROPE',
    item: 'Item 3'
  },
  {
    region: 'AMERICAS',
    sub_region: 'NORTH_AMERCA',
    item: 'Item 4'
  },
]

const categorize = (someItems) => {
  const sorted = {}
  someItems.forEach(item => {
    if (!sorted[item.region]) sorted[item.region] = {}
    if (!sorted[item.region][item.sub_region]) sorted[item.region][item.sub_region] = []

    sorted[item.region][item.sub_region].push(item)
  })
  return sorted
}

console.log(categorize(items))

将数据缩减为嵌套类别

Reduce data into nested categories

javascript

reduce