原生JavaScript遍历对象数组应用模板所有结果与最后一项一致问题排查

问题原因 #

你遇到的是JS对象浅拷贝+引用传递的典型坑点，核心问题出在两个地方：

1. cleanData里用的Object.assign({}, d2)是浅拷贝，如果模板里有嵌套的对象/数组，嵌套层还是会和原模板共享引用，每次调用cleanData修改嵌套属性时，其实是在修改同一个内存地址里的内容，后续调用会直接覆盖之前的处理结果，最终所有返回值都和最后一次处理的对象一致。
2. 第一个判断逻辑写反了：if((d1[element] instanceof Object) && (Array.isArray(d1[element]))) 实际是在判断是不是数组，和你注释写的“是对象但不是数组”完全相反，也会导致嵌套属性处理逻辑错乱。

修复方案 #

1. 替换浅拷贝为深拷贝 #

用原生JS的深拷贝方法，确保每次调用cleanData都是完全独立的新对象，不会修改全局模板：

// 把原来的 let _copy = Object.assign({}, d2) 替换为：
let _copy = structuredClone(d2)

如果要兼容非常老的浏览器，也可以用序列化反序列化的方式实现深拷贝：

let _copy = JSON.parse(JSON.stringify(d2))

2. 修正判断逻辑的笔误 #

把普通对象的判断条件改为正确逻辑：

// 原来的错误写法
// if((d1[element] instanceof Object) && (Array.isArray(d1[element])))
// 修正后
if(d1[element] instanceof Object && !Array.isArray(d1[element]))

3. 可选优化 #

原有数组处理逻辑里存在重复判断、循环内重复赋值的冗余代码，可以简化调整，避免不必要的性能消耗。

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