Laravel+Vue项目中移除数组重复对象元素问题求助

核心问题点 #

1. 数组引用关联：this.newlyCreatedItems = this.newItems 是直接赋值引用而非拷贝数组，导致后续修改newItems时，newlyCreatedItems会同步被修改，彻底失去“已保存项列表”的作用。
2. 循环删除索引错位：嵌套循环中用splice(i, 1)删除元素，会使newItems数组长度缩短，后续i索引会跳过元素，出现漏判或错误删除的情况。
3. 状态维护缺失：保存成功后未正确合并已保存项，也未重置newItems状态，导致重复数据持续累积。

修复后的代码 #

saveNewSettings() {
    // 过滤出newItems中未在已保存列表里的新项
    const itemsToSave = this.newItems.filter(item => {
        return !this.newlyCreatedItems.some(savedItem => savedItem.id === item.id);
    });

    // 仅当有新项时发起请求
    if (itemsToSave.length) {
        settingsService.save(itemsToSave)
            .then(response => {
                // 合并本次保存的项到已保存列表（用扩展运算符做浅拷贝，避免引用关联）
                this.newlyCreatedItems = [...this.newlyCreatedItems, ...itemsToSave];
                // 清空newItems，准备接收下一次编辑内容
                this.newItems = [];
            })
            .catch(error => {
                console.error('保存失败:', error);
            });
    }
}

额外优化建议 #

• 如果newItems中的对象是复杂嵌套结构，建议用深拷贝保存到newlyCreatedItems，避免后续修改原对象影响已保存记录，比如JSON.parse(JSON.stringify(item))或lodash的cloneDeep方法。
• 检查window.postMessage接收数据的逻辑，确保是正确添加新数据到newItems，而非重复追加或错误覆盖，这也是可能产生重复数据的源头之一。

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