游乐游手机版
首页/前端开发/文章详情

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

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

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

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

在 Ja vaScript 的日常开发中,我们常常需要在对象和数组这两种结构之间来回转换。这时候,Object.entriesObject.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 等方法来替代实现。

总的来说,Object.entriesObject.fromEntries 为 Ja vaScript 的对象操作提供了极大的灵活性。掌握它们,你就能在数据格式转换的战场上更加游刃有余。

来源:https://www.php.cn/faq/2327486.html
上一篇如何用 enumerable 描述符控制属性在 for-in 循环中枚举 下一篇Layui表格reload重载时如何彻底清空之前的搜索参数
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
HTML双英雄图精准居中与并排对齐实战指南
前端开发 · 2026-07-04

HTML双英雄图精准居中与并排对齐实战指南

本文详解如何使用CSS Flexbox将两个英雄图在页面中水平居中、等高对齐,并保持50px间距,解决justify-content align-items单独作用于子元素无效的问题。 想让两个视觉冲击力十足的英雄图在首页并排居中,是提升首屏吸引力的经典设计。但很多开发者都踩过同一个坑:直接在 `

Flexbox实现div水平垂直居中的方法
前端开发 · 2026-07-04

Flexbox实现div水平垂直居中的方法

使用 Flexbox 实现 div 的水平垂直居中,推荐在父容器上设置 display: flex,并配合 justify-content: center(控制主轴居中)与 align-items: center(控制交叉轴居中),同时确保父容器拥有明确高度,例如 min-height: 100vh

React循环中正确管理多个独立Modal实例的方法
前端开发 · 2026-07-04

React循环中正确管理多个独立Modal实例的方法

在 React 开发中,我们常常会遇到这样的场景:需要在一个列表循环里渲染多个弹窗(Modal)。如果处理不当,点击任何一个按钮,都会导致所有的弹窗同时打开或关闭,这显然不是我们想要的效果。问题的根源在于状态管理:当多个 Modal 实例共享同一份控制其显示隐藏的状态时,它们的行为就被捆绑在了一起。

鼠标滚动切换图片与7秒无操作自动轮播完整教程
前端开发 · 2026-07-04

鼠标滚动切换图片与7秒无操作自动轮播完整教程

本文介绍如何结合鼠标滚轮交互与定时器机制,实现图片在用户滚动时手动切换、7秒无操作后自动轮播的双重功能,并提供可复用、多实例支持的现代化 JavaScript 解决方案。 在网页开发中,图片轮播组件虽然常见,但许多实现方案在用户体验上仍存遗憾。例如,完全依赖用户滚动切换的轮播,当用户停止操作专注查看

输入新城市自动清除旧天气数据实现方法
前端开发 · 2026-07-04

输入新城市自动清除旧天气数据实现方法

本文详解如何借助 JavaScript 在用户切换查询城市时,自动清空先前展示的天气信息,避免新旧数据混杂叠加,从而优化单页应用的交互体验。 在基于 OpenWeather API 打造天气查询工具时,很多开发者都会遇到一个颇为棘手的小问题:用户查完一个城市后,紧接着输入另一个城市名称,页面上新旧天