假如咱们要复制一个对象,如果不对其进行深拷贝,那么扭转其中一个对象后,另外一个对象也会跟着扭转
失常状况场景
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/