Javascript 为什么'；对于'；循环仅返回数组中的最后一项？

我是JavaScript的新手，我每天都尝试做一些简单的练习。你能解释一下为什么我的for循环只返回数组中的最后一项吗？提前多谢！代码是：

let button = document.querySelector ('.button');
let background = document.querySelector ('body');
let colors = ['black', 'blue', 'green', 'white', 'brown', 'yellow'];


button.addEventListener ('click', function(){
    for (let i= 0; i< colors.length; i++) {
    let index = colors [i];
    background.style.backgroundColor = index;
    }
})

let-button=document.querySelector（'.button'）；
让background=document.querySelector（'body'）；
让颜色=[‘黑色’、‘蓝色’、‘绿色’、‘白色’、‘棕色’、‘黄色’]；
button.addEventListener（'单击'，函数（））{
for（设i=0；i

---

另外，我也试过：background.style.backgroundColor=colors[I]；（不添加索引变量）。但我仍然只得到最后一种颜色，即黄色。

据我所知，您希望在单击按钮时更改元素的颜色。当你点击时，for循环会改变背景，但它会很快发生，你将无法看到。使用此代码，您可以在每次单击后通过在

colors

数组中选择下一个值来更改颜色。代码：

let button = document.querySelector('.button');
let background = document.querySelector('body');
let colors = ['black', 'blue', 'green', 'white', 'brown', 'yellow'];
let cIndex = 0;

button.addEventListener('click', function () {
    background.style.backgroundColor = colors[cIndex];
    if (cIndex >= colors.length - 1) {
        cIndex = 0;
    } else {
        cIndex++;
    }
});

解释-首先我们创建一个

cIndex

变量，从数组的开头开始。然后，每次单击按钮时，cIndex将递增，以便在下次单击按钮时获取数组中的下一个值。然后我们用if语句检查是否到达了数组的末尾。如果到达数组的末尾，我们将

cIndex

等于零，返回数组中的第一个值

为什么“for”循环只返回数组中的最后一项

因为你让它这么做。在click listener中使用的for循环将始终运行，直到达到数组的长度（

i

），这意味着最新的元素；我想你应该在每次点击时改变背景，而

对于
来说并不是一个合适的工具，你只需要在每次点击时增加一些“索引”，并从颜色数组中读取“索引”的颜色


let-button=document.querySelector（'.button'）；
让background=document.querySelector（'body'）；
让颜色=[‘黑色’、‘蓝色’、‘绿色’、‘白色’、‘棕色’、‘黄色’]；
设colorIndex=0；
button.addEventListener（'单击'，函数（））{
background.style.backgroundColor=颜色[颜色索引%colors.length]；
颜色指数++
})
更改bg
您应该将当前索引的值放在闭包中，如下所示：

let button = document.querySelector ('.button');
let background = document.querySelector ('body');
let colors = ['black', 'blue', 'green', 'white', 'brown', 'yellow'];
let index = 0;

button.addEventListener ('click', function(){
    const _index = index++;
    background.style.backgroundColor = colors[_index];
    if (index === colors.length) {
        index = 0;
    }
})

执行循环时，首先输入“黑色”，然后输入“蓝色”，依此类推。最后一把“黄色”。
颜色数组中放置的每个元素都将替换上一个元素，因此您最后看到的是“黄色”。
如果要从阵列中获取随机颜色，请执行以下操作：

let button = document.querySelector ('.button');
let background = document.querySelector ('body');
let colors = ['black', 'blue', 'green', 'white', 'brown', 'yellow'];

button.addEventListener ('click', function(){
    let r = Math.floor(Math.random() * colors.length) + 0;
    background.style.backgroundColor = colors[r];
});

请在此处阅读更多信息：
与ES7代码相同的答案


const delay=ms=>新承诺（res=>setTimeout（res，ms））
，颜色=[“橙色”、“蓝色”、“绿色”、“粉色”、“深红色”、“黄色”]
;
document.querySelector（“#按钮循环”）.onclick=async（）=>
{
对于（让颜色的颜色）
{
document.body.style.backgroundColor=颜色
等待延迟（1500）//减缓颜色变化
}
}
设colorId=-1
document.querySelector（“#按钮下一步”）.onclick=（）=>
{
colorId=++colorId%colors.length
document.body.style.backgroundColor=颜色[colorId]
}
颜色循环
color next
循环只需在每次迭代时为backgroundColor属性重新分配一个新值。什么是预期的：颜色数组？嗯，它确实会将颜色更改为黑色。然后是蓝色。然后是绿色。最后是黄色。所有这些都发生在不到一毫秒的时间内，所以你看不到。如果你想看到变化，把for循环中的内容放到setTiemout函数中。loopOne命名法的所有内容：您的循环不会“返回”任何内容。循环遍历
colors
数组中的项，并设置属性。循环中（或封闭函数中）没有
return
语句。我们将您的问题理解为“为什么“for”循环只将属性的值设置为数组中的最后一项？”即使逐个指定颜色，您的循环旋转得太快，以至于您无法看到它们（几毫秒）。据我所知，只有你名单上的最后一种颜色仍然可见。你解释得很好！谢谢！谢谢！