複製物件重新賦值不改變原物件

一行註釋發表於2018-05-17
物件賦值
// 直接賦值
 
var  obj1 = { a: 1 };
var  obj2 = obj1;
 
console.log(obj2);  // { a: 1 }
 
// 通過 Object.assign() 這個屬性來進行復制
 
var  obj = { a: 1 };
var  obj2 = Object.assign({}, obj);
 
console.log(obj2);  // { a: 1 }
 
// 通過 for in 迴圈賦值
 
var  obj1={ a: 1, b: { c: 2 }, c: 0 }
var  obj2={}
for (  var  key  in  obj1 ){
     obj2[key]=obj[key]
}
 
console.log(obj2);  // { a: 1, b: { c: 2 }, c: 0 }

// 使用 Object.assign() 方法複製物件
let  obj1 = { a: 0 , b: { c: 0}};
   let  obj2 = Object.assign({}, obj1);
   console.log(JSON.stringify(obj2));  // { a: 0, b: { c: 0}}
   
   obj1.a = 1;
   console.log(JSON.stringify(obj1));  // { a: 1, b: { c: 0}}
   console.log(JSON.stringify(obj2));  // { a: 0, b: { c: 0}}
   
   obj2.a = 2;
   console.log(JSON.stringify(obj1));  // { a: 1, b: { c: 0}}
   console.log(JSON.stringify(obj2));  // { a: 2, b: { c: 0}}
   
   obj2.b.c = 3;
   console.log(JSON.stringify(obj1));  // { a: 1, b: { c: 3}}
   console.log(JSON.stringify(obj2));  // { a: 2, b: { c: 3}}

//得知字串型別可修改，物件失敗， 以上的方法可以封裝成方法方便使用
function cloneObjectFn ( obj ) {
return JSON . parse ( JSON . stringify ( obj ))
}
var obj1={a:1,b:{c:2}}
var obj2= cloneBojectFn(obj2)//複製物件
  obj2.b.c=3;//修改物件
  console.log(obj1)// {a:1,b:{c:2}}
   console.log(obj2)// {a:1,b:{c:3}}


相關文章