For-each 循环不迭代从本地存储读取的数组

Question

收到一条错误消息，指出“taskOutput 不可迭代”。 数组如下所示：

const taskOutput = JSON.parse(window.localStorage.getItem("taskList")) || [];

循环如下所示：

 for (const task of taskOutput) {
        const taskEl = document.createElement("div");
        const {participant, duetime, description} = task;

        // PROGRESSION-BAR
        let newDiv = document.createElement("div"); 
        let newBtn = document.createElement("button");
        let btnText = document.createTextNode("Fullfør");
        newBtn.appendChild(btnText);

        newDiv.style.border = "3px solid black";
        newDiv.style.height = "10px";
        newDiv.style.backgroundColor = task.color; 

        newBtn.onclick = function() {
            if(task.color === "red"){
                task.color = "green"; 
                localStorage.setItem('taskList', JSON.stringify(taskOutput)); 

            }
            else if(task.color === "green"){
                task.color = "red"; 
                localStorage.setItem('taskList', JSON.stringify(taskOutput)); 
                newDiv.style.backgroundColor = task.color; 
            }
        }

Answer 1

for...of 语句创建一个循环遍历可迭代对象，包括：内置字符串、数组、类数组对象。

解析后从 localStorage 检索时，您的 taskOuput 是 object； 使用for of循环是不可迭代的

尝试将代码更新为此，

const taskList = JSON.parse(window.localStorage.getItem("taskList")) 
const taskOutput = taskList ? [taskList] : [];