1. 程式人生 > 其它 >js中的深度克隆和淺度克隆

js中的深度克隆和淺度克隆

淺度克隆

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判斷物件的返回值是否是物件,並且不為空null
  if(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);