JS物件深度克隆/複製
實現思路
物件型別儲存的是物件的引用地址,而把物件的實際內容單獨存放,因為物件型別通常比較龐大,這是資料開銷和記憶體開銷優化的手段。因此我們不能像原始資料型別一樣簡單的賦值,而應該遍歷資料中的每一個元素,將其中的每一個原始資料型別複製過去,做法如下
- 使用for-in遍歷物件中所有屬性
- 判斷屬性是否是原型鏈上的,不是原型鏈上的才拷貝
- 判斷屬性值是原始型別還是引用型別
- 原始型別直接賦值
- 引用型別值不為null時,判斷是陣列還是物件, 建立對應的空物件或空陣列,遞迴呼叫函式,將值賦值進去
原始碼
/**
* 深度克隆
* @param origin 被拷貝的原物件
* @param target 拷貝出來的物件
* @return 拷貝出來的物件
*/
function deepClone(origin, target) {
var target = target || {};
toStr = Object.prototype.toString;
for(var prop in origin ){
if(origin.hasOwnProperty(prop)){ //不能把原型鏈上的一起拷貝了
//判斷是元素型別還是引用型別
if(typeof(origin[prop]) == 'object' && origin[prop] ){
target[prop] = toStr.call(prop) == '[object Array]' ? [] : {};
arguments.callee(origin[prop], target[prop]); //遞迴呼叫
} else {
target[prop] = origin[prop]; //原始型別直接複製
}
}
}
return target;
}
測試資料
var obj = {
name: 'huyao',
card: ['black', 'gold', 'sample'],
child: {
name: 'xioahu',
age: 10,
frends: [{
name: 'xiaowang',
age: 10
},{
name: 'xiaoliu',
age: 9
},{
name: 'longshao',
age: 11
}
]
}
}
var obj1 = {};
deepClone(obj, obj1);
console.log(obj1)
console.log(deepClone(obj, obj1))
相關文章
- js深度複製物件JS物件
- js深度克隆物件JS物件
- js物件的深度克隆!JS物件
- js 淺拷貝(淺複製、淺克隆)、深拷貝(深複製、深克隆)JS
- js 深度克隆JS
- JS物件複製:深複製和淺複製JS物件
- 物件如何深度克隆物件
- js物件深複製JS物件
- js物件的複製方法JS物件
- js克隆一個物件JS物件
- JS 複製陣列和物件JS陣列物件
- VUE js中複製物件 JSONVue物件JSON
- 使用結構化克隆在 JavaScript 中進行深度複製JavaScript
- js之物件深淺克隆JS物件
- 淺談JS中物件的淺複製和深複製JS物件
- JS 物件如何實現深複製JS物件
- JS型別判斷、物件克隆、陣列克隆JS型別物件陣列
- 原生js實現物件的深克隆以及淺克隆JS物件
- 物件的生存期 記憶體 深度複製 複製建構函式 筆記物件記憶體函式筆記
- vue複製物件Vue物件
- SpringBoot物件複製Spring Boot物件
- 深度解讀《深度探索C++物件模型》之複製建構函式C++物件模型函式
- js | execCommand 複製JS
- js複製功能JS
- js 深複製JS
- js 實現深複製/深複製JS
- JavaScript物件複製理解JavaScript物件
- javascript深度克隆JavaScript
- 對於複製普通物件 深複製和淺複製是否一樣物件
- C#中的物件深複製和淺複製C#物件
- 我不知道如何在 JS/TS 中建立深度克隆JS
- JS如何實現點選複製功能,JS點選複製文字JS
- js中深克隆與淺克隆JS
- js 去掉陣列物件中的重複物件JS陣列物件
- 複製物件重新賦值不改變原物件物件賦值
- vue物件的深層複製Vue物件
- Java物件複製之MapStruct使用Java物件Struct
- vue實現物件的複製Vue物件