使用forEach、[].forEach.call(...)或者Array.prototype.slice.call(...).forEach来迭代类数组对象？

Question

我们可以使用以下两种方法对类数组对象进行迭代：

let arrayLike = document.getElementsByClassName('dummy');

[].forEach.call(arrayLike, (e) => {
  console.log(e);
});

<div class = "dummy">Test1</div>
<div class = "dummy">Test2</div>

或者先使用slice将类数组对象转换为数组：

let arrayLike = document.getElementsByClassName('dummy');

Array.prototype.slice.call(arrayLike).forEach((e) => {
  console.log(e);
});

<div class = "dummy">Test1</div>
<div class = "dummy">Test2</div>

哪一种更可取，为什么在我不需要转换的类似数组对象的情况下？第一种方法感觉有点“hacky”，但第二种方法更易读。或者两者都一样，意思是两者都可以？

- Richard

---

[...arrayLike].forEach() or Array.from(arrayLike) - adiga

另一个选项是 for...of。 - hindmost

Answer 1

您可以使用Array.from将类似数组的对象转换为真正的数组。然后使用一些数组方法进行迭代。

let array = Array.from(document.getElementsByClassName('dummy'));

array.forEach((e) => {
    console.log(e);
});

<div class = "dummy">Test1</div>
<div class = "dummy">Test2</div>

- Nina Scholz

---

这只在ES6（2015）中支持，我觉得这有点新？我确实认为它更加简洁，但担心它的支持情况。 - Richard

除非您计划支持<=IE11，否则看起来您不需要使用polyfill：[链接]（http://kangax.github.io/compat-table/es6/#test-Array_static_methods_Array.from,_array-like_objects_a_href=_https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Array_from_an_Array-like_object_(arguments)_title=_MDN_documentation_img_src=_../mdn.png_alt=_MDN_(Mozilla_Development_Network)_logo_width=_15_height=_13_/_/a_nbsp;) - maazadeeb

你可以使用箭头函数和let关键字，它在几乎所有浏览器中都有支持，除了IE。 - Nina Scholz

我不打算支持IE11以下的浏览器，如果有的话 xD 谢谢你的回答。 - Richard

哦，我刚刚发现我使用的东西是来自ES6的。我白担心了。 - Richard

Answer 2

你也可以使用扩展语法

[...document.getElementsByClassName('dummy')].forEach((e) => {
  e.classList.add('test')
});

.test {
  color: green;
}

<div class="dummy">Test1</div>
<div class="dummy">Test2</div>

- brk

Answer 3

使用 Array.from、slice 或 ...（展开）：

var divs = [...document.getElementsByClassName('dummy')]
divs.forEach(d => console.log(d));
var divs2 = Array.from(document.getElementsByClassName('dummy'));
divs2.forEach(d => console.log(d));
var divs3 = Array.from(document.getElementsByClassName('dummy'));
divs3.forEach(d => console.log(d));

<div class="dummy">Test1</div>
<div class="dummy">Test2</div>

- Jack Bashford