彻底搞懂JavaScript(ES6)的深拷贝与浅拷贝 |
您所在的位置：网站首页 › js数据深拷贝和浅拷贝的 › 彻底搞懂JavaScript(ES6)的深拷贝与浅拷贝 |
彻底搞懂JavaScript(ES6)的深拷贝与浅拷贝
|
JS变量的存储方式
开始之前先理解下面的几句话 深拷贝和浅拷贝是变量在内存中的存放位置不同(堆，栈)在js中，对象和数组这种复杂的数据结构是放在堆中，堆的地址放在栈中js中的number，string，bool简单类型是放在栈中栈的存取速度比堆快，但是不适合存入复杂数据结构一般直接存放在栈里的变量对应深拷贝，放在堆里的变量是浅拷贝
实质：深拷贝就是完全复制一份地址，完全是开辟了一个新的空间，如果改变原变量，则不会影响深拷贝出来的变量 如果变量存放在栈中，则直接在栈里开辟一个新空间，存放该值如果变量存放在堆中，则在堆中开辟一个空间，在栈中开辟一个空间来存放推的地址演示两个深拷贝的例子 var num=3 var numCopy=num num=4 console.log("num:",num) //4 console.log("numCopy:",numCopy) //3 var obj={ name:'looper' } var objCopy=JSON.parse(JSON.stringify(obj)) obj.name="zhuo" console.log("obj:",obj) //"zhuo" console.log("objCopy:",objCopy) //"looper"浅拷贝 实质：浅拷贝只针对放在堆里的变量，目前最多的是对象和数组，拷贝一份变量之后，该变量的的内存地址也是指向被copy的变量地址，简单来说就是浅拷贝出来的变量和被拷贝的变量使用同一个堆的值，任何一个变量的属性值改变会影响另外一个变量，深拷贝则不会，对于“=”就是一个浅拷贝 var obj={ name:'looper' } var objCopy=obj obj.name="zhuo" console.log("obj:",obj) //"zhuo" console.log("objCopy:",objCopy) //"zhuo" 深拷贝的实现1.使用JSON JSON.parse(JSON.stringify(obj))2.使用递归 function deepClone(source) { let targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象 for (let keys in source) { // 遍历目标 if (source.hasOwnProperty(keys)) { if (source[keys] && typeof source[keys] === "object") { // 如果值是对象，就递归一下 targetObj[keys] = source[keys].constructor === Array ? [] : {}; targetObj[keys] = deepClone(source[keys]); } else { // 如果不是，就直接赋值 targetObj[keys] = source[keys]; } } } return targetObj; } es6中的Object.assign()和扩展运算符(...)1.扩展运算符：会深拷贝数据结构的第一层数据，第二层的数据是浅拷贝，举个例子 var a={ q:1, w:2, e:{ r:2 }, arr:[1] } var b={...a}//扩展运算符copy对象 b.arr[0]=444//改变数组的值，都会改变 b.q=33 //改变第一层变量的值，对另外一个对象没影响 b.e.r=656 //改变对象的值，都会改变 console.log(b) console.log(a)
2.Object.assign()：和扩展运算符基本一致 let sourceObj = { a: { b: 1},d:1}; let targetObj = {c: 3}; Object.assign(targetObj, sourceObj); targetObj.a.b = 2; targetObj.d=2 console.log("sourceObj",sourceObj) console.log("targetObj",targetObj)
|
【本文地址】
今日新闻 |
推荐新闻 |