话不多说,咋们先来谈谈它俩的区别👇
浅拷贝只是增加了一个指针指向已存在的内存地址,仅仅是指向被复制的内存地址,如果原地址发生改变,那么浅复制出来的对象也会相应的改变。深拷贝是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存。
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。
浅拷贝的实现方案
1.Object.assign() // 把任意多个源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。
let obj2 = Object.assign({}, obj1)
3.函数库lodash的_.clone方法
var _ = require('lodash');
var obj2 = _.clone(obj1);
3.展开运算符
同object.assign()功能相同
let obj2 = {...obj1}
4. Array.prototype.concat()
let arr2 = arr1.concat() // 返回新数组,但当数组中嵌套数组对象时为浅拷贝
5. Array.prototype.slice()
let arr2 = arr1.slice() // 返回新数组,但当数组中嵌套数组对象时为浅拷贝
深拷贝的实现方案
1.JSON.parse()和JSON.stringify()
let arr2 = JSON.parse(JSON.stringify(arr1)); //缺点是不能处理函数和正则
2.函数库lodash的_.cloneDeep方法
var _ = require('lodash');
var obj2 = _.cloneDeep(obj1);
3.jQuery.extend()方法
$.extend(deepCopy,target,obj1,[objN]) // 第一个参数为true就是深拷贝
4.手写递归实现
解决循环引用的问题
深拷贝与浅拷贝的应用场景
无论是浅拷贝还是深拷贝,一般都用于操作Object 或 Array之类的复合类型。 比如想对某个数组 或对象的值进行修改,但是又要保留原来数组 或 对象的值不被修改,此时就可以用深拷贝来创建一个新的数组 或 对象,从而达到操作(修改)新的数组或 对象时,保留原来数组 或 对象。
场景:从服务器fetch到数据之后我将其存放在store中,通过props传递给界面,然后我需要对这堆数据进行修改,那涉及到的修改就一定有保存和取消,所以我们需要将这堆数据拷贝到其它地方。
在JS中有一些已经封装好的如数组方法:concat(),filter(),slice(),map()等,在修改数组时,不会修改原来的数组,而是返回一个新的数组。但这并不是真正的深拷贝,当数组中嵌套数组对象时仍为浅拷贝,嵌套数组的改变仍会影响原数组的值。
好了姐妹们 马上就要国庆了 想要去哪玩了嘛 哈哈哈哈哈哈哈哈哈哈哈 👆