JavaScript数组出现重复副本问题排查及解决

现象 #

• 调用console.log打印数组时，出现两个数组副本：一个为空数组，另一个包含通过push添加的对象
• 刷新页面（通过localStorage持久化数组）后，数组依然存在完全重复的副本

相关代码 #

let projectArray = [];

const saveProjectArray = JSON.parse(localStorage.getItem("projectList"));
projectArray = saveProjectArray;

allTask.addEventListener('click', (e) => {
    saveProjectArray.forEach(element => {
        console.log(`Name: ${element.name}`);
    });
});

function Project(name, id){
    this.name = name;
    this.id = id;
}

function makeProject(projectName){

    const newProjectObj = new Project(projectName, getId);

    //Code
    
    projectArray.push(newProjectObj);

    localStorage.setItem('projectList', JSON.stringify(projectArray));
}

排查步骤 #

• 尝试删除localStorage相关代码后，问题依旧存在

问题解决（更新） #

问题源于webpack.config.js的脚本打包配置：为每个脚本单独设置入口，导致脚本被重复调用两次，调整打包配置后问题已解决。

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