HTML Canvas绘图保存功能中数组提前更新的异常问题求助

问题1：console.log打印值与预期不符的原因 #

浏览器控制台打印引用类型（数组、对象）时，输出的是变量的内存引用，而非打印执行时刻的快照。你看到的打印结果是你点开控制台展开变量时的最新值，而非代码执行到console.log那行时的实际值。
你可以将代码改成打印序列化后的结果验证：

console.log(JSON.stringify(canvasesData))

即可看到赋值前后的打印结果存在差异。

问题2：两个数组判断全等、保存逻辑不执行的原因 #

数组属于引用类型，你在请求回调里的赋值逻辑savedCanvasesData = canvasesData只是让两个变量指向了内存中的同一个数组对象，没有做值拷贝。后续你修改canvasesData的内容时，savedCanvasesData指向的是同一个数组，自然也会同步更新，所以第二次执行时两个数组的值完全一致，arrayIsEqual判断为真，不会进入保存逻辑。

修复方案 #

修改请求回调里的赋值逻辑，对数组做深拷贝即可：

$.post('/APIUrl', data, function(response){
    // 深拷贝数组内容赋值，避免指向同一引用
    savedCanvasesData = JSON.parse(JSON.stringify(canvasesData));
});

如果你的数组内存在无法被JSON序列化的内容（比如函数、循环引用），也可以自己实现对应的深拷贝逻辑，当前存储图片base64和文本的场景用JSON序列化的方式完全够用。

另外你代码里let toSave = canvasesData也是引用赋值，当前场景下传参给$.post不会有问题，如果后续有修改toSave的需求也需要做拷贝。

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