javascript中赋值、浅拷贝、深拷贝的区别及实例详解
赋值
当把一个对象a赋值给另外一个对象b时,赋的值是对象a在栈中的地址,而不是堆中的数据。
let a={ name:'xiaoming', age:21, grade:{ language:60, math:81, english:99, science:94 },}let b=ab.name='xiaowang'b.grade.language=90console.log('a',a)console.log('b',b)
赋值.png
结果分析:对象b和对象a指向同一地址,无论哪个对象发生改变,另外一个对象都会联动变化.
浅拷贝
浅拷贝它会创立一个新对象,不会指向同一个地址,只会赋值制对象的非对象属性
(假如属性是基本类型,拷贝的就是基本类型的值;假如属性是内存地址(引用类型),拷贝的就是内存地址)
ES6中有个浅拷贝的方法Object.assign(target, …sources)。
let a = { name: '小明', age: 21, grade: { language: 78, math: 81, english: 99, science: 94 },}let b = {}Object.assign(b,a)b.name = '小花' b.grade.english = 9 console.log('a', a)console.log('b', b)
浅拷贝.png
结果分析:
b对象改变 name的值和grade对象,a对象只有grade对象的值发生改变,name未受影响。
由于,name是基本类型,b改变自身值,a 不会改变;而grade是一个对象,为引用类型,b拷贝的是该对象的地址,与a指向同一个地址,所以b改变grade对象的值时,a也发生变化。
深拷贝
深拷贝会另外拷贝一份一个一模一样的对象,但是不同的是会从堆内存中开拓一个新的区域存放新对象,新对象跟原对象不再共享内存,修改赋值后的对象b不会改到原对象a。
实现方式
1、JSON.parse(JSON.stringify())
原理
用JSON.stringify将JSON对象转成JSON字符串,
再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开拓新的栈,实现深拷贝。
缺点
因为用到了JSON.stringify(),这也会导致一系列的问题,由于要严格遵守JSON序列化规则:原对象中假如含有Date对象,JSON.stringify()会将其变为字符串,之后并不会将其复原为日期对象。或者是含有RegExp对象,JSON.stringify()会将其变为空对象,属性中含有NaN、Infinity和-Infinity,则序列化的结果会变成null,假如属性中有函数,undefined,symbol则经过JSON.stringify()序列化后的JSON字符串中这个键值对会消失,由于不支持。
2、手写递归方法
递归方法实现深度克隆
/** * 深拷贝 * @param {Object} obj 要拷贝对象 */function deepClone(obj = {}) { if (typeof obj !== 'object' || obj == null) { // 不是对象,或者者是null return obj } //初始化返回结果 let result if (obj instanceof Array) { result =[] }else{ result = {} } for (const key in obj) { //保证key不是原型的属性 if (obj.hasOwnProperty(key)) { //递归调用!! result[key] = deepClone(obj[key]) } } //返回结果 return result}
深拷贝.png
结果分析:b对象改变 name的值和grade对象,a均未受到影响,
以为b跟a不共享内存地址,是从堆内存中开拓一个新的区域存放的新对象。
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » javascript中赋值、浅拷贝、深拷贝的区别及实例详解