对象赋值踩坑实录

所谓高手，就是一个坑，一个坑踩出来的。

注意啦：点赞再看，养成习惯，你们的支持是我持续分享的最大动力( ^▽^)

我最近在做一个个人理财项目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的引用！

我们假设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年中开始转行自学前端，杭州求职中，感谢内推。

告诫自己，即使再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。 共勉！