继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

第 49 题:如何实现一个对象深拷贝?

菜园前端
关注TA
已关注
手记 74
粉丝 6
获赞 12

假设我们要复制一个对象,如果不对其进行深拷贝,那么改变其中一个对象后,另外一个对象也会跟着改变

正常情况场景

let a = {
    age: 20
};

let b = a;

b.age = 30;

console.log(a.age); // 30

这并不是我们想要的效果,所以想要复制一个全新的对象时,就要进行深拷贝

利用 JSON 类

就是将一个对象转为 JSON 字符串,在转回 JSON 对象

let a = {
    age: 20
};

let b = JSON.parse(JSON.stringify(a));

b.age = 30;

console.log(a.age); // 20

优点:优点是方便快捷,性能相对比较好

缺点:但是复杂的对象进行 JSON 转换有可能会丢失属性,如下代码

let a = {
    age: 20,
    local: function() {
        return 5;
    }
};

let b = JSON.parse(JSON.stringify(a));

console.log(b); // { age : 20 }
console.log(b.local()); //  b.loacl is not a function

利用递归的方式

dfs-deep-copy.js

// 深度优先遍历
let dfs = data => {
    let newData;

    if (type(data) === 'array') {
        newData = [];
        data.map((item, index) => {
            newData[index] = dfs(item);
        });
    } else if (type(data) === 'object') {
        newData = {};
        Object.keys(data).map(item => {
            newData[item] = dfs(data[item]);
        });
    } else {
        newData = data;
    }

    return newData;
};

// 类型字典
export let type = data => {
    let dist = {
        '[object Array]': 'array',
        '[object Object]': 'object',
        '[object Number]': 'number',
        '[object Function]': 'function',
        '[object String]': 'string',
        '[object Null]': 'null',
        '[object Undefined]': 'undefined'
    };

    return dist[Object.prototype.toString.call(data)];
};

export default dfs;

index.vue

<script>
import dfs from './dfs-deep-copy.js';

export default {
    mounted() {
        let a = {
            age: 20,
            local: function() {
                return 5;
            }
        };

        let b = dfs(a);
        b.local = function() {
            return 10;
        };

        console.log(b.local()); // 10
        console.log(a.local()); // 5
    }
};
</script>

优点:对象转换比较稳定,保留原有的属性

缺点:对象层级越深以及属性越多,性能消耗也会比较高

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP