ES10 之 Object.fromEntries-JavaScript中文网-JavaScript教程资源分享门户

ES10 是 JavaScript 的最新版本，其中包含了许多新的语言特性和 API，其中之一就是 Object.fromEntries()。

Object.fromEntries() 简介

Object.fromEntries() 是一个新的静态方法，它允许你将一个二维数组（key-value 数组）转换为一个对象。这个方法的写法非常简单，只需要传入一个二维数组，然后就会返回一个对象。

const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }

Object.fromEntries() 的用途

Object.fromEntries() 主要用途是将一个二维数组转换为一个对象，它非常适用于需要将数据转换为对象的场景。

举个例子，如果你有一个表格，它的第一列是属性名，第二列是对应的属性值，那么你可以使用 Object.fromEntries() 将它转换为一个对象，如下所示：

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

const rows = Array.from(document.querySelectorAll('tbody tr'));
const entries = rows.map(row => [row.childNodes[0].textContent, row.childNodes[1].textContent]);
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: '18', gender: 'male' }

通过以上代码我们可以看出，Object.fromEntries() 很方便地将表格数据转换成了一个对象。

与 Object.entries() 的对比

Object.fromEntries() 和 Object.entries() 是互逆的方法。Object.entries() 是将对象转换成二维数组的方法，举个例子：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries); // [ ['a', 1], ['b', 2], ['c', 3] ]

而且我们还可以使用 Object.fromEntries() 和 Object.entries() 很方便地实现许多操作。

例如，我们可以使用 Object.entries() 将对象的属性进行排序：

const obj = { b: 2, a: 1, c: 3 };
const entries = Object.entries(obj).sort((a, b) => a[0].localeCompare(b[0]));
console.log(entries); // [ ['a', 1], ['b', 2], ['c', 3] ]

然后使用 Object.fromEntries() 将二维数组转换成对象：

const obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }

以上代码中，我们对 obj 进行排序，然后使用 Object.fromEntries() 将二维数组转换成对象，这就是 Object.fromEntries() 和 Object.entries() 的联合使用。

兼容性问题

Object.fromEntries() 是 ES10 中新增的一个方法，因此它的兼容性可能存在问题。但是我们可以通过 babel 来进行转换。

首先，我们要安装 @babel/plugin-proposal-object-rest-spread 这个插件：

npm install --save-dev @babel/plugin-proposal-object-rest-spread

然后，在项目的 .babelrc 文件中添加：

{
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

重新编译代码之后，就可以在旧版本的浏览器中使用 Object.fromEntries() 了。

总结

Object.fromEntries() 是一个很好的方法，它可以将一个二维数组转换为一个对象，非常方便。与 Object.entries() 的联合使用，我们可以很方便地实现许多操作。

在实际开发中，我们可以在表格转对象，对象转表格，对象属性排序等情况下使用它。但需要注意的是它的兼容性问题，必须通过 babel 进行转换。

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