解决 ES8 object.entries() 在 IE11 中兼容性问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会用到 ES6/ES7/ES8 的新语法，如 Object.entries()。然而，在 IE11 浏览器中，这些新语法并不被支持，会导致脚本运行出错。因此，本篇文章将介绍如何解决 ES8 Object.entries() 在 IE11 中兼容性问题。

ES8 Object.entries()

Object.entries() 是一个非常实用的方法，它可以将一个对象的所有属性和属性值以数组形式返回。该方法返回的数组中，每一项都是一个包含两个元素的数组，其中第一个元素是属性名，第二个元素是属性对应的值。

例如，我们有一个对象 person，它包含了姓名 name 和年龄 age 两个属性：

const person = { name: 'Tom', age: 18 };

我们可以使用 Object.entries() 方法将其转换为一个数组：

const entries = Object.entries(person);
// entries 将会是 [['name', 'Tom'], ['age', 18]]

这样的话，我们就可以使用 forEach() 方法遍历这个数组，方便地取出对象的属性名和属性值：

entries.forEach(([key, val]) => console.log(`${key}: ${val}`));
// 输出结果：
// name: Tom
// age: 18

在 IE11 中使用 Object.entries() 报错

尽管 Object.entries() 方法非常方便，但在 IE11 中使用它却会报错：

const person = { name: 'Tom', age: 18 };
const entries = Object.entries(person); // 在 IE11 中运行此行代码会报错！

报错信息如下：

Object doesn't support property or method 'entries'

这是因为 IE11 并不支持 Object.entries() 方法。那么该如何解决这个问题呢？

解决方法

为了解决这个问题，我们需要手动实现一个 Object.entries() 方法。具体来说，我们需要做以下两件事情：

实现一个名为 objectEntries() 的函数，它会将一个对象的所有属性和属性值以数组形式返回。
在 IE11 中使用 objectEntries() 函数代替 Object.entries() 方法。

接下来，我们来具体实现这两个步骤。

实现 objectEntries() 函数

要实现 objectEntries() 函数，我们需要使用 for...in 循环来遍历对象的所有属性，并将属性名和属性对应的值存储到一个数组中。

function objectEntries(obj) {
  const result = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result.push([key, obj[key]]);
    }
  }
  return result;
}

在这个函数中，我们首先定义了一个 result 数组来存储结果。然后，使用 for...in 循环遍历 obj 对象的所有属性，并使用 hasOwnProperty() 方法来确保遍历到的属性是 obj 对象本身的属性，而不是其原型链上的属性。

每次遍历时，我们将属性名和属性对应的值以数组形式存储到 result 数组中。最后，返回 result 数组作为函数的返回值。

在 IE11 中使用 objectEntries() 函数

现在我们已经实现了一个可以替代 Object.entries() 方法的 objectEntries() 函数。接下来，我们需要在 IE11 中使用这个函数。

我们可以在需要使用 Object.entries() 方法的地方，使用以下代码代替：

const entries = Object.entries ? Object.entries(person) : objectEntries(person);

这段代码首先判断当前运行环境中是否存在 Object.entries() 方法。如果存在，就使用该方法；否则，就调用我们自己实现的 objectEntries() 函数。

示例代码

下面是一个完整的示例代码，其中我们尝试在 IE11 中使用 Object.entries() 方法，但由于其不被支持，我们使用 objectEntries() 函数代替其功能来完成相同的操作。

function objectEntries(obj) {
  const result = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result.push([key, obj[key]]);
    }
  }
  return result;
}

const person = { name: 'Tom', age: 18 };
const entries = Object.entries ? Object.entries(person) : objectEntries(person);

entries.forEach(([key, val]) => console.log(`${key}: ${val}`));

总结

本篇文章介绍了如何解决在 IE11 中使用 ES8 Object.entries() 方法的兼容性问题。具体来说，我们实现了一个名为 objectEntries() 的函数来替代 Object.entries() 方法，在需要使用 Object.entries() 方法的地方，使用该函数代替即可。这样，我们就可以在 IE11 中使用 Object.entries() 方法，从而方便地获取对象的属性名和属性值了。

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