vue深拷贝的几种实现方式

1、通过递归方式实现深拷贝
比较全面的深拷贝，缺点是较为繁琐

function deepClone(obj) {
	var target = {};
	for (var key in obj) {
		if (Object.prototype.hasOwnProperty.call(obj, key)) {
			if (typeof obj[key] === 'object') {
				target[key] = deepClone(obj[key]);
			} else {
				target[key] = obj[key];
			}
		}
	}
	return target;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2、JSON.parse(JSON.stringify(obj))
满足一般使用场景，但无法实现对象中方法(function)的深拷贝

let obj = {
	id: 1,
	name: '张三',
	age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))
1
2
3
4
5
6

3、jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝
1
2

4、Object.assign(obj1, obj2)
只有一级属性为深拷贝，二级属性后就是浅拷贝

let obj = {
	id: 1,
	name: '张三',
	age: 10,
}
let newObj = Object.assign({}, obj)
1
2
3
4
5
6

5、扩展运算符
只有一级属性为深拷贝，二级属性后就是浅拷贝

var obj = {
    a: 1,
    b: 2
}
 
var obj1 = {…obj}
1
2
3
4
5
6

6、数组使用数组方法进行深拷贝（concat、slice）
只有一级属性为深拷贝，二级属性后就是浅拷贝，如[1,2,3,[1,2,3]]

var arr1 = [1, 2, 3, 4]
var arr2 = arr1.concat()
var arr3 = arr1.slice(1)
1
2
3

7、使用Vue提供的观察者模式实现数组深度复制
//需要复制的数组

let arr1 = [{name: "小明", age: 18}, {name: "小芳", age: 20}];
let arr2 = Vue.util.extend([], arr1);
1
2

8、使用ES6提供的扩展运算符实现数组深度复制

//需要复制的数组
let arr1 = [{name: "小明", age: 18}, {name: "小芳", age: 20}];
//使用ES6的扩展运算符实现数组深度复制
let arr2 = [...arr1];
1
2
3
4