JS物件深度克隆/複製

huyao_road發表於2018-05-28

實現思路

物件型別儲存的是物件的引用地址,而把物件的實際內容單獨存放,因為物件型別通常比較龐大,這是資料開銷和記憶體開銷優化的手段。因此我們不能像原始資料型別一樣簡單的賦值,而應該遍歷資料中的每一個元素,將其中的每一個原始資料型別複製過去,做法如下

  1. 使用for-in遍歷物件中所有屬性
  2. 判斷屬性是否是原型鏈上的,不是原型鏈上的才拷貝
  3. 判斷屬性值是原始型別還是引用型別
  4. 原始型別直接賦值
  5. 引用型別值不為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))

 

相關文章