jQuery中的clone()方法可以用于復制一個元素以及元素的所有子元素。但是,有時候我們需要進行深度復制,即所有嵌套的子元素也需要被復制。這時候就需要用到深拷貝。
深拷貝是指將一個對象,包括其嵌套的所有對象,都復制一份,而不是只復制其引用。在jQuery中,可以使用$.extend()方法來進行深拷貝。
var obj1 = { a: 1, b: 2, c: { d: 3, e: 4 } }; var obj2 = $.extend(true, {}, obj1); console.log(obj2); // { a: 1, b: 2, c: { d: 3, e: 4 } }
上面的代碼中,通過把第一個參數設置為true,可以進行深拷貝。第二個參數是一個空對象,表示將obj1對象復制到一個新的空對象中。
需要注意的是,$.extend()方法會將目標對象的所有屬性都覆蓋掉,包括數組和對象。如果目標對象本身就是一個數組或對象,那么它的子元素也會被覆蓋掉。因此,如果需要保留原來的數組或對象,可以采用遞歸的方式進行拷貝。
function deepCopy(obj) { var result = Array.isArray(obj) ? [] : {}; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { if (typeof obj[key] === 'object') { result[key] = deepCopy(obj[key]); } else { result[key] = obj[key]; } } } return result; }
上面的代碼中,deepCopy()函數可以進行深拷貝。首先判斷傳入的參數是數組還是對象,然后對屬性進行逐個遍歷。如果屬性是一個對象,就遞歸調用deepCopy()函數,將其復制一份。如果屬性不是一個對象,就直接進行賦值。最后返回一個完整復制的對象。