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

转载于:https://www.cnblogs.com/yehui-mmd/p/9614562.html

JavaScript深拷贝—我遇到的应用场景相关推荐

js 对象深拷贝_这一次，彻底理解JavaScript深拷贝
导语这一次,通过本文彻底理解JavaScript深拷贝! 阅读本文前可以先思考三个问题: JS世界里,数据是如何存储的? 深拷贝和浅拷贝的区别是什么? 如何写出一个真正合格的深拷贝? 本文会一步步解 ...
typescript或javascript深拷贝Object json
typescript或javascript深拷贝Object json Object的json对象很多时候我们需要深拷贝,我写了两个工具函数,供大家参考. deepCopyObject 深拷贝一个Ob ...
4种JavaScript深拷贝的方法
浅拷贝与深拷贝浅拷贝是创建一个新对象,这个对象有着原始对象属性值的拷贝.如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的是内存地址 . 如果不进行深拷贝,其中一个对象改变了对象 ...
javaScript深拷贝和浅拷贝简单梳理
在了解深拷贝和浅拷贝之前,我们先梳理一下: JavaScript中,分为基本数据类型(原始值)和复杂类型(对象),同时它们各自的数据类型细分下又有好几种数据类型基本数据类型数字Number 字符串 ...
JavaScript深拷贝的5种方法
目录应用场景方法一方法二方法三方法四方法五参考链接应用场景 JavaScript中,Object是引用类型,把对象objA赋值给objB之后,改变objB的值,objA会跟着改变.这是 ...
python深拷贝和浅拷贝的使用场景_深拷贝、浅拷贝的理解与使用场景
什么是深拷贝.浅拷贝? 通俗解释:深拷贝是内容拷贝,浅拷贝是地址拷贝区别点: 深拷贝会创建一个新的内存空间,拷贝的值是一样的,但是内存地址不一样. 浅拷贝只是拷贝指向原来对象的地址,使原对象的引用计 ...
通俗易懂讲解JavaScript深拷贝和浅拷贝
基本类型和引用类型在开始讲解JavaScript的深拷贝和浅拷贝之前,先要认识JavaScript的两种基本数据类型.一种是基本类型(值类型),另外一种是引用类型.其中基本类型包括undefined ...
javascript深拷贝和浅拷贝
在JavaScript中,存在着这样的两种拷贝方式.分别是:深拷贝和浅拷贝,这两种拷贝在实际中非常的常见,如果读者是一个阅读源码的爱好者,相信多多少少对深拷贝和浅拷贝有所了解. 一.浅拷贝浅拷贝在现 ...
JavaScript 深拷贝与浅拷贝
目录深拷贝与浅拷贝简单区分 js数据类型基本数据类型引用数据类型两者存储上的区别 js实现深拷贝深拷贝与浅拷贝简单区分深拷贝与浅拷贝的简单区分: 假设B复制了A,当修改A时,看B是否跟 ...

JavaScript深拷贝—我遇到的应用场景

JavaScript深拷贝—我遇到的应用场景相关推荐

最新文章

热门文章