JS浅拷贝和深拷贝

55 阅读2分钟
  1. 浅拷贝只是拷贝一层,更深层次对象级别只拷贝作用

创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。

	<script>
		var obj = {
			id:1,
			name:'张三',
			msg:{
				age:18
			}
		};

		var o = {}
		for(var k in obj){
			// k是属性名 obj[k]属性值
			o[k] = obj[k]
		}
		console.log(o);//{id: 1, name: '张三'}
	</script>

image.png

浅拷贝-->拷贝地址 o对象里的msg和obj里面jsg指向同一块内存地址,修改o对象数据 会影响obj

JavaScript提供的浅拷贝方法

Object.assign

ES6中拷贝对象的方法,接受的第一个参数是拷贝的目标,剩下的参数是拷贝的源对象(可以是多个)

语法:Object.assign(target, ...sources)

let target = {}; 
let source = { a: { b: 2 } }; 
Object.assign(target, source); 
console.log(target); // { a: { b: 2 } };

Object.assign注意事项

  1. 不会拷贝对象继承的属性
  2. 不可枚举的属性
  3. 属性的数据属性/访问器属性
  4. 可以拷贝Symbol类型

ES6新增

JSON.stringify

JSON.stringify()是目前前端开发过程中最常用的深拷贝方式,原理是把一个对象序列化成为一个JSON字符串,将对象的内容转换成字符串的形式再保存在磁盘上,再用JSON.parse()反序列化将JSON字符串变成一个新的对象

  1. 深拷贝拷贝多层,每一级的数据都会拷贝
<script>
		var obj = {
			id: 1,
			name: '张三',
			msg: {
				age: 18
			},
			color:['green','red','orange']
		};

		var o = {}

		function deepCopy(newobj, oldobj) {
			for (var k in oldobj) {
				//判断属性属于哪种数据类型
				//1.获取属性值 oldobj[k]
				var item = oldobj[k];
				//2.判断是否是数组
				if (item instanceof Array) {
					newobj[k]=[];
					deepCopy(newobj[k],item)
				}else if(item instanceof Object){
					//3.判断这个值是否是对象
					newobj[k]= {};
					deepCopy(newobj[k],item)
				}else {
					//4.简单数据类型
					newobj[k]= item;
				}
			}
		}
		deepCopy(o,obj);
		console.log(o);
	</script>