js中的深度克隆和淺度克隆
阿新 • • 發佈:2021-07-05
淺度克隆
var obj = {age:26}; //把存在棧裡的索引值複製給了obj1,指向同一份資料 var obj1 = obj; console.log(obj1);//{age: 26} obj.name = '張三'; //當obj的值改變時,obj1也跟著改變 console.log(obj1);//{age: 26, name: "張三"}
深度克隆
分析:
1.判斷是不是原始值typeof
2.判斷是陣列還是物件 toString
3.建立對應的陣列或物件
4.for...in迴圈遍歷
target目標 origin 起源
function myClone(origin,target){//先看看target有沒有值 var target = target || {}; // 把判斷資料型別的方法賦值給變數 var toStr = Object.prototype.toString; // 把判斷陣列的返回結果賦值給變數 var arrStr = '[object Array]'; // 迴圈遍歷物件 for(var key in origin){ // 判斷物件的屬性/方法是否是自身的 if(origin.hasOwnProperty(key)){ // 利用typeof判斷物件的返回值是否是物件,並且不為空nullif(typeof(origin[key]) == 'object' && origin[key] !== null){ // 核心步驟 // 三元運算子 target[key] = toStr.call(origin[key]) == arrStr ? [] : {}; myClone(origin[key],target[key]); }else{ target[key]= origin[key]; } } } return target; } var obj = { a:'abc', b:{ b1:[1,2,3,4,5], b2:'xyz' }, c:[9,8,7,6,5], d:{ d1:function(){}, d2:{ dd1:'test', dd2:{ ddd1:'demo' } } } } var obj1 = myClone(obj); console.log(obj1);