首页 前端知识 vue深拷贝的三种实现方式

vue深拷贝的三种实现方式

2024-03-31 10:03:36 前端知识 前端哥 953 351 我要收藏

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

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;
}

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

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

let obj = {
	id: 1,
	name: '张三',
	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)
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4324.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!