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

Question

最近开始在Udemy上重新做一门在线课程WDB2.0。

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

const 颜色 = ['红色', '橙色', '黄色', '绿色', '蓝色', '靛蓝', '紫色']; 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

您的代码首先将所有字母渲染为红色，然后将所有字母渲染为橙色等，然后将所有字母渲染为紫色，因为您在另一个循环中有一个循环。对于每种颜色，它使用内部 for 循环绘制所有字母，并迭代它们。这里有同样的问题，但它需要每个字母并用所有颜色绘制它，以紫色结尾。对于每个字母，您采用所有颜色。

Answer 2

这是一个不错的方法。评论里的一些想法const rainbow = document.querySelectorAll("span");const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];for (let i = 0; i < rainbow.length; i++) { // use the length of rainbow because we want all spans to have a color&nbsp; rainbow[i].style.color = colors[i % colors.length]; // cycle through colors if there are more elements in rainbow than in colors}&nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; &nbsp; <span>R</span>&nbsp; &nbsp; &nbsp; &nbsp; <span>A</span>&nbsp; &nbsp; &nbsp; &nbsp; <span>I</span>&nbsp; &nbsp; &nbsp; &nbsp; <span>N</span>&nbsp; &nbsp; &nbsp; &nbsp; <span>B</span>&nbsp; &nbsp; &nbsp; &nbsp; <span>O</span>&nbsp; &nbsp; &nbsp; &nbsp; <span>W</span>&nbsp; &nbsp; &nbsp; &nbsp; <span>R</span>&nbsp; &nbsp; &nbsp; &nbsp; <span>A</span>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </h1>

Answer 3

了解自己使用的东西console.log(i) console.log(colors[i])在内部 for 循环中。在内循环之后和外循环结束之前添加：console.log()&nbsp;&nbsp;//&nbsp;This&nbsp;will&nbsp;create&nbsp;a&nbsp;new&nbsp;line&nbsp;and&nbsp;makes&nbsp;debugging&nbsp;the&nbsp;output&nbsp;easy.一旦您了解了循环发生的情况，您就可以在以后轻松地调试不同类型的双循环。情况1：当最后一个外循环运行时i = colors.length - 1。这意味着正在使用紫色。内循环迭代彩虹一词中的所有字母，因此所有单词最终都是紫色。情况2：当外循环第一次运行时，考虑字母r。但内循环迭代从红色到紫色的所有颜色，因为最后一个颜色是紫色，所以字母 r 被分配为紫色。当外循环第二次运行时，考虑字母 a。但内循环迭代从红色到紫色的所有颜色，因为最后一个颜色是紫色，所以字母 a 被分配为紫色。。。。。。。考虑外循环最后一次运行字母 w 的时间。但内循环迭代从红色到紫色的所有颜色，因为最后一个颜色是紫色，所以字母 w 被分配为紫色。每当您陷入循环时，请使用打印语句来调试逻辑中发生的情况。

Answer 4

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