介绍 Object.fromEntries 让我们从 Object.entries 开始 输入 Object.fromEntries 我们为什么需要它 不仅仅是对象 有一件事要注意 那就是

2025-06-09

Object.fromEntries 介绍

让我们从 Object.entries 开始

输入 Object.fromEntries

我们为什么想要这个

不仅仅是物体

需要注意的一件事

就是这样

我一直很喜欢这个系列，因为它让我有机会真正深入了解其中的一些新功能。

今天，我们来看看Object.fromEntries！

让我们从 Object.entries 开始

首先要知道的是，在 ECMAScript 的早期版本中，我们引入了Object.entries。这是一个非常实用的函数，它允许我们通过将对象转换为数组来遍历对象中的键和值。

从最基本的角度来说，它像这样转换一个物体。

const obj = {a: 1, b: 2, c: 3}
const entries = Object.entries(obj)
// [['a', 1], ['b', 2], ['c', 3]]
Enter fullscreen mode Exit fullscreen mode

但更常见的用例是迭代该结果。

const obj = {a: 1, b: 2, c: 3}
const entries = Object.entries(obj)

for(const [key, value] of entries) {
    // do something with key and value here
}
Enter fullscreen mode Exit fullscreen mode

然而，当你使用时，Object.entries你的数据会被困在数组中。然后就出现了Object.fromEntries。

输入 Object.fromEntries

事实证明，Object.fromEntries只是 的逆Object.entries。请看这个例子。

const obj = {a: 1, b: 2, c: 3}
const entries = Object.entries(obj)
const newObj = Object.fromEntries(entries)
// {a: 1, b: 2, c: 3}
Enter fullscreen mode Exit fullscreen mode

这个例子除了来回修改数据结构之外什么也没做。不过，数组有这么多辅助函数，这样做的好处显而易见。

我们为什么想要这个

我们有很多很棒的函数可以用来转换数组。像map, reduce, filter, flat和flatMap.这样的函数Object.entries也让我们能够将它们用于对象。如果我们将 转换Object为 ，Array它们就可以使用了。

const obj = {a: 1, b: 2, c: 3}
const result = Object.entries(obj).map(([key, value]) => [key, value * 2]) 
// [['a', 2], ['b', 4], ['c', 6]]
Enter fullscreen mode Exit fullscreen mode

但是如果没有它Object.fromEntries，我们的转换就只能停留在Array结构体中了。有了它的添加，我们就可以这样做了！

const obj = {a: 1, b: 2, c: 3}
const result = Object.fromEntries(
         Object.entries(obj).map(
            ([key, value]) => [key, value * 2]
         ))
// {a: 2, b: 4, c: 6}
Enter fullscreen mode Exit fullscreen mode

不仅仅是物体

这个函数的一大优点是它适用于所有可迭代对象。这意味着你可以将 变成Array，Object也可以将Map变成Object。

const map = new Map([ ['a', 1], ['b', 2], ['c', 3] ]);
const obj = Object.fromEntries(map);
// {a: 1, b: 2, c: 3}
Enter fullscreen mode Exit fullscreen mode

需要注意的一件事

Object和的区别在于Array后者不需要唯一键。这意味着Object.fromEntries可能会导致您丢失信息。

const arr = [['a', 1], ['a', 2], ['c', 3]]
const entries = Object.fromEntries(arr)
// {a: 2, c: 3}
Enter fullscreen mode Exit fullscreen mode

在这个例子中，我们丢失了值1。

就是这样

就这样！能够使用所有数组操作函数来操作对象真是太有用了！这样就能Object.fromEntries结束之前创建的循环了Object.entries。

希望您享受我们的 ES2019 乐趣！

鏂囩珷鏉ユ簮锛�https://dev.to/laurieontech/introducing-object-fromentries-1d5l
Devto 翻译
PREV
JavaScript Map 正在更新！
NEXT
介绍 `findLast` 和 `findLastIndex`