ES10 中的 Object.fromEntries() 方法和 toEntries() 方法详解-JavaScript中文网-JavaScript教程资源分享门户

ES10 是现代 JavaScript 语言的一个重要版本，其中新增了多个有用的方法和功能，其中包括 Object.fromEntries() 和 toEntries() 方法。本文将详细介绍这两个方法的用法和应用场景，并提供示例代码。

Object.fromEntries()

从方法名可以看出，Object.fromEntries() 方法是通过键值对数组创建一个新的对象。该方法可以接受一个参数，参数必须是一个可迭代对象，且迭代对象的每一个元素都是一个长度为 2 的数组，如下所示：

Object.fromEntries([ ['prop1', 'value1'], ['prop2', 'value2'] ]); // { prop1: 'value1', prop2: 'value2' }

上述代码将一个包含两个键值对的数组传递给 Object.fromEntries() 方法，该方法返回一个新的对象，该对象包含两个属性，分别是 prop1 和 prop2，其对应的值分别为 value1 和 value2。

Object.fromEntries() 方法与 Object.entries() 方法正好相反。Object.entries() 接受一个对象作为参数，返回该对象所有可枚举属性的键值对数组。而 Object.fromEntries() 则接受一个数组，返回一个新的对象。

toEntries()

toEntries() 方法也是一个常常被忽略的方法，它是 Object.entries() 方法的内部实现，用于将一个对象转换为键值对数组。这个方法可以用于自定义 Object.entries() 实现。示例代码如下：

-- -------------------- ---- -------
-------------------------- - ---------- -
  --- ------- - ---
  --- ------ --- -- ----- -
    -- -------------------------- -
      ------------------ ------------
    -
  -
  ------ --------
--

----- --- - - ------ --------- ------ -------- --
----------------------------- -- - --------- ---------- --------- --------- -

上述代码在 Object.prototype 上定义了 toEntries() 方法，该方法使用 for in 循环迭代对象中的所有可枚举属性，如果对象自身包含指定的属性，则将其添加到键值对数组中。最后返回包含所有键值对的数组。

可以看到，toEntries() 方法可以替代 Object.entries() 方法，用于将一个对象转换为键值对数组。

应用场景

Object.fromEntries() 和 toEntries() 方法可以用于处理对象和键值对数组间的转换，并且在某些场景下非常有用。

一个常见的应用场景是将查询参数转换为对象。考虑一个 URL，包含一些查询参数，如下所示：

https://example.com/?foo=bar&baz=qux

可以通过解析查询参数来获取 URL 上的参数信息，如下所示：

const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('foo')); // 'bar'
console.log(searchParams.get('baz')); // 'qux'

但这并不能方便地将查询参数转换为一个对象。这时候 Object.fromEntries() 方法就可以发挥作用了，如下所示：

const queryObject = Object.fromEntries(searchParams.entries());
console.log(queryObject.foo); // 'bar'
console.log(queryObject.baz); // 'qux'

可以看到，我们通过 Object.fromEntries() 方法将查询参数转换为了一个包含两个属性的对象，这样我们就可以更方便地处理这些参数了。

总结：

ES10 中的 Object.fromEntries() 和 toEntries() 方法可以用于对象和键值对数组的转换，以及其他应用场景中。这些方法虽然不像一些新的特性那样炫酷，但它们非常实用，值得我们好好研究和学习。

感谢阅读这篇文章，希望对您有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/649a742248841e9894757150