根据数组为文档中的所有跨度设置不同的字体颜色？

使用 JavaScript，我想<span>从颜色数组中更改每个样式。下面是一个例子：

HTML：

        <span>H</span>
        <span>E</span>
        <span>L</span>
        <span>L</span>
        <span>O</span>

JS：

colors=['red', 'orange', 'yellow', 'blue','green'];
[...document.querySelectorAll('span')].map( sp => {
         sp.style.color = colors[0];
         colors.shift();
});

现在我目前的想法是扩展我的选择和使用，map以便我可以遍历每个对象。目前，我正在删除正在使用的颜色中的元素。我还可以创建一个迭代器来跟踪颜色，这样它们就不会被删除。假设对象的数量和颜色的数量相同，我也可以通过 for 循环逐步完成并设置颜色。

我怎样才能做到这一点？

回答

colors = ['red', 'orange', 'yellow', 'blue', 'green'];
document.querySelectorAll('span').forEach((sp, ind) => {
  sp.style.color = colors[ind];
});

<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>