数组已确认是Array类型，使用for...of为何报‘不可迭代’错误？

我写了一段代码：

let collection = [{
    name: 'music',
    views: 20
  },
  {
    name: 'abc',
    views: 32
  },
  {

    name: 'bob',
    views: 20
  }
]

for (const [k, v] of collection) {
  console.log(k, v)
}

console.log(Array.isArray(collection))

运行时报错：Error: .for is not iterable，但Array.isArray(collection)返回true。我疑惑为何数组会不可迭代？难道必须用普通for循环来获取每个元素的索引吗？

for (let i = 0; i < collection.length; i++){
    console.log(i, collection[i])
        
}

不过forEach可以正常运行：

collection.forEach((k, v) => {
    console.log(k,v)
})

想知道for...of这里出了什么问题？注：我不能使用for...in，因为需要保证遍历顺序。

问题出在你对for...of的用法理解有误：

• 数组的for...of直接遍历的是数组的元素本身，而不是键值对。你用[k, v]去解构数组元素，相当于把每个对象元素当成可迭代对象来解构，但普通对象默认不可迭代，这才触发了“不可迭代”的错误。

• 如果想通过for...of同时获取索引和元素，应该用Array.prototype.entries()方法，它会返回包含索引与对应元素的迭代器：

for (const [index, item] of collection.entries()) {
  console.log(index, item)
}

• 另外你之前的forEach写法参数顺序反了：forEach的第一个参数是数组元素，第二个才是索引，所以你写的(k, v)里，k实际是数组对象，v是索引，和你预期的逻辑相反，需要注意修正。

内容的提问来源于stack exchange，提问作者ThomasRones