假設我們要復制一個對象，如果不對其進行深拷貝败明，那么改變其中一個對象后隘马，另外一個對象也會跟著改變
正常情況場景
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
優(yōu)點：優(yōu)點是方便快捷，性能相對比較好
缺點：但是復雜的對象進行 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
// 深度優(yōu)先遍歷
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>
優(yōu)點：對象轉換比較穩(wěn)定幔嗦，保留原有的屬性
缺點：對象層級越深以及屬性越多，性能消耗也會比較高
文章的內容/靈感都從下方內容中借鑒
【持續(xù)維護/更新 500+前端面試題/筆記】https://github.com/noxussj/Interview-Questions/issues
【大數(shù)據可視化圖表插件】https://www.npmjs.com/package/ns-echarts
【利用 THREE.JS 實現(xiàn) 3D 城市建模（珠海市）】https://3d.noxussj.top/
