javascript - 展平对象数组

Question

我有一个来自 formData serializeArray 函数的对象数组。例如:

[
        0 : {name: 'animal_monkey', value: 'banana'}
        1 : {name: 'animal_horse', value: 'radishes'}
        2 : {name: 'fruit_banana', value: 'yellow'}
        3 : {name: 'fruit_apple', value: 'red'}
]

我正在寻找一种方法将这些不同的元素放入一个对象中，按类别分割并为其分配适当的值，如下所示:

{ 
        animal: { 
                        monkey : banana,
                        horse : radishes
                },
        fruit: {
                        banana : yellow,
                        apple : red
               }
}

我尝试使用reduce和对象分配来做到这一点，就像这样

obj = keys.map((k, i) => k.reduceRight((value, key) => ({[key]: value}), vals[i]) )
result = Object.assign({}, ...obj)

其中keys是['animal_monkey', 'animal_horse', 'fruit_banana', 'fruit_apple']数组，vals是一个包含值的列表:['banana', 'radishs', 'yellow', 'red' ]。然而，也许正如预期的那样，这些值被覆盖，我最终得到:

{ 
        animal: { 
                        horse : radishes
                },
        fruit: {
                        apple : red
               }
}

第一个值在赋值后无法保留。有人知道如何使这项工作有效吗？

谢谢!

Answer 1

您可以在 _ 上拆分每个name，然后使用 array#reduce 创建一个包含类别和动物名称的对象。

const data = [ {name: 'animal_monkey', value: 'banana'}, {name: 'animal_horse', value: 'radishes'}, {name: 'fruit_banana', value: 'yellow'}, {name: 'fruit_apple', value: 'red'} ],
      result = data.reduce((r,o) => {
            const [category, name] = o.name.split('_');
            r[category] ??= {};
            r[category][name] = o.value;
            return r;
      }, {});
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }