js 物件複製 物件原型操作 把一個物件A賦值給另一個物件B 並且物件B 修改 不會影響 A物件
我最近在做一個vue + element-UI + vue-resource + vuex專案的時候，遇到了一個物件的問題。
當我們在專案需要 複製一個物件到另一個物件並且 被複制的物件不能受複製後的物件的影響。
我先總結下 我們哪些方法可以複製物件
| 1234567891011121314151617181920212223 | // 直接賦值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的鍵值也會被修改），
這就跟我家的鑰匙剛開始是一把鑰匙，然後我到配鑰匙的地方配了一把一模一樣的鑰匙，那麼我的這把原來的鑰匙可以開我家的門，拿我家的東西，那麼配的那把鑰匙，也可以開啟我家的門，拿走我家的東西。
其實我們想做的是，我們心買了一個房子，只是房子裡的東西擺設跟我原來的房子是一模一樣的，唯獨不一樣的就是，我原來家的鑰匙只能開原來家的門，新家的鑰匙只能開新家的門，雖然兩個房子裡的東西是一模一樣的，但是都是沒有實際的關聯關係。那麼這樣我門需要怎麼做呢。
我們可以先看看下面的這個方法
| 12345678910111213141516 | // 使用 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()這個方法不是深層的複製物件，只是讓物件裡第一層的資料沒有了關聯性，但是物件內的物件則跟被複制的物件有著關聯性的。那麼我們其實可以想象，怎麼才能讓他們完全沒有關聯性沒呢。
字串型別 和 物件型別 肯定是沒有關聯性的 ，因為它們的型別都不一樣，肯定是沒有可比性和關聯性的。 有了這樣的想法我覺得我們就有辦法決絕這個問題了；
| 1234567 | // 這個最簡單暴力的處理 兩個物件的關聯性的問題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 ，這樣就相當於，我把我原來家的佈置等東西，用設計稿的方式展現出來，然後我們又買了一個新家，按著原來的設計方式重構了出來，這樣兩個房子的內飾是一模一樣的，但是門的鑰匙不一樣，這樣就失去了以前的關聯性。
以上的方法可以封裝成方法方便使用
| 1234567 | 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}} |