第 49 题：如何实现一个对象深拷贝？

  • A+
所属分类：Web前端
摘要

假设我们要复制一个对象，如果不对其进行深拷贝，那么改变其中一个对象后，另外一个对象也会跟着改变
便宜好用的国外VPS推荐

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

正常情况场景

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>

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

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

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

便宜好用的国外VPS推荐