深拷贝与浅拷贝的区别是:深拷贝是值拷贝,浅拷贝是址拷贝。
深拷贝后的变量被修改以后,被拷贝的变量的值不会发生修改,而浅拷贝的数据被修改以后,被拷贝的值会发生对应的修改。
首先,先说数组的拷贝:
数组
浅拷贝的用法一般是:
const a = [1, 2, 3];
const b = a;
即可。
但深拷贝就有各种方法实现了。以下是一系列的实现方法:
1. ES6的解构赋值:
const a = [1, 2, 3];
const b = [...a];
值得注意的是,该方法只适用于数组内的元素是基本数据类型。
2. 数组的slice()方法:
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)
该方法返回一个新的数组,包含从 start 到 end (不包括该元素,数学上来讲是左闭右开,即包含左,不含右)的 arrayObject 中的元素。用法是:
const a = [1, 2, 3];
const b = a.slice(0);
同样,该方法也只适用于数组内的元素是基本数据类型。
3. 数组的concat()方法:
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。用法是:
const a = [1, 2, 3];
const b = a.concat();
该方法也只适用于数组内的元素是基本数据类型。
4. 把数组转成字符串,再转回数组:
const a = [1, 2, 3];
const b = a.join(''); // 数组转字符串
// const b = a.toString(); 字符串转数组
const c = b.split('');
5. for循环实现数组的深拷贝:
const a = [1, 2, 3];
let b = [];
a && a.foreach(item=>{
b.push(item)
})
6. 使用lodash函数库(巨推荐使用):
const a = [1, 2, 3];
const b = cloneDeep(a);
对象
浅拷贝的用法一般是:
const a = {
aa: "xuxu"
};
const b = a;
即可。
深拷贝有以下实现方法:
1. Object.assgin():
方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)
const a = {
aa: 'xuxu'
};
const b = {};
Object.assgin(b, a);
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。该方法只能深拷贝基本数据类型的数据,不是真正意义的深复制,当然,如果要复制的对象或者数组都是基本数据类型,那就大胆用吧。
2. for循环实现对象的深拷贝:
const a = {
aa: 'xuxu'
};
const b = {};
for(let i in a){
b[i] = a[i];
}
3. 把对象转成字符串,再转回对象:
const a = {
aa: 'xuxu'
};
const b = JSON.stringify(a); // 对象转字符串
const c = JSON.parse(b); // 字符串转对象
4. 使用lodash函数库(巨推荐使用):
const a = {
aa: 'xuxu'
};
const b = cloneDeep(a);