一、如何区分深拷贝和浅拷贝?
假设B复制了A,当修改A时,看B是否发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短;
如果B没变,那就是深拷贝,自食其力。
二、浅拷贝
let a = [0,1,2,3,4];
b = a;
console.log(a===b); // true
a[0] = 1;
console.log(a, b); // [1,1,2,3,4] [1,1,2,3,4]
可以发现,b复制了a,修改数组a,数组b也跟着改变了。
这里,就要引入js的数据类型了。JS数据类型包括基本数据类型和引用数据类型,基本数据类型包括string、number、Boolean、null、undefined;引用数据类型包括Object、arr、函数等。
a. 对于基本数据类型,其存储方式是按值存储的。如下:
let a = 1 名值存储在栈内存中。
当b=a复制时,栈内存会开辟一个新的内存,如下:
所以当你此时修改a=2,对b并不会造成影响,因为此时的b已经自食其力了,不受a影响了。但是,虽然b不受a影响了,这也算不上深拷贝,因为深拷贝本身是针对较为复杂的object类型数据。
b. 对于引用数据类型,其名存在栈内存中,值存在堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值,如下:
当b=a进行复制时,其实复制的是a的引用地址,而并非堆里面的值。a和b指向的是同一个地址。
当a[0] = 1 对数组a进行修改时,由于a和b指向同一个地址,所以b自然也受到影响,这就是所谓的浅拷贝了。
要是在堆内存中也开辟一个新的内存专门为b存放值,这样就达到深拷贝的效果了。
浅拷贝在我看来是对“一层”简单类型的拷贝,也就是浅拷贝只对一层有效,是指向不同内存地址。
三、浅拷贝实现方法
1、直接遍历
var array = [1,2,3,4];
function copy (array) {
let newArray = [];
for (let item of array) {
newArray.push(item);
}
return newArray;
}
var copyArray = copy(array);
copyArray[0] = 100;
console.log(array); // [1,2,3,4]
console.log(copyArray); // [100,2,3,4]
或者
function shallowCopy (obj) {
var copyObj = {};
for (let i in obj) {
copyObj[i] = obj[i]
}
return copyObj
}
var x = {
a: 1,
b: {f: {g: 1}},
c: [1,2,3]
};
var y = shallowCopy(x);
console.log(y); // 与x一样
console.log(x); //
y.a = 2;
console.log(y); // y.a = 2
console.log(x); // x.a = 1 不受影响,因为是a基本类型
y.b.f.g = 3;
console.log(y); // y.b.f.g = 3
console.log(x); // x.b.f.g = 3 受到影响,因为b是引用类型
y.c.push(4);
console.log(y); // y.c = [1,2,3,4]
console.log(x); // x.c = [1,2,3,4] 受到影响,因为c是引用类型
2、slice()
var array = [1,2,3,4];
var copyArray = array.slice();
copyArray[0] = 100;
console.log(array); // [1,2,3,4]
console.log(copyArray); // [100,2,3,4]
slice() 方法返回一个从已有的数组中截取一部分元素片段组成的新数组(不改变原来的数组),当slice不带任何参数时,默认返回一个长度和原数组相同的数组。
3、concat()
var array = [1,2,3,4];
var copyArray = array.concat();
copyArray[0] = 100;
console.log(array); // [1,2,3,4]
console.log(copyArray); // [100,2,3,4]
concat()方法用于连接两个或多个数组(该方法不会改变原有的数组,而仅仅会返回被连接数组的一个版本)。var copyArray = array.concat();实际上相当于var copyArray = array.concat([]); 就是将返回数组和一个空数组合并。
4、Object.assign()
Object.assign(target, ...sources) // target是目标对象,sources是源对象,可以是多个,修改返回的是目标对象target。
如果目标对象中的属性具有相同的属性值,则属性将被源对象中的属性覆盖。
const obj1 = {a: {b: 1}}
const obj2 = Object.assign({}, obj1); // {a: {b: 1}}
obj1.a.b = 2;
console.log(obj2.a.b); // 2
Object.assign方法肯定是不会拷贝原型链上的属性,所以模拟实现时需要用hasOwnProperty(..)判断处理下,但是直接使用myObject.hasOwnProperty(..)是有问题的,因为有的对象可能没有连接到Object.prototype上(通过Object.create(null)来创建),这种情况下,使用myObject.hasOwnProperty(..)就会失败。这个时候,使用call()来解决。
var myObject = Object.create(null);
myObject.b = 2;
Object.prototype.hasOwnProperty.call(myObject, 'b');
但是,浅拷贝的意思是对于一级数组元素是基本类型变量的简单数组,上面这三种拷贝方式都能成功,但对于第一级元素是对象或者数组等引用类型变量的数组,上面的三种方法就失效了,那就需要深拷贝了。
四、深拷贝
1、简单暴力用JSON对象的parse和stringfy
JSON.parse()方法是取一个JSON字符串将其转换为JavaScript对象。
JSON.stringify()方法取一个JSON对象,并将其转换为JSON字符串。
因为怕影响原对象,所以深拷贝一份对象出来。
function deepClone (obj) {
let objClone = JSON.parse(JSON.stringify(obj));
return objClone;
}
let a = [0,1,[2,3],4],
b = deepClone(a);
a[0] = 1;
a[2][0] = 1;
console.log(b); // [0,1,[2,3],4]
使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined , function, RegExp 等等类型的。不能解决循环引用的对象。
2、封装一个深拷贝的函数
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {}; // 或者
if (obj && typeof obj === 'object') {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
// 判断obj子元素是否也是对象,如果是,递归复制
if (obj[key] && typeof obj[key] === 'object') {
objClone[key] = deepClone(obj[key]);
} else {
// 如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let a = [1,2,3,4],
b = deepClone(a);
a[0] = 2;
console.log(a); // [2,2,3,4]
console.log(b); // [1,2,3,4]
但是,上面的代码有很多问题,如下:
1、没有对参数做校验
函数需要校验参数,如果不是对象的话直接返回
function deepClone(obj) {
if (!isObject(obj)) return obj;
// xxx
}
2、判断是否是对象逻辑不够严谨
判断对象的严谨方法
Object.prototype.toString.call(obj) === '[object Object]';
3、没有考虑数组的兼容
更推荐lodash的深拷贝函数[https://lodash.com/docs/4.17.15#cloneDeep]
参考文章https://blog.csdn.net/dingyu002/article/details/117994305
----完整校验的代码如下:
function deepClone (obj) {
// 定义一个变量
let result;
// 如果当前需要深拷贝的是一个对象的话
if (obj && typeof obj === 'object') {
// 如果是一个数组的话
if (Array.isArray(obj)) {
result = []; // 将result赋值为一个数组,并且执行遍历
for (let i in obj) {
// 递归克隆数组中的每一项
result.push(deepClone(obj[i]));
}
// 如果当前值是null的话,直接赋值为null
} else if (obj === null) {
result = null;
// 如果当前的值是一个RegExp对象的话,直接赋值
} else if (obj.constructor === RegExp) {
result = obj;
// 否则就是普通对象,直接for in 循环,递归赋值对象的所有值
} else {
result = {};
for (let i in obj) {
result[i] = deepClone(obj[i]);
}
}
// 如果不是对象的话,就是基本数据类型,那么直接赋值
} else {
result = obj;
}
// 返回最终结果
return result;
}
使用in和hasOwnProperty方法
- in 操作符会检查属性是否在对象及其原型链中。
- hasownProperty()只会检查是否在myObject对象中,不会检查原型链。
这里再次强调下,深拷贝是拷贝对象各个层级的属性。