首頁猿問雙循環僅應用于數組的最后一項

雙循環僅應用于數組的最后一項

JavaScript

絕地無雙 2023-07-29 16:42:36

最近開始在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] }}我一直在與雙循環作斗爭，如果您能解釋我做錯了什么，我將非常感激。非常感謝！

查看完整描述

4 回答

翻閱古今

TA貢獻1780條經驗獲得超5個贊

您的代碼首先將所有字母渲染為紅色，然后將所有字母渲染為橙色等，然后將所有字母渲染為紫色，因為您在另一個循環中有一個循環。對于每種顏色，它使用內部 for 循環繪制所有字母，并迭代它們。
這里有同樣的問題，但它需要每個字母并用所有顏色繪制它，以紫色結尾。對于每個字母，您采用所有顏色。

反對回復 2023-07-29

浮云間

TA貢獻1829條經驗獲得超4個贊

這是一個不錯的方法。評論里的一些想法

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>

反對回復 2023-07-29

慕桂英546537

TA貢獻1848條經驗獲得超10個贊

了解自己使用的東西

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 被分配為紫色。

每當您陷入循環時，請使用打印語句來調試邏輯中發生的情況。

反對回復 2023-07-29

UYOU

TA貢獻1878條經驗獲得超4個贊

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

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

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

}

反對回復 2023-07-29

4 回答
0 關注
181 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

雙循環僅應用于數組的最后一項

雙循環僅應用于數組的最后一項

4 回答

添加回答