所谓高手，就是一个坑，一个坑踩出来的。
注意啦：点赞再看，养成习惯，你们的支持是我持续分享的最大动力(▽)
我最近在做一个个人理财项目App，主要技术栈是Vue全家桶及TypeScript。
这里顺便推一下TS，这玩意儿真的非常好用。
项目开发过程中，在进行数据存储的时候遇到了一个坑，我觉得这个坑踩的非常好，这个错误犯的非常的经典。
所遇问题：
//声明数据类型
type Record = {
sum: number
}
//初始化数据
record: Record = {
sum: 0
};
//声明数据存储器
recordList: Record[] = [];
数据初始化和存放数据的容器我们都已经声明好了，接下来我们开始往容器里添加数据：
this.record.sum = 1
this.recordList.push(this.record);
console.log(this.recordList)
//[{sum:1}]
this.record.sum = 2
this.recordList.push(this.record);
console.log(this.recordList)
//这个时候打印出来的值应该是多少？
先不要看下面的答案，你自己先想一下，打印出来的值应该是多少。
如果道题你也答错了，那么恭喜你，你又比别人多踩了一个坑，又比别人多进步了一点。
打印出来的值是这样子的：
[{sum:2},{sum:2}]
为什么打印出来的值不是[{sum:1},{sum:2}]呢？
问题到底出在了哪里？
问题就出在你在进行this.recordList.push(this.record)的时候，你push进去的是record的引用！
image.png
我们假设record的地址是#101，其中sum属性的初始值为1
当你在进行第一步操作push(record)的时候，只是把record的地址#101传了进去。
当进行第二步操作record.sum=2的时候，此时第一次push进去的sum值也被改成了2。
所以到了第三步的时候，recordList里面就放了两个引用，同时这两个引用指向同一个对象，而这个对象的sum属性值在进行第二次操作的时候被改成了2，所以最终打印出来的值是[{sum:2},{sum:2}]
解决方案：
在进行push之前，把record对象深拷贝一下，然后把深拷贝的对象push进去即可。
代码如下：
const recordDeepClone = JSON.parse(JSON.stringify(this.record))
this.recordList.push(recordDeepClone);
写在最后：
我是王震，2018年毕业，一年绿城集团高级品牌专员工作经历，19年中开始转行自学前端，杭州求职中，感谢内推。
告诫自己，即使再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。 共勉！
网友评论