Javascript 双循环仅应用于数组的最后一项

最近开始在Udemy上重新学习WDB2.0在线课程

目标是使用javascript选择器，根据彩虹颜色，使字母数组中的每个字母都具有彩虹颜色

const colors=[“红色”、“橙色”、“黄色”、“绿色”、“蓝色”、“靛蓝”、“紫色”]； html代码：

我已通过编写以下代码完成了练习：

const rainbow= document.querySelectorAll("span");
for (let letter of rainbow){
    letter.style.color=colors[0];
    colors.shift() 
}

我的问题是为什么以下代码都不起作用？它们都将整个文本涂成紫色，而不是根据颜色数组的索引将每个字母涂成紫色： (一)

for（设i=0；i
您的代码首先将所有字母呈现为红色，然后将所有字母呈现为橙色e.t.c，然后将所有字母呈现为紫色，因为您在另一个循环中有一个循环。对于每种颜色，它使用内部For循环绘制所有字母，并对其进行迭代


这里也有同样的问题，但它把每个字母都画上所有的颜色，以紫色结尾。每个字母你都画上所有的颜色


了解自己使用的东西

console.log(i)
console.log(colors[i])

在内部for循环中。
在内环之后和外环结束之前添加：

console.log()  // This will create a new line and makes debugging the output easy. 

一旦您了解了循环发生了什么，您以后也可以轻松地调试不同类型的双循环

案例1：
当最后一个外部循环运行时
i=colors.length-1
。这意味着正在使用紫色。
内部循环遍历单词rainbow中的所有字母，因此所有单词都以紫色结尾

案例2：
当外循环第一次运行字母r时，会考虑。但是内循环迭代从红色到紫色的所有颜色，因为最后一种颜色是紫色，所以字母r被指定为紫色

当外循环第二次运行字母a时，会考虑。但是内循环迭代从红色到紫色的所有颜色，因为最后一种颜色是紫色，所以字母a被指定为紫色。
.
.
.
.
.
.
上一次外循环运行字母w时会被考虑。但内循环会迭代从红色到紫色的所有颜色，因为最后一种颜色是紫色，所以字母w被指定为紫色

每当遇到循环时，使用print语句调试逻辑发生的情况。
这里有一个不错的方法。在注释中有一些想法


const rainbow=document.queryselectoral（“span”）；
常量颜色=[‘红色’、‘橙色’、‘黄色’、‘绿色’、‘蓝色’、‘靛蓝’、‘紫色’]；
对于（让i=0；i


R
A.
我
N
B
O
W
R
A.
Const span=document.queryselectoral（'span'）；
for（让i=0；iHi Yan，感谢您的快速回复！我已将解决方案更改为：const rainbow=document.queryselectoral（“span”）；for（设i=0；iHi Rodages！如果你对每个循环迭代所有颜色，结果将始终是数组的最后一种颜色。如果你想按照你的方法进行，你不需要双循环。你可以使用第一个循环的索引来选择数组颜色中的位置。嗨，James，谢谢你的建议和解释代码的注释。感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。A将通过说明这是一个很好的问题解决方案的原因，极大地提高其长期价值，并使其对未来有其他类似问题的读者更有用。请在您的答案中添加一些解释，包括您所做的假设。While此链接可能会回答问题，最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能会无效。-您的
颜色
数组和打印
span.id
值的内容将很有帮助。否则，将无法显示请找出这个问题的原因。
console.log(i)
console.log(colors[i])

console.log()  // This will create a new line and makes debugging the output easy. 

Const spans = document.querySelectorAll('span');
        for(let i=0; i<=colors.length ; i++){
              spans[i].style.color = colors[i];
        }