本篇内容主要讲解“javascript中的浅拷贝是什么意思”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript中的浅拷贝是什么意思”吧!
创新互联是一家专注于成都网站建设、网站建设与策划设计,庆安网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:庆安等地区。庆安做网站价格咨询:13518219792
1、简单复制对象的最外层属性,不处理对象更深层次的对象属性,会导致复制对象和原始对象的深层次属性指向同一个内存。
2、如果一个对象改变了内存的地址,就会影响另一个对象。
将对象序列化为JSON字符串,然后通过JSON.parse()将字符串生成新的对象,实现深度复制。
实例
let arr = [], obj = { a: 1 } for(let i = 0; i < 3; i++) { arr.push(obj) } // 基本变量的值一般都是存在栈内存中,而对象类型的变量的值存储在堆内存中,栈内存存储对应空间地址。基本的数据类型: Number 、Boolean、Undefined、String、Null。 console.log(arr) //[{ a: 2 },{ a: 2 },{ a: 2 }] 内存地址被替换指向{a:2} console.log(JSON.parse(JSON.stringify(arr))) //[{ a: 1 },{ a: 1 }]防止重新赋值 console.log(obj)//{a:1} //当我们执行obj.a = 2 时,堆内存就有新的对象{a:2},栈内存的b指向新的空间地址( 指向{a:2} ),而堆内存中原来的{a:1}就会被程序引擎垃圾回收掉,节约内存空间。 obj.a = 2 console.log(obj)//{a:2} console.log(arr) //[{ a: 2 },{ a: 2 }] console.log("//") // 深拷贝 如果对象的属性值为一般类型(string, number),通过Object.assign({},srcObj)得到的新对象是深拷贝 let obj1 = { a: 1, b: 2 }; let obj2 = Object.assign({}, obj1, { b: 20 }); console.log('obj1', obj1); // { a: 1, b: 2 } console.log('obj2', obj2); // { a: 1, b: 20 } console.log("//") // 浅拷贝 如果属性值为对象或其它引用类型,通过Object.assign({},srcObj)得到的新对象是浅拷贝 obj1 = { a: 1, b: { c: 2, d: 3 } }; obj2 = Object.assign({}, obj1); obj2.a = 10; obj2.b.c = 20; console.log('obj1', obj1); // { a: 1, b: { c: 20, d: 3 } } console.log("obj2", obj2) //{ a: 10, b: { c: 20, d: 3} } console.log("//") //Object.assign({})和Object.assign() 里面加与不加{}的区别 ; var test1 = { a: 'a' }, test2 = { b: { c: 1 } }; // Object.assign({}) 原始对象不会被改变 console.log(Object.assign({}, test1, test2)); //合并之后{ a: "a", b: {c:1} } console.log(test1) // {a:'a'} console.log(test2) // {b:{c:1}} // Object.assign() 原始对象会被改变(改变的只是被覆盖的原始对象test2覆盖test1) console.log(Object.assign(test1, test2)); //合并之后{ a: "a", b: {c:1} } console.log(test1) //{ a: "a", b: {c:1} } console.log(test2) // {b:{c:1}} //当替换一下被覆盖的对象test1覆盖test2 console.log(Object.assign(test2, test1)); //合并之后{ a: "a", b: {c:1} } console.log(test1) //{ a: "a"}此结果是在上面test2覆盖test1测试注释情况下得到,如果不注释打印得到{ a: "a", b: {c:1} },因为上面test1={ a: "a", b: {c:1} } console.log(test2) // { a: "a", b: {c:1} }
到此,相信大家对“javascript中的浅拷贝是什么意思”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!