ES9 新特性：Object.fromEntries() 的 Polyfill 实现-JavaScript中文网-JavaScript教程资源分享门户

ES9 新特性：Object.fromEntries() 的 Polyfill 实现

在 ES9 中引入了一个新的方法 Object.fromEntries()，可以将一个包含键值对的数组转成对象。但是，由于该方法较新，可能在一些低版本浏览器中不被支持。因此，需要使用 Polyfill 进行实现，以便在旧版浏览器中也能使用该方法。

Object.fromEntries() 方法的语法如下：

Object.fromEntries(iterable)

其中，iterable 是一个键值对的数组或其他可迭代的对象。

下面我们来实现一下该方法的 Polyfill。

判断浏览器是否支持 Object.fromEntries() 方法。

我们可以使用以下代码来判断浏览器是否支持该方法。

if (!Object.fromEntries) {
  // 在这里进行 Polyfill 实现
}

实现 Object.fromEntries() 方法的 Polyfill

我们可以通过遍历一个键值对的数组来创建一个新的对象，代码如下：

if (!Object.fromEntries) {
  Object.fromEntries = function (iterable) {
    return [...iterable].reduce((obj, [key, val]) => {
      obj[key] = val;
      return obj;
    }, {});
  }
}

该 Polyfill 方法使用了 ES6 中的箭头函数、解构赋值以及展开运算符。具体实现过程如下：

首先，我们通过 ES6 的解构赋值将 iterable 数组中的键值分离出来。

然后，我们使用 reduce() 方法，将键值对逐个添加到一个新对象中。

最终，我们返回新对象。

测试使用

现在我们可以测试一下实现的 Polyfill 是否能够正常工作。例如，我们可以将以下数组转成对象：

const data = [
  ['a', 1],
  ['b', 2],
  ['c', 3],
];

我们可以使用以下代码进行测试：

const result = Object.fromEntries(data);
console.log(result);

如果 Polyfill 工作正常，运行结果应该如下：

{ a: 1, b: 2, c: 3 }

通过上面的代码可以看到，Polyfill 能够在不支持 Object.fromEntries() 方法的浏览器中正常运行。

总结

通过实现 Object.fromEntries() 的 Polyfill，我们可以让在旧版浏览器中也能够使用该方法。同时，本文还介绍了一些较新的 JavaScript 语法，例如箭头函数、解构赋值以及展开运算符等，有助于我们更好地掌握 JavaScript 中的新特性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653df2947d4982a6eb78fb4a