目录
Object.assign(target, source) —浅拷贝
借助JSON.parse、JSON.stringify实现深拷贝
一、什么是浅拷贝和深拷贝?
浅拷贝制是指只复制一层对象的属性,不会复制对象中的对象的属性,对象的深拷贝会复制对象中层层嵌套的对象的属性。(单来说浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。)
二、浅拷贝
-
Object.assign(target, source) —浅拷贝
var obj1 = {
a: 1,
b: 2,
c: 3
}
var obj2 = Object.assign({}, obj1);
obj2.b = 5;
console.log(obj1.b); // 2
console.log(obj2.b); // 5
但是如果对象的属性对应的是其它的引用类型的话,还是只拷贝了引用,修改的话还是会有问题
var obj1 = {
a: 1,
b: 2,
c: ['a','b','c']
}
var obj2 = Object.assign({}, obj1);
obj2.c[1] = 5;
console.log(obj1.c); // ["a", 5, "c"]
console.log(obj2.c); // ["a", 5, "c"]
所以是浅拷贝。
Tips:
- 只拷贝了自身的可枚举属性,没有拷贝正确的原型和不可枚举属性。
- IE不兼容
-
ES5 的 Object.create—浅拷贝
利用Object.create(), 我们能拷贝出一个高度相似的对象:
let clone = Object.create(
Object.getPrototypeOf(target),
Object.getOwnPropertyDescriptors(target)
);
这种拷贝在对象与对象直接几乎是完美的,正确的原型,正确的属性。但遗憾数组拷贝的结果会变成一个对象,尽管数组的访问方式和方法都可以,但Array.isArray(clone)===false
-
ES6 提供的扩展运算符...—浅拷贝
ES6中的展开语法...能方便地进行对象属性复制,同assign(),它拷贝了对象自身的可枚举属性
let aa = {
age: 18,
name: 'aaa'
}
let bb = {...aa};
bb.age = 22;
console.log(aa.age); // 18
只进行了一层浅拷贝,
这等同于使用Object.assign()方法,如果对象的属性对应的是其它的引用类型的话,还是只拷贝了引用,修改的话还是会有问题。
-
数组的 concat()和 slice()方法—数组浅拷贝
- concat()这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。(不传参数的情况下,它只是复制当前数组并返回副本。)
- slice(),它能够基于当前数组中的一或多个项创建一个新数组。
var newArray = ['a',1,2,{name:'heyushuo'}];
var clone1 = newArray.concat();
var clone2 = newArray.slice(0);
clone1[3].name = "kebi";
console.log(clone2.name) //kebi
console.log(newArray.name) //kebi
//通过上边例子可以看到如上两个方法实现的是浅复制
三、深拷贝
-
借助JSON.parse、JSON.stringify实现深拷贝
JSON 对象是 ES5 中引入的新的类型(支持的浏览器为 IE8+),JSON 对象 parse 方法可以将 JSON 字符串反序列化成 JS 对象,stringify 方法可以将 JS 对象序列化成 JSON 字符串,借助这两个方法,也可以实现对象的深拷贝。
let copyObj = JSON.parse(JSON.stringify(target));
虽然这个方法在很多时候都能派上用场。但是,也存在问题:
- 对某些数据不支持:如Date类型会被转为字符串类型,Undefined和RegExp类型丢失等问题。
- 无法拷贝存在循环引用的对象。
- 拷贝自身可枚举字符串属性,原型链丢失。
- 属性特性丢失。
- 性能较差。
-
手动实现,递归拷贝—深拷贝
// 定义一个深拷贝函数 接收目标target参数
function deepClone(target) {
// 定义一个变量
let result;
// 如果当前需要深拷贝的是一个对象的话
if (typeof target === 'object') {
// 如果是一个数组的话
if (Array.isArray(target)) {
result = []; // 将result赋值为一个数组,并且执行遍历
for (let i in target) {
// 递归克隆数组中的每一项
result.push(deepClone(target[i]))
}
// 判断如果当前的值是null的话;直接赋值为null
} else if(target===null) {
result = null;
// 判断如果当前的值是一个RegExp对象的话,直接赋值
} else if(target.constructor===RegExp){
result = target;
}else {
// 否则是普通对象,直接for in循环,递归赋值对象的所有值
result = {};
for (let i in target) {
result[i] = deepClone(target[i]);
}
}
// 如果不是对象的话,就是基本数据类型,那么直接赋值
} else {
result = target;
}
// 返回最终结果
return result;
}
// vue中全局挂载使用
Vue.prototype.$deepClone = deepClone