在 ECMAScript 2019 (ES12) 中，新增了两个方法 Object.fromEntries() 和 Object.entries()，这两个方法对于前端开发者来说非常实用。本文将详细介绍这两个方法的用法和实际应用场景，并提供示例代码，帮助读者更好地理解。
Object.fromEntries()
Object.fromEntries() 方法接受一个键值对数组，返回一个新的对象。该方法与 Object.entries() 相反，后者将一个对象转换为一个键值对数组。
下面是一个简单的示例，演示如何使用 Object.fromEntries() 方法将一个键值对数组转换为一个对象：
const entries = [
['foo', 'bar'],
['baz', 42]
];
const obj = Object.fromEntries(entries);
console.log(obj); // {foo: "bar", baz: 42}在这个示例中，我们首先定义了一个键值对数组 entries，然后使用 Object.fromEntries() 方法将其转换为一个对象 obj。最终输出结果是 {foo: "bar", baz: 42}。
我们还可以使用 Object.fromEntries() 方法来转换一个 Map 对象，如下所示：
const map = new Map([
['foo', 'bar'],
['baz', 42]
]);
const obj = Object.fromEntries(map);
console.log(obj); // {foo: "bar", baz: 42}在这个示例中，我们首先创建了一个 Map 对象，然后使用 Object.fromEntries() 方法将其转换为一个对象 obj。最终输出结果与前面的示例相同。
Object.entries()
Object.entries() 方法接受一个对象，返回一个键值对数组。该方法与 Object.fromEntries() 相反，后者将一个键值对数组转换为一个对象。
下面是一个简单的示例，演示如何使用 Object.entries() 方法将一个对象转换为一个键值对数组：
const obj = {
foo: 'bar',
baz: 42
};
const entries = Object.entries(obj);
console.log(entries); // [["foo", "bar"], ["baz", 42]]在这个示例中，我们首先定义了一个对象 obj，然后使用 Object.entries() 方法将其转换为一个键值对数组 entries。最终输出结果是 [["foo", "bar"], ["baz", 42]]。
我们还可以使用 Object.entries() 方法来迭代一个对象的属性和值，如下所示：
-- -------------------- ---- ------- ----- --- - - ---- ------ ---- -- -- --- ------ ----- ------ -- -------------------- - -------------------- ----------- - -- ------- -- ---- --- -- ---- --
在这个示例中，我们首先定义了一个对象 obj，然后使用 Object.entries() 方法迭代其属性和值。最终输出结果是：
foo: bar baz: 42
应用场景
Object.fromEntries() 和 Object.entries() 方法在实际开发中有很多应用场景。下面是一些示例：
将 URL 参数转换为对象
在 Web 开发中，我们经常需要将 URL 参数转换为对象。下面是一个示例，演示如何使用 Object.fromEntries() 方法将 URL 参数转换为对象：
const urlSearchParams = new URLSearchParams('?foo=bar&baz=42');
const obj = Object.fromEntries(urlSearchParams.entries());
console.log(obj); // {foo: "bar", baz: "42"}在这个示例中，我们首先创建了一个 URLSearchParams 对象，然后使用 Object.fromEntries() 方法将其转换为一个对象 obj。最终输出结果是 {foo: "bar", baz: "42"}。
将对象转换为 FormData
在 Web 开发中，我们经常需要将一个对象转换为 FormData。下面是一个示例，演示如何使用 Object.entries() 方法将一个对象转换为 FormData：
-- -------------------- ---- ------- ----- --- - - ---- ------ ---- -- -- ----- -------- - --- ----------- --- ------ ----- ------ -- -------------------- - -------------------- ------- - ---------------------- -- -------- ----- ------ ---- -----
在这个示例中，我们首先定义了一个对象 obj，然后使用 Object.entries() 方法迭代其属性和值，并将它们添加到 FormData 中。最终输出结果是 FormData {foo: "bar", baz: "42"}。
总结
Object.fromEntries() 和 Object.entries() 是 ECMAScript 2019 (ES12) 中新增的方法，它们可以方便地将一个键值对数组和一个对象之间进行转换。在实际开发中，这两个方法有很多应用场景，例如将 URL 参数转换为对象和将对象转换为 FormData。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660d5328d10417a222daabaa