【JavaScript基础】 赋值,浅拷贝,深拷贝
一般深浅拷贝只针对复杂数组和对象,即引用类型,理解什么是深浅拷贝,为什么要用深浅拷贝 比记住方法更重要。这样才能在工作中知道何时应该用深浅拷贝,方法百度到处是。
- 什么是赋值,什么是深拷贝,什么是浅拷贝
1.赋值: 强行赋值,将两个对象的指向同一块内存地址,两个对象将发生联动。(基本数据类型不在此考虑,基本数据不会发生,此处只考虑引用类型。)
2.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用
3.深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”
理解:
1.直接赋值其实只复制了原对象的指针,引用对象和原对象指向同一个内存地址(内存共享,只是对象的名称不同而已)。这不能算真正的拷贝,因为修改引用对象时,内存地址发生改变,居然会影响原对象!!!
2.浅拷贝是创建一个完全和原对象一模一样的数组(第一层级/深度),中心思想是创建一个新对象(开辟一个新的内存地址),将原对象的属性逐个(遍历)拷贝到新的对象中。
3.深拷贝则是创建一个完全和原对象一模一样的数组(所有层级/深度),中心思想是创建一个新对象(开辟一个新的内存地址)用递归逐层复制对象。如果原对象过于复杂,使用深拷贝必然会造成不必要的性能损耗,则需要考虑是否真的使用深拷贝。
↑引用值的赋值过程
- 为什么要使用深、浅拷贝?如何证明拷贝成功了
1.我们不希望拷贝生成的新数组,会改变原数组。当我们改变新数组时,原数组不会随之发生改变,即证明拷贝成功了。
- 何时使用深拷贝,如何使用浅拷贝
1.深拷贝会导致性能的损耗。如果仅需拷贝原对象、数组的第一层级(深度),就用浅拷贝。如果需要完整拷贝,则需要使用深拷贝。
-
浅拷贝
请注意浅拷贝只能适用于,对象或者数组第一层级下为基本数据类型(数字,字符串),若数据结构第一层级下的结构不是基本数据类型,则会拷贝失败。(因为浅拷贝的代码就是只拷贝了原对象或者数组的第一层属性),如果这里用直接赋值强行指向同一内存地址,所有属性都被改变了。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
let originObj = { name:"paul", age:19, address:['china'], hobbies:['sing','dance','ball'], family:{ dad:"tom", mother:"jerry" } }; let copyObj = copy(originObj); copyObj.name = "jim" //第一层级为基本数据类型,修改第一层级的数据不会发生改变 copyObj.age = 99; //第一层级为基本数据类型,修改第一层级的数据不会发生改变 copyObj.address[0]= "usa" // 第一层级下不是基本数据类型 copyObj.hobbies[0]="play games" // 第一层级下不是基本数据类型,修改数据会发生改变,说明拷贝已经失败 copyObj.family.mother = "helen" // 第一层级下不是基本数据类型,修改数据会发生改变,说明拷贝已经失败 function copy(obj){ let newObj = {} for(prop in obj){ if (obj.hasOwnProperty(prop)) { newObj[prop]= obj[prop] } } return newObj; };
实现浅拷贝的方法
对象方法:Object.assign({},obj)
数组方法:Array.contact() , Array.slice()
ES6扩展运算符:[...arr1] , {...obj1}
-
深拷贝
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 原生js代码实现深拷贝 let originObj = { name:"paul", age:19, address:['china'], hobbies:['sing','dance','ball'], family:{ dad:"tom", mother:"jerry" } }; function deepCopy(obj){ // 如果不是对象或者数组,说明是简单数据类型,直接引用即可 if (typeof obj !== 'object' || obj == null) { return obj }; let result; // 简单判断数据的类型 if(obj instanceof Array){ result = [] }else{ result = {} }; for (let key in obj){ if (obj.hasOwnProperty(key)) { console.log(key); // 递归深拷贝(只有递归才能逐级拷贝到深层的属性) result[key] = deepCopy(obj[key]) // result[key] = obj[key] 未递归只能算浅拷贝 } } return result }; let copyObj = deepCopy(originObj) copyObj.name = "jim" //所有层级均不会改变,深拷贝成功 copyObj.age = 99; //所有层级均不会改变,深拷贝成功 copyObj.address[0]= "usa" // 所有层级均不会改变,深拷贝成功 copyObj.hobbies[0]="play games" // 所有层级均不会改变,深拷贝成功 copyObj.family.mother = "helen" // 所有层级均不会改变,深拷贝成功 console.log(originObj); console.log(copyObj);
实现深拷贝的方法
一、通用方法,JSON.stringify()将对象转化为JSON字符串,再用JSON.parse() 把JSON字符串转化对象 JSON.parse(JSON.stringify(targetObj))
-缺点:受限于JSON类型格式,JSON并没有null, NaN, infinity,函数,正则、日期、函数都会出问题 (原理是因为受限于JSON类型格式,需补充JSON 的知识点)
二、lodash的cloneDeep方法,注意按需引入 import cloneDeep from 'lodash/cloneDeep'