欢迎光临
我的个人博客网站

第 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 = [];         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> 

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

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

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » 第 49 题:如何实现一个对象深拷贝?
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏