所謂高手，就是一個坑，一個坑踩出來的。

注意啦：點(diǎn)贊再看，養(yǎng)成習(xí)慣，你們的支持是我持續(xù)分享的最大動力(^▽)

我最近在做一個個人理財項(xiàng)目App，主要技術(shù)棧是Vue全家桶及TypeScript。

這里順便推一下TS，這玩意兒真的非常好用。

項(xiàng)目開發(fā)過程中，在進(jìn)行數(shù)據(jù)存儲的時候遇到了一個坑，我覺得這個坑踩的非常好，這個錯誤犯的非常的經(jīng)典。

所遇問題：

//聲明數(shù)據(jù)類型
type Record = {
    sum: number
}

//初始化數(shù)據(jù)
record: Record = {
    sum: 0
};

//聲明數(shù)據(jù)存儲器
recordList: Record[] = [];

數(shù)據(jù)初始化和存放數(shù)據(jù)的容器我們都已經(jīng)聲明好了，接下來我們開始往容器里添加數(shù)據(jù)：

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)
//這個時候打印出來的值應(yīng)該是多少？

先不要看下面的答案，你自己先想一下，打印出來的值應(yīng)該是多少。

如果道題你也答錯了，那么恭喜你，你又比別人多踩了一個坑，又比別人多進(jìn)步了一點(diǎn)。

打印出來的值是這樣子的：

[{sum:2},{sum:2}]

為什么打印出來的值不是[{sum:1},{sum:2}]呢？

問題到底出在了哪里？

問題就出在你在進(jìn)行this.recordList.push(this.record)的時候，你push進(jìn)去的是record的引用！

image.png

我們假設(shè)record的地址是#101，其中sum屬性的初始值為1

當(dāng)你在進(jìn)行第一步操作push(record)的時候，只是把record的地址#101傳了進(jìn)去。

當(dāng)進(jìn)行第二步操作record.sum=2的時候，此時第一次push進(jìn)去的sum值也被改成了2。

所以到了第三步的時候，recordList里面就放了兩個引用，同時這兩個引用指向同一個對象，而這個對象的sum屬性值在進(jìn)行第二次操作的時候被改成了2，所以最終打印出來的值是[{sum:2},{sum:2}]

解決方案：

在進(jìn)行push之前，把record對象深拷貝一下，然后把深拷貝的對象push進(jìn)去即可。

代碼如下：

const recordDeepClone = JSON.parse(JSON.stringify(this.record))

this.recordList.push(recordDeepClone);

寫在最后：

我是王震，2018年畢業(yè)，一年綠城集團(tuán)高級品牌專員工作經(jīng)歷，19年中開始轉(zhuǎn)行自學(xué)前端，杭州求職中，感謝內(nèi)推。

告誡自己，即使再累也不要忘記學(xué)習(xí)，成功沒有捷徑可走，只有一步接著一步走下去。 共勉！