彻底理解 `Object.entries()` + `map()`：如何把对象转换成指定格式数组？

在前端开发中，我们经常需要把 对象（Object） 转换成 特定格式的数组（Array），比如在 ECharts、Ant Design 等 UI 库中渲染图表或表格时，数据通常需要转换成 { name: "xxx", value: 123 } 这样的格式。

这时候，Object.entries() + map() 组合就成了一个常用的解决方案。但很多人（包括我自己😅）经常记不住这个方法，或者写的时候参数顺序混乱。

今天，我们就 彻底拆解 这个方法，从核心概念到实际应用，让你 一次记住，并且能灵活运用！

1. 问题场景：如何把对象转换成 [{ name: "xxx", value: 123 }] 的格式？

假设我们有一个对象：

const data = {
  "主机安全": 200,
  "恶意软件": 600,
  "APT攻击": 300,
  "勒索病毒": 400
};

我们希望把它转换成：

[
  { name: "主机安全", value: 200 },
  { name: "恶意软件", value: 600 },
  { name: "APT攻击", value: 300 },
  { name: "勒索病毒", value: 400 }
]

方法：

const result = Object.entries(data).map(([name, value]) => ({ name, value }));

但很多人（包括我自己）会困惑：

1. Object.entries() 是什么？为什么能转成数组？
2. map(([name, value]) => ({ name, value })) 是什么意思？为什么能转换？
3. 为什么参数写成 [name, value] 而不是 (name, value)？

下面，我们 彻底拆解 这个方法！

---

2. 核心概念解析

(1) Object.entries(obj)：把对象转成键值对数组

Object.entries() 的作用是 把一个对象转换成一个二维数组，每个元素是一个 [key, value]。

示例：

const data = { a: 1, b: 2 };
const entries = Object.entries(data);
console.log(entries); // [ ["a", 1], ["b", 2] ]

理解：

• Object.entries() 返回的是 数组的数组（二维数组）。
• 每个内部数组是一个 [key, value] 对。

---

(2) map()：遍历数组并转换元素

map() 的作用是 遍历数组，并对每个元素进行转换，返回一个新的数组。

示例：

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

理解：

• map() 不会修改原数组，而是返回一个新数组。
• 它会对数组的 每个元素 执行回调函数，并返回一个新的值。

---

(3) 结合 Object.entries() + map()

现在，我们把这两个方法结合起来，看看如何把对象转换成 [{ name: "", value: 0 }] 的格式。

步骤拆解

1. Object.entries(data)
   把对象变成 [ [key, value], [key, value], ... ] 的形式：

   const entries = Object.entries(data);
   // [ ["主机安全", 200], ["恶意软件", 600], ... ]
   

2. .map(([name, value]) => ({ name, value }))
   遍历这个二维数组，并把每个 [key, value] 转换成 { name: key, value }：

   const result = entries.map(([name, value]) => ({
       name,  // 等同于 name: name
       value  // 等同于 value: value
   }));
   

最终代码：

const data = { "主机安全": 200, "恶意软件": 600, "APT攻击": 300, "勒索病毒": 400 };

const result = Object.entries(data).map(([name, value]) => ({ name, value }));

console.log(result);

输出：

[
  { name: "主机安全", value: 200 },
  { name: "恶意软件", value: 600 },
  { name: "APT攻击", value: 300 },
  { name: "勒索病毒", value: 400 }
]

---

3. 为什么容易忘？如何记住？

(1) 为什么容易忘？

• 方法太多：JavaScript 有很多数组和对象的方法（map、filter、reduce、Object.keys() 等），容易混淆。
• 参数顺序：map(([name, value]) => ...) 的解构写法可能让人困惑。
• 缺乏实践：没有经常使用，容易遗忘。

(2) 如何记住？

✅ 理解核心逻辑：

• Object.entries() → 把对象变成 [ [key, value], ... ]。
• map() → 遍历数组，转换每个元素。

✅ 多写多练：

• 自己动手写几次，比如：

  const data = { a: 1, b: 2 };
  const result = Object.entries(data).map(([k, v]) => ({ key: k, val: v }));
  console.log(result); // [ { key: "a", val: 1 }, { key: "b", val: 2 } ]
  

✅ 联想记忆：

• Object.entries() → “对象转数组”（Object → Array）
• map() → “映射”（把每个元素变成新的东西）

✅ 画图辅助：

原始对象: { "主机安全": 200, "恶意软件": 600 }
↓ Object.entries()
[ ["主机安全", 200], ["恶意软件", 600] ]
↓ map(([name, value]) => ({ name, value }))
[ { name: "主机安全", value: 200 }, { name: "恶意软件", value: 600 } ]

---

4. 类似场景练习

为了加深理解，你可以尝试类似的问题：

1. 把 { x: 10, y: 20 } 转成 [{ key: "x", val: 10 }, { key: "y", val: 20 }]

   const obj = { x: 10, y: 20 };
   const result = Object.entries(obj).map(([key, val]) => ({ key, val }));
   console.log(result);
   

2. 把 { a: "apple", b: "banana" } 转成 [{ label: "a", text: "apple" }, { label: "b", text: "banana" }]

   const fruits = { a: "apple", b: "banana" };
   const result = Object.entries(fruits).map(([label, text]) => ({ label, text }));
   console.log(result);
   

---

5. 总结

• Object.entries(obj) → 把对象变成 [ [key, value], ... ]。
• .map(([k, v]) => ({ ... })) → 遍历并转换成新格式。
• 记忆技巧：
  • Object.entries() → “对象转数组”
  • map() → “映射”
  • 多写多练，画图辅助理解。

这样，你应该能彻底理解这个转换过程了！如果还有疑问，欢迎继续讨论 😊

---

推荐更多阅读内容
深入理解 Object.entries()：基础用法与 Object.keys() 的核心区别
轻松掌握 Object.fromEntries：JavaScript中的实用技巧
深入理解 window.open：用法、参数、兼容性与安全实践
使用 react-org-tree 实现卡片模式组织架构图
JSON.parse(JSON.stringify()) 与 lodash 的 cloneDeep：深度拷贝的比较与基础知识
你的网站正在裸奔？Lodash原型链污染漏洞引发的“全员恶人“事件
从“上移下移“到“无限套娃“：树形结构排序的魔法指南
当表单遇上强迫症：如何用React完美匹配后端数据结构