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

Question

最近开始在 Udemy 上重做在线类(class) WDB2.0。

目标是使用 javascript 选择器根据彩虹颜色使字母数组中的每个字母都变成 RAINBOW 颜色。

const color = ['红色', '橙色', '黄色', '绿色', '蓝色', '靛蓝', '紫色'];html代码:https://pastebin.com/uDAA1UaP

我通过编写以下代码成功完成了练习:

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

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

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

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

我一直在与双循环作斗争，如果您能解释我做错了什么，我将非常感激。

非常感谢!

Answer 1

1. 您的代码首先将所有字母渲染为红色，然后将所有字母渲染为橙色等，然后​​将所有字母渲染为紫色，因为您在另一个循环中有一个循环。对于每种颜色，它使用内部 for 循环绘制所有字母，并迭代它们。

2. 这里有同样的问题，但它使用每个字母并用所有颜色绘制它，以紫色结尾。对于每个字母，您采用所有颜色。