ES9 之 Object.entries() 的 Polyfill 实现

在 ES9 中，新增了一个 Object.entries() 方法，它返回一个给定对象自身可枚举属性的键值对数组。然而，在一些老的浏览器中，这个方法并不被支持。因此，我们需要手动实现一个 Polyfill，以便在这些浏览器中使用该方法。

Polyfill 实现

我们可以通过以下代码实现 Object.entries() 的 Polyfill：

// javascriptcn.com 代码示例
if (!Object.entries) {
  Object.entries = function(obj) {
    var ownProps = Object.keys(obj),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];

    return resArray;
  };
}

这段代码中，我们首先判断当前环境中是否已经支持 Object.entries() 方法，如果没有，我们就手动实现一个。具体地，我们先使用 Object.keys() 方法获取对象的所有可枚举属性，并将其保存在 ownProps 数组中。然后，我们遍历 ownProps 数组，为每个属性创建一个键值对，并将它们保存在 resArray 数组中。最后，我们返回这个数组。

示例代码

我们来看一下如何使用 Object.entries() 方法以及它的 Polyfill。

// javascriptcn.com 代码示例
// 示例对象
var obj = { foo: 'bar', baz: 42 };

// 使用 ES9 中的 Object.entries() 方法
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 42]]

// 使用 Polyfill 实现的 Object.entries() 方法
if (!Object.entries) {
  Object.entries = function(obj) {
    var ownProps = Object.keys(obj),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];

    return resArray;
  };
}

console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 42]]

在上面的代码中，我们首先定义了一个示例对象 obj。然后，我们先使用 ES9 中的 Object.entries() 方法打印出 obj 的所有键值对。接着，我们手动实现了一个 Object.entries() 方法，并再次打印出 obj 的所有键值对。可以看到，这两次打印结果是相同的。

总结

Object.entries() 方法是 ES9 中新增的方法，它返回一个给定对象自身可枚举属性的键值对数组。在一些老的浏览器中，这个方法并不被支持。因此，我们需要手动实现一个 Polyfill，以便在这些浏览器中使用该方法。本文介绍了如何实现 Object.entries() 的 Polyfill，并给出了示例代码。

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