第 49 题（如何实现一个对象深拷贝（）） html

假设我们要复制一个对象，如果不对其进行深拷贝，那么改变其中一个对象后，另外一个对象也会跟着改变
【第 49 题（如何实现一个对象深拷贝（））】正常情况场景

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 = https://www.it610.com/article/[]; data.map((item, index) => { newData[index] = dfs(item); }); } else if (type(data) === 'object') { newData = https://www.it610.com/article/{}; Object.keys(data).map(item => { newData[item] = dfs(data[item]); }); } else { newData = https://www.it610.com/article/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

优点：对象转换比较稳定，保留原有的属性
缺点：对象层级越深以及属性越多，性能消耗也会比较高
文章的内容/灵感都从下方内容中借鉴