关于html:第-49-题如何实现一个对象深拷贝

假如咱们要复制一个对象，如果不对其进行深拷贝，那么扭转其中一个对象后，另外一个对象也会跟着扭转

失常状况场景

let a = {age: 20};

let b = a;

b.age = 30;

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

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

就是将一个对象转为 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>

长处：对象转换比较稳定，保留原有的属性

毛病：对象层级越深以及属性越多，性能耗费也会比拟高

【继续保护 / 更新 500+ 前端面试题 / 笔记】https://github.com/noxussj/In…
【大数据可视化图表插件】https://www.npmjs.com/package…
【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

关于html:第-49-题如何实现一个对象深拷贝

利用 JSON 类

利用递归的形式

文章的内容 / 灵感都从下方内容中借鉴