Logo

菜单

发布于 2026-01-06 10 阅读
0

JavaScript Object.fromEntries()

JavaScript Object.fromEntries()

替代文字

我们有了Object.entries()将对象转换为数组的方法。但如果你想反过来操作呢？别再疑惑了！使用 ` Object.fromEntries()to array → object` 函数即可👏

const keyValuePair = [
  ['cow', '🐮'],
  ['pig', '🐷'],
];

Object.fromEntries(keyValuePair);
// { cow: '🐮', pig: '🐷' }

Object.fromEntries 101

我们先来了解一下对象的构成。对象是由键和值组成的。

const object = {
  key: 'value',
};

好的，我们按照这个逻辑来处理。如果我们想把某个东西转换成一个对象，我们需要传递一个满足这两个条件的东西：键和值。

满足这些要求的论证类型有两种：

  1. 包含嵌套键值对的数组
  2. 地图对象

数组 → 对象，使用 Object.fromEntries

这是一个包含键值对的嵌套数组。

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
];

当我们Object.fromEntries对它进行应用时，我们可以从中获得我们的对象。

Object.fromEntries(nestedArray);

// { key 1: "value 1", key 2: "value 2"}

映射 → 对象，使用 Object.fromEntries

JavaScript ES6 为我们带来了一个名为map 的新对象，它与对象非常相似。

TC39：Map 对象是键/值对的集合，其中键和值都可以是任意 ECMAScript 语言值。

要了解有关 Map 及其与 Object 之间区别的更多信息，请查看MDN 文档。

让我们创建一个新的 Map 对象

// Using the constructor
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
]);

// OR we can use the instance method, "set"
const map = new Map();
map.set('key 1', 'value 1');
map.set('key 2', 'value 2');

// RESULT
// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

现在让我们使用以下方法将地图转换为对象：Object.fromEntries

Object.fromEntries(map);

// { key 1: "value 1", key 2: "value 2"}

对于其他类型的 Object.fromEntries，出现 TypeError

尝试将其他数据类型传递给它时要小心Object.fromEntries。所有这些都会抛出错误🚨

❌ 未捕获的类型错误

类型
不明确的 Object.fromEntries(undefined)
无效的 Object.fromEntries(null)
布尔值 Object.fromEntries(true)
数字 Object.fromEntries(100)
细绳 Object.fromEntries("hi")
目的 Object.fromEntries({key: "value"})
单值数组 Object.fromEntries([1,2,3])

请确保只传递键值对 👍

Object.fromEntries 与 Object.entries

Object.fromEntries它会反转之前的操作Object.entries。因此，Object.entries它会转换我们的数组，并返回一个新的嵌套键值对数组。然后，它Object.fromEntries会将该数组转换回对象。

const object = { key1: 'value1', key2: 'value2' };

const array = Object.entries(object);
// [ ["key1", "value1"], ["key2", "value2"] ]

Object.fromEntries(array);
// { key1: 'value1', key2: 'value2' }

对象到对象转换

如果你读过TC39的原始提案，就会明白引入这个新方法的原因。引入该方法后Object.entries，没有简单的方法可以将结果转换回对象。

我们选择使用 `String` 类型Object.entries，通常是因为它让我们能够访问许多便捷的数组方法，例如 `getArray()` 和 `getString()` filter。但是转换之后，我们就只能使用转换后的数组了。

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' };

// 😖 Stuck in Array land
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
);
// [ ["broccoli", "🥦"], ["carrot", "🥕"] ]

终于不用再这样了！我们可以使用所有那些实用的数组方法，同时还能取回我们的对象。对象到对象的转换终于实现了👏

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' };

// 😄 Yay, still in Object land
const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
);
// { broccoli: '🥦', carrot: '🥕' }

将数组转换为对象的替代方法

Object.fromEntries该功能于 2019 年推出，因此仍然相当新。所以，让我们看看还有其他方法可以将键值对数组转换为支持更好的对象。

ES6 Reduce 将数组转换为对象

将数组转换为对象的一种常用方法是使用reduce。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);

function toObject(pairs) {
  return Array.from(pairs).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value }),
    {},
  );
}

toObject(array);
toObject(map);

// RESULT
// { key1: 'value1', key2: 'value2' }

用于将数组转换为对象的库

Underscore 和 Lodash 都提供了将键值对转换为对象的功能。

下划线

_。目的

将数组转换为对象。可以传入单个 [键，值] 对列表，也可以传入键列表和值列表。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];

_.object(array);
// { key1: 'value1', key2: 'value2' }

下划线

_.fromPairs

_.toPairs 的逆方法；此方法返回一个由键值对组成的对象。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];

_.fromPairs(array);
// { key1: 'value1', key2: 'value2' }

浏览器支持

除了 Internet Explorer 之外，大多数主流浏览器都支持这种方法 👍

浏览器
铬合金 ✅
火狐浏览器 ✅
狩猎之旅 ✅
边缘 ✅
Internet Explorer ❌

社区意见

  • @lifeiscontent：使用这种方法要小心，如果你无法控制所处理的数据，如果数据中有重复项，你就会丢失这些数据！！

资源

感谢阅读❤
想了解更多代码技巧，请访问samanthaming.com

🎨 Instagram 🌟推特 👩🏻‍💻 SamanthaMing.com
文章来源：https://dev.to/samanthaming/javascript-object-fromentries-46fa
Git 工作流程
HTMX DEV 全球展示挑战赛简...