JavaScript：高效将对象键值对转换为结构化对象数组

本文详细介绍了如何在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()方法。

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

下载

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);

代码解析：

1. Object.entries(costCentres)：将costCentres对象转换为一个包含[key, value]子数组的数组。
2. .map(([key, value]) => { ... })：对Object.entries()生成的每个[key, value]子数组执行映射操作。
   • [key, value]：这是一个数组解构赋值，它从每个子数组中提取出键（key）和值（value）。
   • => ({ ... })：这是一个箭头函数，它返回一个新的对象。注意，如果箭头函数直接返回一个对象字面量，需要用括号()将其包围，以避免与函数体的块语句混淆。
   • 在新对象中，我们将key赋值给id属性，value赋值给name属性，并为type和chosen属性设置了固定的默认值。

这种方法的优势

1. 声明式编程风格： 代码更侧重于“做什么”而不是“如何做”，提高了可读性和维护性。
2. 函数式纯净性： map()方法不修改原始数据，而是返回一个新数组，符合函数式编程中不变性的原则。
3. 简洁性： 相较于for...in循环，代码更精炼，减少了样板代码。
4. 避免原型链问题： Object.entries()只处理对象自身的属性，无需额外的hasOwnProperty检查。
5. 链式调用： Object.entries()返回数组，可以直接在其结果上链式调用map()或其他数组方法，使代码流更顺畅。

总结

通过巧妙结合Object.entries()和数组的map()方法，我们能够以一种现代、高效且易于理解的方式，将JavaScript对象的键值对转换为结构化的对象数组。这种模式在处理API响应或重构前端数据时非常常见，掌握它将大大提升你的JavaScript数据处理能力。