在你的代码中,当对数组进行修改时,使用了obj.slice()来获取新的数组,但是这样得到的新数组并不会包含最后一次修改的值。因为slice()方法只是返回了原始数组的一个浅拷贝,并没有包含新加入或者被删除的元素。
所以,在处理数组修改时,你需要手动将修改后的值添加进新生成的数组中,而不是直接使用slice()方法来获取新数组。以下是修复后的代码:
const arrayHandler = (path) => ({
set: function(obj, prop, value) {
console.log(`属性 ${prop} 被设置为 ${value}`);
obj[prop] = value;
if (!isNaN(prop)) {
const newArray = [];
for (let i = 0; i < obj.length; i++) {
newArray[i] = obj[i];
}
newArray[prop] = value;
setChangedValue(changedValues, [...path, prop], newArray);
}
return true;
},
get: function(obj, prop) {
if (typeof obj[prop] === "object" && obj[prop] !== null) {
// 处理数组
if (Array.isArray(obj[prop])) {
return new Proxy(obj[prop], arrayHandler([...path, prop]));
}
// 处理对象
return new Proxy(obj[prop], handler([...path, prop]));
}
return obj[prop];
},
});
在这个修复后的代码中,我们创建了一个新数组newArray来存储修改后的结果。首先将原始数组所有元素复制到该新数组中,然后将修改的元素添加到新数组中。最后将新数组作为修改后的值传递给setChangedValue()方法。
这样,我们就可以得到预期结果了。




