将数据减少到嵌套类别

Question

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

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

我在下面发布了一个 sn-p，您可以看到 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 循环的原因是，根据我的经验，没有多少开发人员对 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))