[JavaScript知识库]javaScript 前端面试题 30天学习计划 ----浅拷贝和深拷贝？（第五天）

javaScript 前端面试题 30天学习计划 ----（第四天）

日常任务

1. 前端面试题练习

• 学习习题所提知识点（概念、内容、用法）
• 掌握习题答案
• 用自己的理解解答习题

2. 复习前一天所学知识

• 代码操作
• 掌握习题答案
• 记忆知识点（概念、内容、用法）

浅拷贝和深拷贝？ 参考

概念： 简单的说拷贝后，被拷贝对象或者拷贝对象其中一个发生变化会对另一方产生影响的称为浅拷贝，反之称为深拷贝。

内容：

1. 在js中，基本数据类型的名值储存在栈内存中，变量的拷贝会把被拷贝对象的值赋给拷贝对象，对拷贝对象的值进行修改不会影响被拷贝对象。
2. 而引用数据类型的值在栈内存中储存的是一个指向堆内存的引用地址，变量的拷贝是把被拷贝对象的引用地址赋给拷贝对象，两者都指向同一个堆内存地址，所以任何一个的修改，另一方都会发生变化。

如何实现深拷贝？

1. 递归复制：遍历对象的所有属性，复制每一个参数；

	var a = [1,2,3,{a:'哈哈',b:'嘿嘿'}];

	//浅拷贝
	// var b = a;
	// a[0] = 2;
	// console.log(b); // [2,2,3,{a:'哈哈',b:'嘿嘿'}] 对a的修改影响了b

	//一级深拷贝
	// var b = [];
	// a.forEach(function(item,index){
	//     b.push(item);
	// })
	// a[0] = 2;
	// a[3].a = '啦啦';
	// console.log(b);//[1,2,3,{a:'啦啦',b:'嘿嘿'}] 复杂对象需要每个属性进行复制
	
	//深拷贝
	function deepClone(obj){
	    let objClone = Array.isArray(obj)?[]:{};
	    if(obj && typeof obj==="object"){
	        for(key in obj){
	            if(obj.hasOwnProperty(key)){
	                //判断ojb子元素是否为对象，如果是，递归复制
	                if(obj[key]&&typeof obj[key] ==="object"){
	                    objClone[key] = deepClone(obj[key]);
	                }else{
	                    //如果不是，简单复制
	                    objClone[key] = obj[key];
	                }
	            }
	        }
	    }
	    return objClone;
	}
	
	var b = deepClone(a);
	a[3].a = '啦啦';
	console.log(b);//[1,2,3,{a:'哈哈',b:'嘿嘿'}]

2. JSON.parse 与 JSON.stringify

	var a = [1,2,3,{a:'哈哈',b:'嘿嘿'}];
	var b = JSON.parse(JSON.stringify(a));
	a[0] = 2;
	a[3].a = '啦啦'；
	console.log(b);//[1,2,3,{a:'哈哈',b:'嘿嘿'}]