JavaScript深拷貝—我遇到的應用場景

---

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

代碼：

圖標就是代碼中的a標籤，下面是實現的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自己的機制問題，原本這裏是經過數組渲染出來的，我這裏每次點擊不一樣li標籤裏面的按鈕，數組裏面相應的樣式也會改變，可是element-ui他的機制是要個人整個數組變化他纔會渲染，就是他是渲染的整個數組，當一個元素變化的時候，他默認整個數組沒變，因此不顯示，因此這裏個人解決方法是先把這個數組深度拷貝一份出來，監聽點擊的當前按鈕在數組中的位置拷貝給所拷貝的數組的相應位置，改變他的值，這樣的話咱們就獲得一個改變一個元素的數組了，而後再將這個數組賦值給原數組，那麼原數組也是一個整個數組都改變的新數組，這樣他就會渲染了。

解決的代碼以下：

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