JavaScript 拷贝_xihuanLilia

大大的周 02-07 6971

深拷贝和浅拷贝变量存储类型浅拷贝概念浅拷贝使用方法一 Object.assign()方法2 forin循环方法3 利用展开运算符进行浅拷贝深拷贝概念方法方法一浅拷贝 + 递归方法2 JSON.parse(JSON.stringify()) 赋值深拷贝浅拷贝的区别

变量存储类型

在理解拷贝之前我们要先熟悉变量存储类型变量的数据类型分为基本数据类型（值类型）和复杂数据类型（引用数据类型）基本数据类型的值是直接存放在栈内存的而复杂数据类型的栈内存保存的是内存地址值都是保存在堆内存中

浅拷贝

我们通过一个案例来进行理解浅拷贝如下所示我们让obj1对obj进行了一次拷贝（浅拷贝）并打印这时候如果我们修改了属性会怎么样

obj.color.push('blue');

发现他们同时都增加了

概念

我们可以理解为浅拷贝就是创建一个新对象这个对象有着被拷贝对象的对象属性值如果是基本数据类型拷贝的就是这个基本数据类型的值改变新对象不会导致原来的数据发生改变如果属性是复杂数据类型拷贝的就是复杂数据类型的内存地址所以如果其中一个对象改变了这个地址就会影响到另外一个对象就会导致原数据发生改变这里借用GitHub中ConardLi大佬的图片来方便我们理解

浅拷贝使用方法一 Object.assign()

语法 Object.assign(target, … sources) 第一个参数是目标对象第二分参数是原对象（也就是被拷贝的对象）这是es6提供给我们的新方法我们使用的时候需要注意兼容性的问题还有个需要注意的是这个方法一般用来浅拷贝对象用来处理数组的时候会把数组视为对象

let obj ={ name:'x', age:18, color:['red','green',[1,2,3],{ sex:'man' }], } let obj1 = Object.assign({}, obj) obj.color.push('blue'); console.log(obj); console.log(obj1);

方法2 forin循环 let obj ={ name:'x', age:18, color:['red','green',[1,2,3],{ sex:'man' }], } let obj1 = {} for(let k in obj) { obj1[k] = obj[k] } obj.color.push('blue'); console.log(obj); console.log(obj1); 方法3 利用展开运算符进行浅拷贝 let obj ={ name:'ss', age:18, color:['green','blue'] } let obj1 = {...obj} // console.log(obj1); obj1.color.push('red') console.log(obj); console.log(obj1); 深拷贝概念

深拷贝指的是将被拷贝的对象从内存中完全拷贝一份出来在堆内存中开辟一个新的区域来存放新对象并且修改新对象不会影响原来对象我们在借用一次 GitHub中ConardLi大佬的图片来方便我们理解

方法方法一浅拷贝 + 递归 let obj ={ name:'x', age:18, color:['red','green',[1,2,3],{ sex:'man' }], } let obj1 = {} function deepClone(obj,oldobj) { for (var key in oldobj) { var item = oldobj[key]; if(item instanceof Array){ obj[key] = [] deepClone(obj[key],item) }else if(item instanceof Object){ obj[key] = {} deepClone(obj[key],item) }else{ obj[key] = oldobj[key] } } } deepClone(obj1,obj) obj1.color.push('ss') console.log(obj1); console.log(obj);

我们会发现原来数据并没有被修改

方法2 JSON.parse(JSON.stringify())

乍看 JSON.parse(JSON.stringify()) 不太明白我们来解释一下 JSON.parse() 是一个生成新对象的方法 JSON.stringify() 是把原对象序列化为一个JSON字符串简单的说就是先把源对象序列化为一个JSON字符串然后利用JSON.parse()方法转变为一个新对象这也是我们最常用的方法我们来使用看看结果如何

let obj ={ name:'x', age:18, color:['red','green',[1,2,3],{ sex:'man' }], } let obj1 = JSON.parse(JSON.stringify(obj)) obj1.color.push('ss') console.log(obj1); console.log(obj);

发现我们的结果还是一样的

赋值深拷贝浅拷贝的区别