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('圖標切換不成功');
  }