在 ECMAScript 2019 (ES12) 中，新增了两个方法 Object.fromEntries() 和 Object.entries()，这两个方法对于前端开发者来说非常实用。本文将详细介绍这两个方法的用法和实际应用场景，并提供示例代码，帮助读者更好地理解。
Object.fromEntries()
Object.fromEntries() 方法接受一个键值对数组，返回一个新的对象。该方法与 Object.entries() 相反，后者将一个对象转换为一个键值对数组。
下面是一个简单的示例，演示如何使用 Object.fromEntries() 方法将一个键值对数组转换为一个对象：
----- ------- - - ------- ------- ------- --- -- ----- --- - ---------------------------- ----------------- -- ----- ------ ---- ---
在这个示例中，我们首先定义了一个键值对数组 entries，然后使用 Object.fromEntries() 方法将其转换为一个对象 obj。最终输出结果是 {foo: "bar", baz: 42}。
我们还可以使用 Object.fromEntries() 方法来转换一个 Map 对象，如下所示：
----- --- - --- ----- ------- ------- ------- --- --- ----- --- - ------------------------ ----------------- -- ----- ------ ---- ---
在这个示例中，我们首先创建了一个 Map 对象，然后使用 Object.fromEntries() 方法将其转换为一个对象 obj。最终输出结果与前面的示例相同。
Object.entries()
Object.entries() 方法接受一个对象，返回一个键值对数组。该方法与 Object.fromEntries() 相反，后者将一个键值对数组转换为一个对象。
下面是一个简单的示例，演示如何使用 Object.entries() 方法将一个对象转换为一个键值对数组：
----- --- - - ---- ------ ---- -- -- ----- ------- - -------------------- --------------------- -- -------- ------- ------- ----
在这个示例中，我们首先定义了一个对象 obj，然后使用 Object.entries() 方法将其转换为一个键值对数组 entries。最终输出结果是 [["foo", "bar"], ["baz", 42]]。
我们还可以使用 Object.entries() 方法来迭代一个对象的属性和值，如下所示：
----- --- - - ---- ------ ---- -- -- --- ------ ----- ------ -- -------------------- - -------------------- ----------- - -- ------- -- ---- --- -- ---- --
在这个示例中，我们首先定义了一个对象 obj，然后使用 Object.entries() 方法迭代其属性和值。最终输出结果是：
---- --- ---- --
应用场景
Object.fromEntries() 和 Object.entries() 方法在实际开发中有很多应用场景。下面是一些示例：
将 URL 参数转换为对象
在 Web 开发中，我们经常需要将 URL 参数转换为对象。下面是一个示例，演示如何使用 Object.fromEntries() 方法将 URL 参数转换为对象：
----- --------------- - --- ----------------------------------- ----- --- - ---------------------------------------------- ----------------- -- ----- ------ ---- -----
在这个示例中，我们首先创建了一个 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