---

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

代碼：

圖標(biāo)就是代碼中的a標(biāo)簽，下面是實(shí)現(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('圖標(biāo)切換不成功');}

當(dāng)這樣寫(xiě)的時(shí)候卻沒(méi)有效果，后來(lái)查了下，是因?yàn)閑lement-ui本身的機(jī)制問(wèn)題，本來(lái)這里是通過(guò)數(shù)組渲染出來(lái)的，我這里每次點(diǎn)擊不同li標(biāo)簽里面的按鈕，數(shù)組里面相應(yīng)的樣式也會(huì)改變，但是element-ui他的機(jī)制是要我的整個(gè)數(shù)組變化他才會(huì)渲染，就是他是渲染的整個(gè)數(shù)組，當(dāng)一個(gè)元素變化的時(shí)候，他默認(rèn)整個(gè)數(shù)組沒(méi)變，所以不顯示，所以這里我的解決方法是先把這個(gè)數(shù)組深度拷貝一份出來(lái)，監(jiān)聽(tīng)點(diǎn)擊的當(dāng)前按鈕在數(shù)組中的位置拷貝給所拷貝的數(shù)組的相應(yīng)位置，改變他的值，這樣的話(huà)我們就得到一個(gè)改變一個(gè)元素的數(shù)組了，然后再將這個(gè)數(shù)組賦值給原數(shù)組，那么原數(shù)組也是一個(gè)整個(gè)數(shù)組都改變的新數(shù)組，這樣他就會(huì)渲染了。

解決的代碼如下：

//深拷貝一份樣式數(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('圖標(biāo)切換不成功');}

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

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

總結(jié)

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

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