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

本教程将详细介绍如何在javascript中，将一个普通对象的键值对转换为一个包含特定结构的对象数组。我们将探讨使用`object.entries()`结合数组的`map()`方法，以声明式、简洁且高效的方式实现这一常见数据转换需求，避免传统循环的冗余，并提升代码可读性和维护性。

引言：对象到数组的转换需求

在JavaScript开发中，我们经常会遇到需要对数据结构进行转换的场景。其中一个常见需求是将一个扁平化的键值对对象转换为一个结构更丰富的对象数组。例如，有一个表示成本中心的映射对象，我们可能需要将其转换为一个包含id、name以及其他固定属性（如type和chosen）的对象数组，以便于在前端组件中渲染或进行进一步的数据处理。

假设我们有以下成本中心对象：

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

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

[
    {
        id: "11738838-bf34-11e9-9c1c-063863da20d0",
        type: "Cost Centre",
        name: "Refit 2018",
        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);

这种方法虽然功能上可行，但相对而言代码较为冗长，且for...in循环在某些情况下可能会遍历到原型链上的属性，需要额外的hasOwnProperty检查来确保只处理对象自身的属性。在现代JavaScript中，有更简洁、更函数式的方法可以实现相同的目标。

使用 Object.entries() 和 map() 进行转换

ES6引入的Object.entries()方法，结合数组的map()方法，提供了一种优雅且高效的解决方案。

理解 Object.entries()

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

例如，对costCentres对象使用Object.entries()：

大师兄智慧家政

58到家打造的AI智能营销工具

99

查看详情

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

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 2020"]
]

结合 map() 方法

现在我们得到了一个包含[key, value]对的数组，可以利用数组的map()方法对其进行迭代和转换。map()方法会创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。

在map()的回调函数中，我们可以使用数组解构赋值([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"
};

const 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]数组的每个元素执行一个回调函数。
3. ([key, value]) => ({...})：这是map的回调函数。
   • [key, value]：使用数组解构赋值，将当前迭代的[key, value]对直接解构为key和value两个变量。
   • ({...})：返回一个新的对象字面量。注意，如果箭头函数直接返回一个对象字面量，需要用括号()将其包裹，以避免与函数体的块语句{}混淆。
   • 在新对象中，我们将解构出的key赋值给id属性，value赋值给name属性，并添加了固定的type和chosen属性。

最终，centresToEntities将是一个符合我们预期的对象数组。

方法优势与适用场景

这种结合Object.entries()和map()的方法具有以下显著优势：

• 代码简洁性与可读性： 将转换逻辑浓缩为一行或几行代码，意图清晰，易于理解。
• 声明式编程风格： 这种方法描述了“我们想要什么”而不是“如何去做”，符合现代JavaScript的函数式编程范式，提高了代码的抽象级别。
• 避免 for...in 的潜在问题： Object.entries()只处理对象自身的、可枚举的字符串键属性，无需额外的hasOwnProperty检查，避免了遍历原型链的风险。
• 链式调用： Object.entries()返回一个数组，可以直接在其结果上链式调用其他数组方法（如filter、reduce等），进一步处理数据。

注意事项

• 属性类型： Object.entries()只处理对象自身的、可枚举的字符串键属性。Symbol键和不可枚举的属性不会被包含在内。
• 性能： 对于包含数万甚至数十万个属性的超大型对象，虽然map和Object.entries通常是高效的，但在极端性能敏感的场景下，仍需进行基准测试。但在绝大多数日常应用中，这种方法的性能是完全足够的。

总结

通过本教程，我们学习了如何利用JavaScript中强大的Object.entries()和数组map()方法，将一个对象的键值对高效地转换为一个结构化的对象数组。这种现代的编程模式不仅使代码更加简洁、可读，而且遵循了函数式编程的原则，是处理类似数据转换需求的最佳实践。掌握这一技巧将显著提升您在JavaScript中进行数据操作的效率和代码质量。

以上就是JavaScript：高效将对象键值转换为结构化对象数组的详细内容，更多请关注php中文网其它相关文章！