本文详细介绍了如何在javascript中将一个普通对象的键值对转换为一个结构化的对象数组。通过利用`object.entries()`方法提取键值对，并结合数组的`map()`方法进行迭代和转换，可以实现一种声明式且高效的数据转换方式。教程将提供完整的代码示例，并阐述这种现代javascript方法的优势，帮助开发者优化数据处理逻辑。
数据转换需求概述
在前端开发中，我们经常会遇到需要将后端返回的扁平化数据结构（例如，一个以ID为键、名称为值的JavaScript对象）转换为更丰富、更易于UI组件渲染的结构化数据（例如，一个包含id、type、name等属性的对象数组）。
考虑以下场景，我们有一个表示成本中心的JavaScript对象：
const costCentres = {
"11738838-bf34-11e9-9c1c-063863da20d0": "Refit 2018",
"f30d72f4-a16a-11e9-9c1c-063863da20d0": "Refit 2019",
"f7fa34ed-a16a-11e9-9c1c-063863da20d0": "Refit 2020"
};我们的目标是将其转换为以下形式的对象数组，其中每个对象都包含id、type、name和chosen等属性：
[
{
id: "11738838-bf34-11e9-9c1c-063863da20d0",
type: "Cost Centre",
name: "Refit 2018",
chosen: false
},
{
id: "f30d72f4-a16a-11e9-9c1c-063863da20d0",
type: "Cost Centre",
name: "Refit 2019",
chosen: false
},
{
id: "f7fa34ed-a16a-11e9-9c1c-063863da20d0",
type: "Cost Centre",
name: "Refit 2020",
chosen: false
}
]传统迭代方法与局限性
一种直观的实现方式是使用for...in循环遍历对象的键，然后手动构建新的对象并推入数组：
立即学习“Java免费学习笔记（深入）”；
let centresToEntities = [];
for (const key in costCentres) {
if (Object.prototype.hasOwnProperty.call(costCentres, key)) { // 推荐添加此检查
centresToEntities.push({
id: key,
type: 'Cost Centre',
name: costCentres[key],
chosen: false
});
}
}
console.log(centresToEntities);这种方法虽然功能上可行，但在现代JavaScript开发中，它被认为是相对命令式且冗余的。for...in循环会遍历对象及其原型链上的所有可枚举属性，因此通常需要配合hasOwnProperty检查以避免意外行为。此外，它不够函数式，通常会引入可变状态（centresToEntities数组在循环中被修改）。
推荐的现代JavaScript解决方案：Object.entries()与map()
更优雅、更函数式的解决方案是结合使用Object.entries()和数组的map()方法。
1. Object.entries()
Object.entries()方法返回一个给定对象自身可枚举字符串键属性的[key, value]对的数组。
const myObject = { a: 1, b: 2 };
console.log(Object.entries(myObject));
// 输出: [ ['a', 1], ['b', 2] ]对于我们的costCentres对象，Object.entries(costCentres)将返回：
[
["11738838-bf34-11e9-9c1c-063863da20d0", "Refit 2018"],
["f30d72f4-a16a-11e9-9c1c-063863da20d0", "Refit 2019"],
["f7fa34ed-a16a-11e9-9c1c-063863da20d0", "Refit 2020"]
]2. 数组的map()方法
map()方法创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。它不会改变原数组。
结合这两者，我们可以对Object.entries()返回的[key, value]数组进行映射，将其中的每个[key, value]对转换为我们所需的新对象。
完整解决方案代码
const costCentres = {
"11738838-bf34-11e9-9c1c-063863da20d0": "Refit 2018",
"f30d72f4-a16a-11e9-9c1c-063863da20d0": "Refit 2019",
"f7fa34ed-a16a-11e9-9c1c-063863da20d0": "Refit 2020"
};
// 使用 Object.entries() 和 map() 转换对象
let centresToEntities = Object.entries(costCentres).map(([key, value]) => ({
id: key,
type: 'Cost Centre', // 固定值
name: value,
chosen: false // 固定值
}));
console.log(centresToEntities);代码解析：
- Object.entries(costCentres)：将costCentres对象转换为一个包含[key, value]子数组的数组。
- .map(([key, value]) => { ... })：对Object.entries()生成的每个[key, value]子数组执行映射操作。
- [key, value]：这是一个数组解构赋值，它从每个子数组中提取出键（key）和值（value）。
- => ({ ... })：这是一个箭头函数，它返回一个新的对象。注意，如果箭头函数直接返回一个对象字面量，需要用括号()将其包围，以避免与函数体的块语句混淆。
- 在新对象中，我们将key赋值给id属性，value赋值给name属性，并为type和chosen属性设置了固定的默认值。
这种方法的优势
- 声明式编程风格： 代码更侧重于“做什么”而不是“如何做”，提高了可读性和维护性。
- 函数式纯净性： map()方法不修改原始数据，而是返回一个新数组，符合函数式编程中不变性的原则。
- 简洁性： 相较于for...in循环，代码更精炼，减少了样板代码。
- 避免原型链问题： Object.entries()只处理对象自身的属性，无需额外的hasOwnProperty检查。
- 链式调用： Object.entries()返回数组，可以直接在其结果上链式调用map()或其他数组方法，使代码流更顺畅。
总结
通过巧妙结合Object.entries()和数组的map()方法，我们能够以一种现代、高效且易于理解的方式，将JavaScript对象的键值对转换为结构化的对象数组。这种模式在处理API响应或重构前端数据时非常常见，掌握它将大大提升你的JavaScript数据处理能力。
