js浅拷贝、深拷贝的实现

  1. 浅拷贝
    ①引用的复制
	function clone(obj) {
		let newObj = {};
		for (let key in obj) {
			if (!obj.hasOwnProperty(key)) break;
			newObj[key] = obj[key]
		}
		return newObj;
	}
	let obj = {
		age: 20,
		name: 'xxx',
		address: {
			city: 'beijing'
		},
		arr: ['a', 'b', 'c']
	}
	// 测试
	let obj2 = clone(obj);
	console.log(obj2 == obj) //false
	obj2.age = 18;
	console.log(obj.age) //20
	obj2.address.city = 'shanghai'
	console.log(obj.address.city) //'shanghai'

②Object.assign()方法

	let arr = ['a', 'b', 'c']
	let newArr = Object.assign([], arr)
	console.log(newArr) //['a', 'b', 'c']
	newArr[0] = 'd';
	console.log(arr) //['a', 'b', 'c']
	console.log(arr==newArr) //false
	
	let obj = {
		age: 20,
		name: 'xxx',
		address: {
			city: 'beijing'
		},
		arr: ['a', 'b', 'c']
	}
	let newObj=Object.assign({},obj);
	console.log(obj==newObj) //false
	newObj.arr[0]='b';
	console.log(obj.arr) //['b', 'b', 'c']
  1. 深拷贝
    ①JSON.stringify()、JSON.parse()
	let obj = {
		age: 20,
		name: 'xxx',
		address: {
			city: 'beijing'
		},
		arr: ['a', 'b', 'c']
	}
	 let newObj=JSON.parse(JSON.stringify(obj)) 
	 newObj.address='guangzhou';
	 console.log(obj.address)// {city:'beijing'}

注:这种方法的弊端在于如果对象中包含方法、日期、正则表达式,拷贝的属性值不正确

	let newObj=JSON.parse(JSON.stringify({a:1,b:/\b([a-z]+)\1\b/})) 
	console.log(newObj) //{a:1,b:{}} 
	let newObj = JSON.parse(JSON.stringify({
		a: 1,
		b: function() {}
	}))
	console.log(newObj) //{a:1}
	let newObj = JSON.parse(JSON.stringify({
		a: 1,
		b: new Date()
	}))
	console.log(newObj) //{a: 1, b: "2021-03-01T16:29:50.543Z"}
  1. 递归的方式实现深拷贝
// 深拷贝
	function deepClone(obj) {
		// 过滤特殊情况
		if (typeof obj !== 'object' || obj == null) {
			return obj;
		}
		if (obj instanceof RegExp) {
			return new RegExp(obj)
		}
		if (obj instanceof Date) {
			return new Date(obj);
		}
		if (obj instanceof Function) {
			return new Function(obj);
		}
		// 不直接创建对象的目的:克隆的结果和之前保持相同的所属类
		let newObj = new obj.constructor;
		for (let key in obj) {
			if (obj.hasOwnProperty(key)) { //只拷贝私有的属性,公有的不拷贝
				// 递归调用
				newObj[key] = deepClone(obj[key])
			}
		}
		return newObj;
	}

	// 测试
	let obj = {
		age: 20,
		name: 'xxx',
		address: {
			city: 'beijing'
		},
		arr: ['a', 'b', 'c']
	}
	let obj2 = deepClone(obj);
	console.log(obj2 === obj);//false
	obj2.arr[0]=1;
	console.log(obj.arr[0])//a
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页