首页 > 网页制作 >如何用 Object.entries 与 fromEntries 实现对象数组转换

如何用 Object.entries 与 fromEntries 实现对象数组转换

来源：互联网 2026-04-28 21:45:08

如何用 Object.entries 与 fromEntries 实现对象数组转换在 Ja vaScript 的日常开发中，我们常常需要在对象和数组这两种结构之间来回转换。这时候，Object.entries 和 Object.fromEntries 这对“黄金搭档”就派上用场了。它们一个负责“拆

如何用 Object.entries 与 fromEntries 实现对象数组转换

在 Ja vaScript 的日常开发中，我们常常需要在对象和数组这两种结构之间来回转换。这时候，Object.entries 和 Object.fromEntries 这对“黄金搭档”就派上用场了。它们一个负责“拆解”，一个负责“组装”，配合起来能高效地实现对象与键值对数组之间的双向转换。虽然它们本身不直接处理对象数组，但结合 map 等方法，就能在对象数组的批量处理中大显身手。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

一、Object.entries：把单个对象转成二维数组

先来看看“拆解专家” Object.entries。它的工作很明确：接收一个对象，然后将其自身的、可枚举的字符串键属性，转换成一个二维数组。数组里的每一项都是一个 [key, value] 对，顺序与对象属性的枚举顺序保持一致。

看个简单的例子就明白了：

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj));
// 输出结果： [['a', 1], ['b', 2], ['c', 3]]

瞧，一个规整的二维数组就出来了，后续无论是遍历、过滤还是映射，操作起来都像处理普通数组一样方便。

二、Object.fromEntries：把二维数组还原为对象

有拆就有装。Object.fromEntries 正是 Object.entries 的逆操作。它接收一个可迭代对象（最常见的就是数组），要求其中每一项都是一个长度为2的数组 [key, value]，然后将其“缝合”成一个标准的对象。

比如：

const entries = [['x', 10], ['y', 20]];
console.log(Object.fromEntries(entries));
// 输出结果： { x: 10, y: 20 }

这个过程是不是很像把散落的零件重新组装成机器？二者一拆一装，构成了一个完美的闭环。

三、在对象数组中批量应用：常见转换场景

那么，面对一个对象数组时，我们该如何运用这对组合拳呢？关键在于结合数组的 map 方法，对数组中的每个对象进行逐个处理。以下是几个典型的应用场景：

场景一：把对象数组转为“键值对数组的数组”
有时候，我们需要深入每个对象的内部结构进行操作。这时可以先对每个对象调用 Object.entries。

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 }
];

const entriesArray = users.map(obj => Object.entries(obj));
console.log(entriesArray);
// 输出结果：
// [
//   [['name', 'Alice'], ['age', 30]],
//   [['name', 'Bob'], ['age', 25]]
// ]

场景二：把对象数组转为 Map 映射（如按某字段索引）
想快速根据某个字段（如用户名）来查找整个用户对象？可以先用 map 提取出 [key, value] 对，再用 fromEntries 一键生成映射对象。

// 按 name 字段构造 { name: user } 映射
const nameMap = Object.fromEntries(
  users.map(user => [user.name, user])
);
console.log(nameMap);
// 输出结果：
// {
//   Alice: { name: 'Alice', age: 30 },
//   Bob: { name: 'Bob', age: 25 }
// }

场景三：筛选并重组对象结构
这是更高级的用法，展示了链式操作的威力：先 entries 拆开，然后进行过滤或修改，最后再 fromEntries 还原成一个新对象。

// 只保留 age > 27 的字段，并转为小写键名
const filtered = users.map(user =>
  Object.fromEntries(
    Object.entries(user)
      .filter(([k, v]) => k === 'age' && v > 27)
      .map(([k, v]) => [k.toLowerCase(), v])
  )
);
// 输出结果： [{ age: 30 }, {}]

四、注意事项与边界情况

当然，任何强大的工具都有其使用边界，了解这些能避免踩坑：

属性范围：Object.entries 只遍历对象自身的可枚举字符串键属性，它会忽略原型链上的属性。
键名冲突：Object.fromEntries 在遇到重复的 key 时，后出现的值会覆盖先出现的值。
格式要求：传给 Object.fromEntries 的数组，每一项都必须是长度为 2 的可迭代对象。像 [key] 或 [key, val, extra] 这样的结构会导致运行时错误。
Symbol 键处理：需要特别注意，Object.entries 不支持 Symbol 键。如果你的对象使用了 Symbol 作为属性名，可以考虑使用 Reflect.ownKeys 配合 Object.getOwnPropertyDescriptor 等方法来替代实现。