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

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

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

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

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

  rainbow[i].style.color = colors[i % colors.length]; // cycle through colors if there are more elements in rainbow than in colors

}

    <h1>

        <span>R</span>

        <span>A</span>

        <span>I</span>

        <span>N</span>

        <span>B</span>

        <span>O</span>

        <span>W</span>

        <span>R</span>

        <span>A</span>        

    </h1>

Answer 3

了解自己使用的东西

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。这意味着正在使用紫色。内循环迭代彩虹一词中的所有字母，因此所有单词最终都是紫色。

情况2：当外循环第一次运行时，考虑字母r。但内循环迭代从红色到紫色的所有颜色，因为最后一个颜色是紫色，所以字母 r 被分配为紫色。

当外循环第二次运行时，考虑字母 a。但内循环迭代从红色到紫色的所有颜色，因为最后一个颜色是紫色，所以字母 a 被分配为紫色。。。。。。。考虑外循环最后一次运行字母 w 的时间。但内循环迭代从红色到紫色的所有颜色，因为最后一个颜色是紫色，所以字母 w 被分配为紫色。

每当您陷入循环时，请使用打印语句来调试逻辑中发生的情况。

Answer 4

Const spans = document.querySelectorAll('span');

        for(let i=0; i<=colors.length ; i++){

              spans[i].style.color = colors[i];

        }