遍历NodeList时如何引用数组索引？

需求说明 #

需要遍历页面中的所有<span>元素，按顺序为每个元素分配colors数组中的颜色（第一个span设为red，第二个orange，以此类推）。

初始错误代码 #

最初尝试的代码无法生效，原因是错误地将DOM元素作为数组索引：

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; //PLEASE DON'T CHANGE THIS LINE!

const allSpans = document.querySelectorAll('span')

for(let span of allSpans){
    span.style.color = colors[span]
}

错误原因：colors[span]中的span是DOM节点对象，不是数字类型的索引值，数组无法通过非数字索引获取对应元素，因此颜色设置无效。

现有可行代码 #

通过手动维护计数器实现了需求，但代码不够简洁：

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; //PLEASE DON'T CHANGE THIS LINE!

const allSpans = document.querySelectorAll('span')

let element = 0
for(let span of allSpans){
    span.style.color = colors[element]
    element++
}

优化写法 #

以下几种写法更简洁且符合现代JavaScript的编码习惯：

1. 整合计数器到for循环

将计数器变量直接融入for循环的声明中，省去额外的变量定义：

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const allSpans = document.querySelectorAll('span');

for (let i = 0; i < allSpans.length; i++) {
  allSpans[i].style.color = colors[i];
}

2. 利用NodeList原生forEach方法（推荐）

NodeList原生支持forEach方法，回调函数会传入当前元素和对应的索引，直接用索引匹配colors数组的顺序即可：

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const allSpans = document.querySelectorAll('span');

allSpans.forEach((span, index) => {
  span.style.color = colors[index];
});

这种写法语义清晰，无需手动维护计数器，是最简洁高效的实现方式。

3. 转换为数组后操作（适用于需要数组方法的场景）

如果需要对元素集合使用更多数组方法，可以将NodeList转换为数组后再遍历：

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const allSpans = document.querySelectorAll('span');

// 使用Array.from转换
Array.from(allSpans).forEach((span, index) => {
  span.style.color = colors[index];
});

// 或使用扩展运算符转换
[...allSpans].forEach((span, index) => {
  span.style.color = colors[index];
});

总结 #

推荐使用NodeList原生的forEach方法实现需求，代码简洁且可读性强，能直接利用回调参数中的索引完成颜色的顺序匹配。

内容的提问来源于stack exchange，提问作者Nathan Guidry