javascript中赋值、浅拷贝、深拷贝的区别及实例详解

赋值

当把一个对象a赋值给另外一个对象b时,赋的值是对象a在栈中的地址,而不是堆中的数据。

let a={
    name:'xiaoming',
    age:21,
    grade:{
        language:60,
        math:81,
        english:99,
        science:94
    },
}
let b=a
b.name='xiaowang'
b.grade.language=90
console.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不共享内存地址,是从堆内存中开辟一个新的区域存放的新对象。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容