如何从嵌套数组生成指定结构新数组？当前方案仅返回单个对象

我尝试了多种方法生成目标数组都没成功，甚至查了Stack Overflow。现在结果里的内容是对的，但fieldsArray只返回单个对象，我觉得当前思路接近正确，求帮忙。

原始数组 #

[
    {
        fileName: 'Home_AIT_Spraying-1_29062023.agdata',
        fileType: 'AgData',
        metadata: {
            tags: [
                {
                    type: 'Field',
                    value: 'Home',
                    uniqueId: null,
                },
                {
                    type: 'Farm',
                    value: 'OTF',
                    uniqueId: null,
                },
                {
                    type: 'Grower',
                    value: 'Jim Smith',
                    uniqueId: null,
                }
            ],
        },
    },
    {
        fileName: 'AIT_AIT_Spraying-1_30062023.agdata',
        fileType: 'AgData',
        metadata: {
            tags: [
                {
                    type: 'Field',
                    value: 'Oscar',
                    uniqueId: null,
                },
                {
                    type: 'Farm',
                    value: 'OTF',
                    uniqueId: null,
                },
                {
                    type: 'Grower',
                    value: 'Jasper Jones',
                    uniqueId: null,
                }
            ],
        },
    }
]

期望输出 #

[
    {
        Field: 'Home',
        Farm: 'OTF',
        Grower: 'Jim Smith',
    },
    {
        Field: 'Oscar',
        Farm: 'OTF',
        Grower: 'Jasper Jones',
    },
];

当前实现代码 #

const fieldsMetaArray = [] as [];

data.forEach((val, key) => {
    console.log('key', key);
    val.metadata.tags.map((tag) => {
        console.log(`key: ${tag.type} value: ${tag.value}`);
        fieldsMetaArray[tag.type] = tag.value;
    });
});

console.log(fieldsArray);

问题分析&修正方案 #

你的问题出在没有为每个原始数组元素创建独立的对象，而是一直在同一个数组上覆盖属性值，最后只留下最后一次循环的结果。

正确的做法是：遍历原始数组时，为每个元素创建一个新对象，把tags里的键值对映射到这个对象上，再将对象推入结果数组。

修正代码（forEach版本） #

// 初始化结果数组
const fieldsMetaArray = [];

data.forEach(item => {
    // 为每个元素创建新对象
    const fieldObj = {};
    // 遍历当前元素的tags，填充对象
    item.metadata.tags.forEach(tag => {
        fieldObj[tag.type] = tag.value;
    });
    // 将对象推入结果数组
    fieldsMetaArray.push(fieldObj);
});

console.log(fieldsMetaArray);

更简洁的map+reduce版本（推荐） #

const fieldsMetaArray = data.map(item => {
    return item.metadata.tags.reduce((obj, tag) => {
        obj[tag.type] = tag.value;
        return obj;
    }, {});
});

console.log(fieldsMetaArray);

这两段代码都能生成你想要的目标数组，map+reduce的写法更符合函数式编程风格，代码更紧凑。

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