如何用 Object.entries 与 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等方法来替代实现。
总的来说,Object.entries 和 Object.fromEntries 为 Ja vaScript 的对象操作提供了极大的灵活性。掌握它们,你就能在数据格式转换的战场上更加游刃有余。
游乐网为非赢利性网站,所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系youleyoucom@outlook.com。
同类文章
uni-app怎么实现语音通话 uni-app接入声网Agora SDK步骤【教程】
uni-app实现语音通话的可靠路径:绕开WebRTC的坑,直连原生SDK 想在uni-app里实现稳定、低延迟的语音通话?直接告诉你结论:uni-app本身并不具备原生语音通话能力。指望通过H5的WebRTC或者WebSocket来模拟,在真机环境下基本行不通,延迟和稳定性都难以满足要求。真正可行
CSS如何用Less实现页面元素的等比例缩放_通过运算函数动态计算
CSS如何用Less实现页面元素的等比例缩放 Less里用calc()做等比缩放会失效? 这事儿得从根儿上讲清楚。calc()是CSS在浏览器运行时才进行的计算,而Less的变量和运算,早在代码编译成CSS的阶段就已经完成了。两者根本不在一个频道上。所以,直接写width: calc(100%
如何通过 jQuery 正确禁用页面指针事件并实现加载态遮罩
如何通过 jQuery 正确禁用页面指针事件并实现加载态遮罩 本文详解为何 $( body ) css( pointer-events , none ) 在 jQuery 中看似失效,并提供可靠、兼容性强的解决方案,包括 CSS 优先级处理、DOM 渲染时机控制及更健壮的加载态封装方式。 很多开发
CSS引入时如何解决FOUC(样式闪烁)现象_确保样式表在DOM解析前完成加载
CSS引入时如何解决FOUC(样式闪烁)现象:确保样式表在DOM解析前完成加载 FOUC(无样式内容闪烁)是浏览器在CSS文件未完全加载时就渲染HTML导致的视觉问题。核心解决思路并非被动等待样式加载,而是主动控制渲染时机,防止浏览器提前绘制无样式内容。有效策略包括样式表前置、内联关键CSS、修正m
CSS如何通过Sass封装滚动条样式_通过Mixin实现自定义CSS
CSS如何通过Sass封装滚动条样式:通过Mixin实现自定义 为什么直接写 ::-webkit-scrollbar 在 Sass 里会失效 这事儿挺常见的,很多开发者第一次尝试自定义滚动条时都会踩到这个坑。原因在于,::-webkit-scrollbar 及其一系列子伪元素(比如 ::-webki
- 日榜
- 周榜
- 月榜
1
2
3
4
5
6
7
8
9
10
相关攻略
2015-03-10 11:25
2015-03-10 11:05
2021-08-04 13:30
2015-03-10 11:22
2015-03-10 12:39
2022-05-16 18:57
2025-05-23 13:43
2025-05-23 14:01
热门教程
- 游戏攻略
- 安卓教程
- 苹果教程
- 电脑教程
热门话题

