在前端开发中，我们经常会使用 Array 的 forEach() 方法来遍历数组。但是，在 IE11 上使用 forEach() 方法时会出现一些奇怪的 Bug，比如无法遍历某些数组，或者无法正确地获取数组元素的索引等问题。这些 Bug 可以给我们的开发工作带来很大的困扰。
为了解决这个问题，我们可以使用 ES6 中的 Array.from() 方法来将类数组对象转换为真正的数组。这样，即使在 IE11 上，我们也可以使用 forEach() 方法正常遍历数组了。
什么是类数组对象？
类数组对象是一种对象，它具有数组的某些特性，比如可以通过下标访问元素，具有 length 属性等。但是，它并不是真正的数组，因为它没有 Array 的原型方法，比如 forEach()、reduce() 等。
常见的类数组对象包括 arguments 对象、DOM 节点列表以及 NodeList 等。
Array.from() 方法
Array.from() 方法是 ES6 中新增的方法，用于从类数组对象或可迭代对象中创建一个新的数组实例。
它的语法如下：
Array.from(arrayLike[, mapFn[, thisArg]])
其中，arrayLike 表示要转换的类数组对象或可迭代对象，mapFn 表示可选的映射函数，thisArg 表示可选的 this 值。
下面是一个简单的示例，演示如何使用 Array.from() 方法将一个类数组对象转换为数组：
const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
const arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b', 'c']在这个示例中，我们定义了一个类数组对象 arrayLike，它包含三个元素和一个 length 属性。然后，我们使用 Array.from() 方法将它转换为了一个真正的数组 arr。
解决 IE11 上的 forEach() Bug
现在，我们已经了解了如何使用 Array.from() 方法将类数组对象转换为数组。接下来，我们可以利用这个方法来解决 IE11 上的 forEach() Bug。
具体来说，我们可以先将类数组对象转换为数组，然后再使用 forEach() 方法来遍历数组。这样，即使在 IE11 上，我们也可以正常地遍历数组了。
下面是一个示例代码，演示如何使用 ES6 解决 IE11 上的 forEach() Bug：
// 定义一个类数组对象
const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
// 将类数组对象转换为数组
const arr = Array.from(arrayLike);
// 使用 forEach() 方法遍历数组
arr.forEach((item, index) => {
console.log(`${index}: ${item}`);
});在这个示例中，我们首先定义了一个类数组对象 arrayLike，它包含三个元素和一个 length 属性。然后，我们使用 Array.from() 方法将它转换为了一个真正的数组 arr。最后，我们使用 forEach() 方法遍历数组，并打印出每个元素的索引和值。
总结
在本文中，我们介绍了 ES6 中的 Array.from() 方法，并演示了如何使用它来解决 IE11 上的 forEach() Bug。通过将类数组对象转换为数组，我们可以在 IE11 上正常地遍历数组，并避免出现奇怪的 Bug。
虽然 IE11 已经逐渐退出历史舞台，但是在一些特殊的场景下，我们仍然需要考虑兼容性问题。因此，掌握这种解决方法对于我们来说仍然是非常有价值的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c486d6add4f0e0fff0d94a