在JavaScript中将对象的对象转换为对象数组的方法

问题描述 #

原始数据结构：

const data = {
    school1:{location:'medway',score:6},
    school2:{location:'milan',score:8},
    school3:{location:'brooklyn',score:103}
}

需要转换为以下数组格式：

const data = [
    {name:'school1', location:'medway',score:6},
    {name:'school2', location:'milan',score:8},
    {name:'school3', location:'brooklyn',score:103}
]

解决方案 #

以下是几种实用的转换方法：

方法1：Object.entries() + map() #

这是最简洁的ES6写法，直接将对象拆分为键值对数组后映射成目标结构：

const originalData = {
    school1:{location:'medway',score:6},
    school2:{location:'milan',score:8},
    school3:{location:'brooklyn',score:103}
};

const convertedData = Object.entries(originalData).map(([name, details]) => ({
    name,
    ...details
}));

Object.entries()把对象转为[键名, 属性对象]的数组，map()遍历每个元素，将键名设为name属性，再展开原属性对象的内容合并。

方法2：Object.keys() + map() #

如果只需要获取键名，也可以用这种方式：

const convertedData = Object.keys(originalData).map(name => ({
    name,
    ...originalData[name]
}));

方法3：for...in循环（兼容旧环境） #

针对不支持ES6语法的场景，用传统循环实现：

const convertedData = [];
for (const name in originalData) {
    if (originalData.hasOwnProperty(name)) { // 避免遍历继承属性
        convertedData.push({
            name,
            ...originalData[name]
        });
    }
}

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