JavaScript中for-of遍历split生成的sequence数组无输出问题排查

核心问题 #

你提前在全局声明了sequenceArray = sequence.split("")，但此时sequence是空字符串，生成的数组也为空。后续点击start按钮更新sequence时，sequenceArray不会自动同步，所以遍历这个始终为空的数组自然没有任何输出。

修复方案 #

不要提前初始化sequenceArray，而是在需要遍历sequence的时机，实时调用sequence.split('')生成对应数组；同时建议补全未声明的变量，避免全局污染。

关键修改点 #

1. 删除全局的const sequenceArray = sequence.split("");
2. 在test按钮点击事件中，实时生成数组再遍历：

test.addEventListener("click", function(){
    const sequenceArray = sequence.split("");
    for(let light of sequenceArray){
        console.log(light + "James");
    }
});

3. 在start按钮点击事件的循环中，直接使用实时生成的数组：

for(let light of sequence.split("")){
    console.log(light);
}

4. 给未声明的变量添加let/const：

const start = document.getElementById("start");
const reset = document.getElementById("reset");
// ...
let order = "";

修改后的完整代码 #

const colorsbutton = document.querySelectorAll('.btn');
console.log("are you there");
const possibilities = ["0", '1', '2', '3'];
const colorpossibilities = ['green', 'blue', 'yellow', 'red'];
let sequence = "";
const start = document.getElementById("start");
const reset = document.getElementById("reset");
let mySequence = "";
let j = 0
let eligibility = 0;
let lightColor = document.querySelectorAll(".btn");
const green = document.getElementById('green');
const yellow = document.getElementById('yellow');
const red = document.getElementById('red');
const blue = document.getElementById('blue');
let test = document.getElementById('test');

let l = sequence.length;
function makeGreen(){
    green.style.backgroundColor = "darkgreen";
}
function makeRed(){
    red.style.backgroundColor = 'darkred';
}
function makeYellow(){
    yellow.style.backgroundColor = '#8B8000'
}
function makeBlue(){
    blue.style.backgroundColor = 'darkblue';
}

let play = 0;

test.addEventListener("click", function(){
    const sequenceArray = sequence.split("");
    for(let light of sequenceArray){
        console.log(light + "James");
    }
});

colorsbutton.forEach(function(color){
    color.addEventListener("click", function(e){
        if(eligibility ==1){
            const square = e.currentTarget.classList;
            console.log(play);
            
            if(square.contains("green")){
               j++;
                mySequence += "0";
                green.style.backgroundColor = "green";
                setTimeout(makeGreen, 500);
               
            } else if(square.contains('blue')){
                j++;
                mySequence += "1";
                blue.style.backgroundColor = "blue";
                setTimeout(makeBlue, 500);

            } else if(square.contains('yellow')){
                j++;
                mySequence += "2";
                yellow.style.backgroundColor = "yellow";
                setTimeout(makeYellow, 500);
            } else if (square.contains('red')){
                j++;
                mySequence += "3";
                red.style.backgroundColor = "red";
                setTimeout(makeRed, 500);
            }
            if(j === sequence.length && sequence == mySequence){
                console.log("moveon");
                play++;
            } else if(j === sequence.length && sequence !== mySequence){
                console.log("You failed");
            }
           let splitSequence = sequence.split("");
            
            console.log(mySequence);
            
        }
        
    });
});

function getRandomNumber(){
    return Math.floor(Math.random()*4);
}

function moveSequence(n){
    for(let i=0; i<n;i++){
        sequence += possibilities[getRandomNumber()];
    }
}

start.addEventListener("click", function(){
   if(play % 2 == 0){ 
       play++;
        moveSequence(1);
        j=0;
        eligibility = 1;
        mySequence = "";
        console.log(sequence);
        let l = sequence.length;
        let order = "";
    } else if(play % 2!== 0){
        console.log("No more playing");
    }
    for(let light of sequence.split("")){
        console.log(light);
    }
});

reset.addEventListener("click", function(){
    console.log("Reset Successful");
    sequence = "";
    mySequence = '';
    j=0;
    play = 0;
    eligibility = 0;
})

内容的提问来源于stack exchange，提问作者Time2Payyy