vue深拷贝的3种实现方式小结

目录 1、通过递归方式实现深拷贝 2、JSON.parse(JSON.stringify(obj)) 3、jQuery的extend方法实现深拷贝 拓展阅读 vue深拷贝的其他实现方式 总结

vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、 jq uery的extend方法实现深拷贝。 深拷贝： 拷贝的是对象 或者 数组内部数据的实体，重新开辟了内存空间存储数据； 浅拷贝： 拷贝的是引用类型的指针，副本和原数组或对象指向同一个内存；

1、通过递归方式实现深拷贝

比较全面的深拷贝，缺点是较为繁琐

function deepClone(obj) {
	 VAR  t arg et = {};
	for (var key in obj) {
		if (Object. PR ototy PE .hasOwnProperty.call(obj, key)) {
			if (typeof obj[key]  ===  'object') {
				target[key] = deepClone(obj[key]);
			} else {
				target[key] = obj[key];
			}
		}
	}
	return target;
}

2、JSON.parse(JSON.stringify(obj))

满足一般使用场景，但无法实现对象中方法(fountion)的深拷贝

let obj = {
	id: 1,
	n am e: '张三',
	age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))

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

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

拓展阅读

vue深拷贝的其他实现方式

1、Object.assign(obj1, obj2)

只有一级属性为深拷贝，二级属性后就是浅拷贝

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

2、 扩展运算符

只有一级属性为深拷贝，二级属性后就是浅拷贝

var obj = {
    a: 1,
    b: 2
}
 
var obj1 = {…obj}

3、数组使用 数组方法 进行深拷贝（concat、slice）

只有一级属性为深拷贝，二级属性后就是浅拷贝，如[1,2,3,[1,2,3]]

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

总结

到此这篇关于vue深拷贝的3种实现方式的 文章 就介绍到这了,更多相关vue深拷贝实现方式内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: vue 使用lodash实现对象数组深拷贝操作 vue对象复制方式(深拷贝,多层对象拷贝方式在后面)

总结

以上是 为你收集整理的 vue深拷贝的3种实现方式小结 全部内容，希望文章能够帮你解决 vue深拷贝的3种实现方式小结 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue深拷贝的3种实现方式小结的详细内容...