共计 1454 个字符,预计需要花费 4 分钟才能阅读完成。
假如咱们要复制一个对象,如果不对其进行深拷贝,那么扭转其中一个对象后,另外一个对象也会跟着扭转
失常状况场景
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/
正文完