如何按region分组并移除该字段？解决JS数组转换报错问题

原数组结构 #

const values = [{
    "region": "US", "content": "content 1", "value": "value1"
}, {
    "region": "US", "content": "content 2", "value": "value2"
}, {
    "region": "US", "content": "content 3", "value": "value3"
}, {
    "region": "LA", "content": "content 4", "value": "value4"
}, {
    "region": "LA", "content": "content 5", "value": "value5"
}, {
    "region": "LA", "content": "content 6", "value": "value6"
}, {
    "region": "LA", "content": "content 7", "value": "value7"
}]

目标转换结构 #

要求按region分组，移除每个子对象的region字段，最终结构如下：

const output = [{
    "US": [
        {"content": "content 1", "value": "value1"},
        {"content": "content 2", "value": "value2"},
        {"content": "content 3", "value": "value3"}
    ],
    "LA": [
        {"content": "content 4", "value": "value4"},
        {"content": "content 5", "value": "value5"},
        {"content": "content 6", "value": "value6"},
        {"content": "content 7", "value": "value7"}
    ]
}]

你遇到的问题 #

错误代码1及报错 #

let outputValues = [];

values.forEach(currentElement => {
    outputValues[currentElement.region].push(currentElement);
})

console.log(outputValues);

报错信息：

Uncaught TypeError: Cannot read properties of undefined (reading 'push')

另外两种写法的问题 #

// 1st option
outputValues[currentElement.region] = currentElement;

// 2nd option
outputValues[currentElement.region] = [];
outputValues[currentElement.region].push(currentElement);

这两种写法只能保留values数组中每个region对应的最后一个元素。

错误原因分析 #

1. 第一个错误代码：你初始化outputValues为数组，但实际需要用对象来存储region作为键。而且即使是对象，第一次访问某个region键时，对应的值是undefined，直接调用push必然报错。
2. 第二种写法的问题：
   • 第一种选项直接把currentElement赋值给键，每次循环都会覆盖之前的值，最后只保留最后一个元素。
   • 第二种选项每次循环都重新初始化该region对应的数组为空，之前push的元素会被清空，所以最后也只保留当前循环的元素。

正确解法 #

方法一：使用forEach循环处理 #

// 初始化一个对象，而非数组
const resultObj = {};

values.forEach(item => {
    // 解构出region，剩下的就是需要保留的内容
    const { region, ...rest } = item;
    // 如果该region还没有对应的数组，就初始化一个空数组
    if (!resultObj[region]) {
        resultObj[region] = [];
    }
    // 把处理后的对象push到对应数组里
    resultObj[region].push(rest);
});

// 最后把对象放到数组里，匹配目标结构
const output = [resultObj];
console.log(output);

方法二：使用reduce函数（更简洁） #

const output = [values.reduce((acc, { region, ...rest }) => {
    // 累加器中不存在该region时，初始化空数组，否则直接用现有数组
    acc[region] = acc[region] || [];
    acc[region].push(rest);
    return acc;
}, {})];

console.log(output);

这两种方法都能正确按region分组，并且移除每个子对象的region字段，得到你想要的结构。

内容的提问来源于stack exchange，提问作者ReynierPM