使用forEach，[]。forEach.call（...）或Array.prototype.

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”，但是第二个感觉更具可读性。还是两者都一样，这意味着两者都可以吗？

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>

Answer 2

您还可以使用传播语法

[...document.getElementsByClassName('dummy')].forEach((e) => {

  e.classList.add('test')

});

.test {

  color: green;

}

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

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

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>