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>

使用forEach，[]。forEach.call（...）或Array.prototype.slice.call（...）。forEach迭代类似数组的对象？

3 个答案: