js 對象操做 對象原型操做 把一個對象A賦值給另外一個對象B 而且對象B 修改 不會影響 A對象

我最近在作一個vue + element-UI + vue-resource + vuex項目的時候，遇到了一個對象的問題。

當咱們在項目須要 複製一個對象到另外一個對象而且  被複制的對象不能受複製後的對象的影響。

我先總結下 咱們哪些方法能夠複製對象

// 直接賦值

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 }

　以上的方法中 均可以把一個對象的鍵值賦值給另外一個對象（可是咱們能夠測試出來obj2修改他的鍵值，obj1的鍵值也會被修改），

這就跟我家的鑰匙剛開始是一把鑰匙，而後我到配鑰匙的地方配了一把如出一轍的鑰匙，那麼個人這把原來的鑰匙能夠開我家的門，拿我家的東西，那麼配的那把鑰匙，也能夠打開我家的門，拿走我家的東西。

　其實咱們想作的是，咱們心買了一個房子，只是房子裏的東西擺設跟我原來的房子是如出一轍的，惟獨不同的就是，我原來家的鑰匙只能開原來家的門，新家的鑰匙只能開新家的門，雖然兩個房子裏的東西是如出一轍的，可是都是沒有實際的關聯關係。那麼這樣我門須要怎麼作呢。

　咱們能夠先看看下面的這個方法

// 使用 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}}

　　

　　咱們能夠看到上面 Object.assign() 的這個方法雖然能夠複製我第一層的對象值，而且當我obj2修改第一層的數據時，obj1不會受到影響。

　　可是咱們在修改obj2 裏 b 對象裏的c的值得時候，這個時候 obj1 裏的 b 對象裏的 c 的值也發生了改變，這就說明了，Object.assign()這個方法不是深層的複製對象，只是讓對象裏第一層的數據沒有了關聯性，可是對象內的對象則跟被複制的對象有着關聯性的。那麼咱們其實能夠想象，怎麼才能讓他們徹底沒有關聯性沒呢。

　　字符串類型 和 對象類型 確定是沒有關聯性的 ，由於它們的類型都不同，確定是沒有可比性和關聯性的。 有了這樣的想法我以爲咱們就有辦法決絕這個問題了；

　　

// 這個最簡單暴力的處理 兩個對象的關聯性的問題

  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

　　上面的代碼已經能夠體現出來咱們剛纔的一個假設，咱們先把obj1 轉成了字符串類型， 這樣他就失去了對象的屬性和一切的特性，而後咱們再把它轉成一個對象類型，這樣咱們心生成的對象是經過字符串轉換過來的，已是一個新的對象，而後再賦值給obj2 ，這樣就至關於，我把我原來家的佈置等東西，用設計稿的方式展示出來，而後咱們又買了一個新家，按着原來的設計方式重構了出來，這樣兩個房子的內飾是如出一轍的，可是門的鑰匙不同，這樣就失去了之前的關聯性。

以上的方法能夠封裝成方法方便使用

var function cloneObjectFn (obj){ // 對象複製
    return JSON.parse(JSON.stringify(obj))
}

var obj1={a:2,b{c:0}}
var obj2=cloneObjectFn(obj1)
console.log(obj2)    // {a:2,b{c:0}}

　　

第一次寫博客，寫的很差的地方但願各位不要噴(*^__^*)