javascript - 在 for-of 循环中使用 entries()，遍历 HTMLCollection

Question

我知道在一个for-of循环中，可以使用该Array.entries()方法。正如概述的那样，这通常很好用 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries。

但是，如果我尝试执行以下操作：

for (const [i, foo] of document.getElementsByClassName('foo').entries())
{
  console.log(`i = ${i}, foo = ${foo}`);
}

我被告知：

Uncaught TypeError: document.getElementsByClassName.entries is not a function or its return value is not iterable

我知道我可以使用一个很好的旧常规 for 循环......但是：

我最好的猜测是 anHTMLCollection不是标准数组，因此没有这样的数字索引......

score 1 · Accepted Answer

Entries 方法可用于数组。但是，getElementsByClassName不返回数组。相反，它返回一个HTMLCollection. 您需要先将其转换为数组。有两种方法可以做到这一点：

function toArray(arr) {
  return Array.prototype.slice.call(arr);
}

toArray(document.getElementsByClassName('foo'));

function toArray(arr) {
  return [...arr];
}

toArray(document.getElementsByClassName('foo'));

score 0 · Accepted Answer

getElementsByClassName不给数组，但是 NodeList

for (const [i, foo] of [].entries.call(document.getElementsByClassName('foo')))
{
  console.log(`i = ${i}, foo = `, foo);
}

javascript - 在 for-of 循​​环中使用 entries()，遍历 HTMLCollection