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('图标切换不成功');
  }