---

• 簡述
  深拷貝即拷貝實例，其作用是為了不影響拷貝后的數(shù)組對起原數(shù)組造成影響。這時我們就需要進行深拷貝。（JavaScript的繼承）
• 我遇到的應用場景
  我是在用vue的element-ui做項目的時候遇到的，這是一個播放和暫停的按鈕切換功能
  

代碼：

圖標就是代碼中的a標簽，下面是實現(xiàn)的js代碼部分

//變換播放/暫停按鈕if (this.playClass[tagID] = 'playbtn1') {this.playClass[tagID] = 'playbtn';this.wavesurfer.play(minS, maxS);} else if (this.playClass[tagID] = 'playbtn') {this.playClass[tagID] = 'playbtn1';this.wavesurfer.pause(minS, maxS);} else {console.log('圖標切換不成功');}

當這樣寫的時候卻沒有效果，后來查了下，是因為element-ui本身的機制問題，本來這里是通過數(shù)組渲染出來的，我這里每次點擊不同li標簽里面的按鈕，數(shù)組里面相應的樣式也會改變，但是element-ui他的機制是要我的整個數(shù)組變化他才會渲染，就是他是渲染的整個數(shù)組，當一個元素變化的時候，他默認整個數(shù)組沒變，所以不顯示，所以這里我的解決方法是先把這個數(shù)組深度拷貝一份出來，監(jiān)聽點擊的當前按鈕在數(shù)組中的位置拷貝給所拷貝的數(shù)組的相應位置，改變他的值，這樣的話我們就得到一個改變一個元素的數(shù)組了，然后再將這個數(shù)組賦值給原數(shù)組，那么原數(shù)組也是一個整個數(shù)組都改變的新數(shù)組，這樣他就會渲染了。

解決的代碼如下：

//深拷貝一份樣式數(shù)組$.extend(true, showClass, this.playClass);if (this.playClass[tagID] == 'playbtn1') {$.extend(true, showClass[tagID], this.playClass[tagID]); //拷貝位置showClass[tagID] = 'playbtn';this.playClass = showClass;this.wavesurfer.play(minS, maxS);} else if (this.playClass[tagID] == 'playbtn') {$.extend(true, showClass[tagID], this.playClass[tagID]);showClass[tagID] = 'playbtn1';this.playClass = showClass;this.wavesurfer.pause(minS, maxS);} else {console.log('圖標切換不成功');}

轉(zhuǎn)載于:https://www.cnblogs.com/yehui-mmd/p/9614562.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JavaScript深拷贝—我遇到的应用场景的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。