JS数组对象操作：时间槽任务无则新增、存在则替换实现问题

原代码无法实现预期效果的核心错误有4点：

• 每次点击按钮都会重新初始化空的任务数组var tasks = []，从未读取localStorage中已存储的历史任务数据，导致每次存储都会覆盖之前的所有内容
• 字段定义不符合需求：要求使用timeDeclared作为时间标识字段，代码中错误使用time作为字段名，校验逻辑无法匹配
• 去重逻辑不完整：原add函数仅判断条目是否存在，不存在时新增，但存在时没有做替换更新，还在函数外额外执行了tasks.push(task)强行插入，会导致重复数据
• 存储结构错误：新增时写tasks.push({ task })会把task对象嵌套多一层，和预期的平级结构不符

// 页面加载时先读取本地存储的历史任务，无数据则初始化为空数组
let tasks = JSON.parse(localStorage.getItem("data")) || [];

// 页面加载时可在此处添加任务渲染逻辑，将已存任务填充到对应时间槽位置

// 绑定保存按钮事件
$("li").on("click", "button", function () {
    let wrap = $(this).parents("li");
    let info = $(wrap).find("p").text().trim();
    let timeDeclared = $(wrap).find(".slotMinutes").text().trim();
    
    // 构建符合要求的task对象
    const task = {
        timeDeclared: timeDeclared,
        info: info
    };

    // 查找当前时间槽是否已有存过的任务
    const existIndex = tasks.findIndex(el => el.timeDeclared === timeDeclared);
    if (existIndex > -1) {
        // 已存在则替换原有内容
        tasks[existIndex] = task;
    } else {
        // 不存在则新增条目
        tasks.push(task);
    }

    // 最新数组存入本地存储
    localStorage.setItem("data", JSON.stringify(tasks));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果需要页面加载时自动渲染已存任务，可以在读取完tasks数组后添加遍历逻辑：遍历tasks数组，根据每个条目的timeDeclared值匹配对应时间槽的DOM节点，把info内容填充到任务展示区域即可。

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