js 對象操作 對象原型操作 把一個對象A賦值給另一個對象B 並且對象B 修改 不會影響 A對象
我最近在做一個vue + element-UI + vue-resource + vuex項目的時候，遇到了一個對象的問題。
當我們在項目需要 復制一個對象到另一個對象並且 被復制的對象不能受復制后的對象的影響。
我先總結下 我們哪些方法可以復制對象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// 直接賦值
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的鍵值也會被修改），
這就跟我家的鑰匙剛開始是一把鑰匙，然后我到配鑰匙的地方配了一把一模一樣的鑰匙，那么我的這把原來的鑰匙可以開我家的門，拿我家的東西，那么配的那把鑰匙，也可以打開我家的門，拿走我家的東西。
其實我們想做的是，我們心買了一個房子，只是房子里的東西擺設跟我原來的房子是一模一樣的，唯獨不一樣的就是，我原來家的鑰匙只能開原來家的門，新家的鑰匙只能開新家的門，雖然兩個房子里的東西是一模一樣的，但是都是沒有實際的關聯關系。那么這樣我門需要怎么做呢。
我們可以先看看下面的這個方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 使用 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()這個方法不是深層的復制對象，只是讓對象里第一層的數據沒有了關聯性，但是對象內的對象則跟被復制的對象有着關聯性的。那么我們其實可以想象，怎么才能讓他們完全沒有關聯性沒呢。
字符串類型 和 對象類型 肯定是沒有關聯性的 ，因為它們的類型都不一樣，肯定是沒有可比性和關聯性的。 有了這樣的想法我覺得我們就有辦法決絕這個問題了；
|
1
2
3
4
5
6
7
|
// 這個最簡單暴力的處理 兩個對象的關聯性的問題
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 ，這樣就相當於，我把我原來家的布置等東西，用設計稿的方式展現出來，然后我們又買了一個新家，按着原來的設計方式重構了出來，這樣兩個房子的內飾是一模一樣的，但是門的鑰匙不一樣，這樣就失去了以前的關聯性。
以上的方法可以封裝成方法方便使用
|
1
2
3
4
5
6
7
|
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}}
|
第一次寫博客，寫的不好的地方希望各位不要噴(*^__^*)