推薦答案
實(shí)現(xiàn)深拷貝有多種方式,這里提供幾種常見的方法:
方法一:遞歸復(fù)制
遞歸復(fù)制是一種簡單但是常用的深拷貝實(shí)現(xiàn)方式?;舅悸肥潜闅v對(duì)象的每個(gè)屬性,如果屬性值是一個(gè)對(duì)象,則遞歸調(diào)用該方法進(jìn)行復(fù)制。
function deepClone(obj) {
// 判斷是否是引用類型
if (typeof obj !== 'object' || obj === null) {
return obj;
}
let result;
if (Array.isArray(obj)) {
result = [];
for (let i = 0; i < obj.length; i++) {
result.push(deepClone(obj[i]));
}
} else {
result = {};
for (let key in obj) {
result[key] = deepClone(obj[key]);
}
}
return result;
}
方法二:使用 JSON 對(duì)象
如果數(shù)據(jù)不包含函數(shù)、循環(huán)引用等特殊情況,可以使用 JSON 對(duì)象的 stringify 和 parse 方法來實(shí)現(xiàn)深拷貝。該方法的基本思路是將對(duì)象序列化為 JSON 字符串,再將 JSON 字符串反序列化為新的對(duì)象。
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
需要注意的是,該方法不能正確處理函數(shù)、循環(huán)引用等特殊情況。
方法三:使用第三方庫
如果項(xiàng)目中使用了第三方庫,可以使用該庫提供的深拷貝方法,如 Lodash 庫提供的 cloneDeep 方法。
const _ = require('lodash');
const obj = { a: 1, b: { c: 2 } };
const clonedObj = _.cloneDeep(obj);
使用第三方庫的優(yōu)點(diǎn)是不需要自己實(shí)現(xiàn)深拷貝方法,可以直接調(diào)用現(xiàn)成的方法。但是需要注意庫的引入和使用方法。
其他答案
-
進(jìn)行深拷貝的方法:遞歸函數(shù) (推薦使用,項(xiàng)目中使用的更多,更小,更安全)JSON.stringify() 和JSON.parse() ; (不推薦使用,如果遇到Function,Date等類型的變量容易出現(xiàn)一些意料之外的問題),第三方庫lodash的cloneDeep()方法 (就情況而定,如果項(xiàng)目中原先就有l(wèi)odash這個(gè)第三方庫,可以使用,否則還是推薦使用遞歸函數(shù)。不然成本太高。),JQuery的extend()函數(shù) (推薦在JQuery項(xiàng)目中使用,其他項(xiàng)目依然推薦是用遞歸函數(shù))
-
JavaScript中的對(duì)象賦值操作是淺拷貝,即當(dāng)使用賦值操作符(=)將一個(gè)對(duì)象賦值給另一個(gè)對(duì)象時(shí),實(shí)際上是將它們的引用指向了同一個(gè)對(duì)象。如果修改其中一個(gè)對(duì)象的屬性,另一個(gè)對(duì)象的屬性也會(huì)隨之改變,為了避免這種情況,可以使用深拷貝復(fù)制一個(gè)對(duì)象,即將一個(gè)對(duì)象及其所有屬性的副本復(fù)制到一個(gè)新對(duì)象中。