将JavaScript对象转换为对象数组的教程_技术教程

本教程将详细介绍如何将一个普通javascript对象的键值对转换为一个结构化的对象数组。我们将探讨传统迭代方法的局限性，并重点演示如何利用`object.entries()`和`array.prototype.map()`这两个现代javascript方法，以更简洁、高效和函数式的方式实现这一转换，同时保持代码的清晰性和可维护性。

在前端开发中，我们经常会遇到需要将数据从一种结构转换成另一种结构的情况。例如，后端API可能返回一个以ID为键的扁平对象，而前端组件则需要一个包含详细属性（如ID、类型、名称等）的对象数组来渲染列表或表格。

假设我们有以下一个表示成本中心的JavaScript对象：

const costCentres = {
    "11738838-bf34-11e9-9c1c-063863da20d0": "Refit 2018",
    "f30d72f4-a16a-11e9-9c1c-063863da20d0": "Refit 2019",
    "f7fa34ed-a16a-11e9-9c1c-063863da20d0": "Refit 2025"
};

我们的目标是将其转换为以下结构的对象数组：

[
    {
        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 2025",
        chosen: false
    }
]

传统迭代方法及其局限性

一种常见的实现方式是使用 for...in 循环遍历对象的键，然后手动构建新的对象并推入数组。

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 进行检查，增加了代码的复杂性。

推荐的现代JavaScript方法：Object.entries() 与 map()

ES2017 引入的 Object.entries() 方法提供了一种更优雅的方式来获取对象的所有自身可枚举字符串键属性的 [key, value] 对数组。结合 Array.prototype.map() 方法，我们可以非常简洁地完成上述转换。

1. Object.entries() 的作用

Object.entries() 方法返回一个给定对象自身可枚举字符串键属性的 [key, value] 对数组。

const costCentres = {
    "11738838-bf34-11e9-9c1c-063863da20d0": "Refit 2018",
    "f30d72f4-a16a-11e9-9c1c-063863da20d0": "Refit 2019",
    "f7fa34ed-a16a-11e9-9c1c-063863da20d0": "Refit 2025"
};

const entries = Object.entries(costCentres);
console.log(entries);
/*
输出:
[
  ["11738838-bf34-11e9-9c1c-063863da20d0", "Refit 2018"],
  ["f30d72f4-a16a-11e9-9c1c-063863da20d0", "Refit 2019"],
  ["f7fa34ed-a16a-11e9-9c1c-063863da20d0", "Refit 2025"]
]
*/

2. Array.prototype.map() 的作用

map() 方法创建一个新数组，其结果是调用提供的函数后，对原数组中的每个元素进行操作。

3. 结合使用 Object.entries() 和 map()

现在，我们可以将这两个方法结合起来，实现我们的目标：

const costCentres = {
  "11738838-bf34-11e9-9c1c-063863da20d0": "Refit 2018",
  "f30d72f4-a16a-11e9-9c1c-063863da20d0": "Refit 2019",
  "f7fa34ed-a16a-11e9-9c1c-063863da20d0": "Refit 2025"
};

const 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] 对数组调用 map() 方法。
([key, value]) => ({ ... })：这是 map() 方法的回调函数。
- [key, value]：这里使用了数组解构赋值，将 map 每次迭代传入的 [key, value] 对直接解构为 key 和 value 两个独立的变量，提高了可读性。
- ({ ... })：回调函数返回一个新对象。注意，如果箭头函数直接返回一个对象字面量，需要用括号将其包裹，以避免与函数体的块语句混淆。
- 在新对象中，我们将 key 赋值给 id 属性，将 value 赋值给 name 属性。
- type: 'Cost Centre' 和 chosen: false 是我们为每个新对象添加的固定属性。这些属性的值可以根据实际需求进行动态设置。

优点

简洁性： 代码量显著减少，逻辑更清晰。
可读性： Object.entries() 和 map() 的组合意图明确，易于理解。
函数式编程： map() 是一个纯函数，它不修改原始数组，而是返回一个新数组，这符合函数式编程的原则，有助于编写更健壮、无副作用的代码。
避免 for...in 的陷阱： 无需担心原型链上的属性，Object.entries() 仅处理对象自身的属性。

总结

通过结合使用 Object.entries() 和 Array.prototype.map()，我们可以高效且优雅地将一个扁平的JavaScript对象转换为一个结构化的对象数组。这种方法不仅代码简洁，而且符合现代JavaScript的函数式编程范式，是处理此类数据转换任务的首选方案。掌握这一技巧，将有助于您编写更具可读性、可维护性和健壮性的JavaScript代码。