欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript 对象拷贝

程序员文章站 2022-03-26 14:38:31
JavaScript 如何复制一个对象?浅拷贝可以复制出原始值属性,但是对于引用值属性仅仅复制了一份引用。利用递归对每个引用值属性的属性进行复制,这种方式称之为深拷贝 ......

javascript 对象拷贝

javascript 如何复制一个对象?浅拷贝可以复制出原始值属性,但是对于引用值属性仅仅复制了一份引用。利用递归对每个引用值属性的属性进行复制,这种方式称之为深拷贝

问题引入

var person1 = {
	name: '张三',
	age: "22"
}
var person2 = person1;

我们希望拷贝一份 person1 的属性给 person2,赋值是最简单的做法,但是这并不是我们想要的结果。 因为这仅仅是将 person1、person2 指向了同一对象,修改其一,会相互影响

对象浅拷贝

var person1 = {
	name: '张三',
	age: 22,
	son: {
		name: '张小三',
		age: 1
	}
}
var person2 = {};
for (var key in person1) {
	person2[key] = person1[key];
}

循环将 person1 的属性取出赋值给 person2,对于原始类型属性,不相互影响,可以成功拷贝,但是对于引用类型的属性,如 person2.son 和 person1.son 指向了同一对象,修改其一,会相互影响

如果不需要 person1 原型链上的属性,赋值时使用 hasownproperty() 判断

对象深拷贝

浅拷贝复制引用值只是将引用指向这个值,并不是复制了一份,修改其一,会相互影响。我们可以将属性中的引用值也循环其属性,复制到目标对象的属性。这种需求适合递归

var person1 = {
	name: '张三',
	age: 30,
	son: {
		first: {
			name: '小一',
			age: 3
		}
	}
}

function deepclone(origin) {
	var target = {};
	var tostr = object.prototype.tostring;
	for (var key in origin) {
		if (!origin.hasownproperty(key)) continue;
		if (typeof(origin[key]) === 'object' && origin[key] !== null) {
			if (tostr.call(origin[key]) === "[objcet array]") {
				target[key] = [];
			} else {
				target[key] = {};
			}
			target[key] = deepclone(origin[key]);
		} else {
			target[key] = origin[key];
		}
	}
	return target;
}

var person2 = deepclone(person1);
person2.son.sencond = {
	name: '小二',
	age: 2
}
console.log(person2);
console.log(person1);

person2 含有 person1 的所有属性,对于原始值属性进行修改,不会相互影响