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

失常状况场景

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>

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

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

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

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