对象的深拷贝和浅拷贝总结

2022-05-26 12:35:16 阅读：163 来源： 互联网

标签：总结 name person 对象 age object copyObj hobby 拷贝

1、赋值

修改新对象原来的对象会发生改变(改变存储空间，联动改变)

 let person = {
        name: 'Tom',
        age: 12,
        hobby: ['音乐', '动漫']
    }
    let copyObj = person;
    copyObj.name = '小明';
    copyObj.hobby[0] = '看电视'
    console.log(copyObj, person);
    // { name: '小明', age: 12, hobby: [ '看电视', '动漫' ] } { name: '小明', age: 12, hobby: [ '看电视', '动漫' ] }

2、浅拷贝

浅拷贝基本类型直接拷贝值（新变原不变），引用类型拷贝内存地址（新变原变）

2.1 使用shallowCopy函数完成浅拷贝

let person = {
        name: 'Tom',
        age: 12,
        hobby: ['音乐', '动漫']
    }
    function shallowCopy(object) {
        var target = {}
        for (const key in object) {
            if (object.hasOwnProperty(key)) {
                target[key] = object[key]
            }
        }
        return target
    }
    let copyObj = shallowCopy(person);
    copyObj.name = '小红';
    copyObj.hobby[0] = '看电影';
    console.log(copyObj, person);
    // { name: '小红', age: 12, hobby: [ '看电影', '动漫' ] } { name: 'Tom', age: 12, hobby: [ '看电影', '动漫' ] }

2.2 使用ES6中的扩展运算符完成浅拷贝

let person = {
        name: 'Tom',
        age: 12,
        hobby: ['音乐', '动漫']
    }
    let copyObj = { ...person };
    copyObj.age = '20';
    copyObj.name = 'Jerry';
    copyObj.hobby[0] = '看文学名著'
    console.log(copyObj, person)
    // { name: 'Jerry', age: '20', hobby: [ '看文学名著', '动漫' ] } { name: 'Tom', age: 12, hobby: [ '看文学名著', '动漫' ] }

3、深拷贝

深拷贝新变原不变（在堆内存中开辟新的区域，修改不会影响原来的）

3.1 使用deepClone函数实现深拷贝

let person = {
        name: 'Tom',
        age: 12,
        hobby: ['音乐', '动漫']
    }
    function deepClone(object) {
        var cloneObj = Array.isArray(object) ? [] : {};
        if (object === null) return object
        if (object instanceof Date) return new Date(object)
        if (object instanceof RegExp) return new RegExp(object)
        if (typeof object !== 'object') return object
        for (const key in object) {
            if (object.hasOwnProperty(key)) {
                cloneObj[key] = deepClone(object[key])
            }
        }
        return cloneObj
    }

    let copyObj = deepClone(person);
    copyObj.name = 'Marry';
    copyObj.age = 18;
    copyObj.hobby[0] = 'football';
    console.log(copyObj, person);
    // { name: 'Marry', age: 18, hobby: [ 'football', '动漫' ] } { name: 'Tom', age: 12, hobby: [ '音乐', '动漫' ] }

3.2 JSON对象可以使用JSON.parse(JSON.stringify(object)) 的方法实现深拷贝

let obj = {
        key: 1,
        person: {
            name: 'Marry',
            age: 12
        }
    }
    let copyObj = JSON.parse(JSON.stringify(obj));
    copyObj.key = 2;
    copyObj.person.name = 'Bob';
    copyObj.person.age = 13;
    console.log(copyObj,obj)
    // { key: 2, person: { name: 'Bob', age: 13 } } { key: 1, person: { name: 'Marry', age: 12 } }

4、共用方法

4.1 Object.assign()

Object.assign()可实现深拷贝和浅拷贝（当只有一层时为深拷贝，两层及以上为浅拷贝）

let bookInfo = {
        name: '西游记',
        autor: '吴承恩',
        sellstaus: '良好'
    }
    let person = {
        name: 'Tom',
        age: 12,
        hobby: ['音乐', '动漫']
    }
    let copyObj1 = Object.assign({}, bookInfo);
    let copyObj2 = Object.assign({}, person);
    copyObj1.name = '红楼梦',
    copyObj1.autor = '曹雪芹',
    copyObj1.sellstaus = '中等'

    copyObj2.name = '小明',
    copyObj2.age = 22,
    copyObj2.hobby[0] = 'basketball'
    console.log(copyObj1, copyObj2)
    // { name: '红楼梦', autor: '曹雪芹', sellstaus: '中等' } { name: '小明', age: 22, hobby: [ 'basketball', '动漫' ] }

4.2 使用Jquery中的extend方法实现深拷贝和浅拷贝

浅拷贝
=> 语法: $.extend(对象1, 对象2, 对象3, …)
=> 作用: 把从对象2 开始的所有对象内的数据进行浅拷贝到对象1 内
=> 实现的是浅拷贝
深拷贝
=> 语法: $.extend(true, 对象1, 对象2, 对象3, …)
=> 作用: 把从对象2 开始的所有对象内的数据进行深拷贝到对象1 内
=> 实现的是深拷贝

标签：总结,name,person,对象,age,object,copyObj,hobby,拷贝
来源： https://www.cnblogs.com/likepoems/p/16313011.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9