首頁(yè) 猿問(wèn) 雙循環(huán)僅應(yīng)用于數(shù)組的最后一項(xiàng)

雙循環(huán)僅應(yīng)用于數(shù)組的最后一項(xiàng)

JavaScript

絕地?zé)o雙 2023-07-29 16:42:36

最近開(kāi)始在Udemy上重新做一門(mén)在線課程WDB2.0。目標(biāo)是使用 javascript 選擇器根據(jù)彩虹顏色使字母數(shù)組中的每個(gè)字母都變成 RAINBOW 顏色。const 顏色 = ['紅色', '橙色', '黃色', '綠色', '藍(lán)色', '靛藍(lán)', '紫色']; html代碼： https: //pastebin.com/uDAA1UaP我通過(guò)編寫(xiě)以下代碼成功完成了練習(xí)：const rainbow= document.querySelectorAll("span");for (let letter of rainbow){ letter.style.color=colors[0]; colors.shift() }我的問(wèn)題是為什么以下代碼都不起作用？他們都將整個(gè)文本涂成紫色，而不是根據(jù)顏色數(shù)組的索引將每個(gè)字母涂成紫色：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] }}我一直在與雙循環(huán)作斗爭(zhēng)，如果您能解釋我做錯(cuò)了什么，我將非常感激。非常感謝！

查看完整描述

4 回答

翻閱古今

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊

您的代碼首先將所有字母渲染為紅色，然后將所有字母渲染為橙色等，然后將所有字母渲染為紫色，因?yàn)槟诹硪粋€(gè)循環(huán)中有一個(gè)循環(huán)。對(duì)于每種顏色，它使用內(nèi)部 for 循環(huán)繪制所有字母，并迭代它們。
這里有同樣的問(wèn)題，但它需要每個(gè)字母并用所有顏色繪制它，以紫色結(jié)尾。對(duì)于每個(gè)字母，您采用所有顏色。

反對(duì) 回復(fù) 2023-07-29

浮云間

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

這是一個(gè)不錯(cuò)的方法。評(píng)論里的一些想法

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>

R

A

I

N

B

O

W

R

A

</h1>

反對(duì) 回復(fù) 2023-07-29

慕桂英546537

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超10個(gè)贊

了解自己使用的東西

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

在內(nèi)部 for 循環(huán)中。在內(nèi)循環(huán)之后和外循環(huán)結(jié)束之前添加：

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

一旦您了解了循環(huán)發(fā)生的情況，您就可以在以后輕松地調(diào)試不同類型的雙循環(huán)。

情況1：當(dāng)最后一個(gè)外循環(huán)運(yùn)行時(shí)i = colors.length - 1。這意味著正在使用紫色。內(nèi)循環(huán)迭代彩虹一詞中的所有字母，因此所有單詞最終都是紫色。

情況2：當(dāng)外循環(huán)第一次運(yùn)行時(shí)，考慮字母r。但內(nèi)循環(huán)迭代從紅色到紫色的所有顏色，因?yàn)樽詈笠粋€(gè)顏色是紫色，所以字母 r 被分配為紫色。

當(dāng)外循環(huán)第二次運(yùn)行時(shí)，考慮字母 a。但內(nèi)循環(huán)迭代從紅色到紫色的所有顏色，因?yàn)樽詈笠粋€(gè)顏色是紫色，所以字母 a 被分配為紫色。。。。。。?？紤]外循環(huán)最后一次運(yùn)行字母 w 的時(shí)間。但內(nèi)循環(huán)迭代從紅色到紫色的所有顏色，因?yàn)樽詈笠粋€(gè)顏色是紫色，所以字母 w 被分配為紫色。

每當(dāng)您陷入循環(huán)時(shí)，請(qǐng)使用打印語(yǔ)句來(lái)調(diào)試邏輯中發(fā)生的情況。

反對(duì) 回復(fù) 2023-07-29