ES10 新增方法 Object.fromEntries()，让数组快速转化为对象

在前端开发中，将数组转化为对象是一种常见的操作。在 ES10 中，新添加了 Object.fromEntries() 方法，用来快速将一个二维数组（如键值对数组）转化为一个对象。这个方法不仅可以简化开发过程，还能提升代码性能。

用法

Object.fromEntries() 方法接受一个数组作为参数，这个数组的每个元素都应该是一个数组，该数组的第一个元素表示对象的键名，第二个元素表示键名对应的值。例如：

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

深度探究

转换数组为对象的方法

在 ES5 中，转换数组为对象的方法有多种，如使用 for 循环、reduce() 方法、map() 方法，以下是使用 for 循环实现的方法：

const arr = [['a', 1], ['b', 2], ['c', 3]];
const obj = {};
for (let i = 0; i < arr.length; i++) {
  obj[arr[i][0]] = arr[i][1];
}
console.log(obj); // {a: 1, b: 2, c: 3}

但是，使用这些方法时，需要更多的代码和时间来实现，而且在大量数据的情况下，性能可能不足。这就是 Object.fromEntries() 方法引入的原因。

Polyfill

由于该方法是 ES10 新增的，因此早期的浏览器和环境不一定支持 Object.fromEntries() 方法。我们可以使用 polyfill 实现兼容性。将以下代码复制到项目中：

if (!Object.fromEntries) {
  Object.fromEntries = function (arr) {
    return arr.reduce(function (acc, curr) {
      acc[curr[0]] = curr[1];
      return acc;
    }, {});
  };
}

实际应用

Object.fromEntries() 可以简化代码并使代码更加易读。例如，我们要编写一个请求参数的函数，将参数数组转换为参数对象。以下是一个传统的实现方式：

function makeParams(paramsArr) {
  const paramsObj = {};
  for (let i = 0; i < paramsArr.length; i++) {
    paramsObj[paramsArr[i][0]] = paramsArr[i][1];
  }
  return paramsObj;
}

使用 Object.fromEntries() 方法后，上面的方法可以简化如下：

function makeParams(paramsArr) {
  return Object.fromEntries(paramsArr);
}

这个方法的性能也更优秀，尤其是在大量数据的情况下。

总结

Object.fromEntries() 方法为数组转换为对象提供了一种更加简单、有效的方式，能够使开发人员更加专注于业务逻辑的实现。此外，使用该方法还能提升代码的性能。我们期待着在未来的 ECMAScript 版本中看到更多类似于此的方法的出现。

示例代码

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

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

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

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