js 對象操作問題:把一個對象A賦值給另一個對象B (1)對象B 修改 不會影響 A對象(2)對象B修改影響 A對象

js 對象操作 對象原型操作 把一個對象A賦值給另一個對象B 並且對象B 修改 不會影響 A對象
我最近在做一個vue + element-UI + vue-resource + vuex項目的時候,遇到了一個對象的問題。

當我們在項目需要 複製一個對象到另一個對象並且 被複制的對象不能受複製後的對象的影響。

對象B修改影響 A對象(Object.assign特殊)

我先總結下 我們哪些方法可以複製對象

// 直接賦值
 
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的鍵值也會被修改),

這就跟我家的鑰匙剛開始是一把鑰匙,然後我到配鑰匙的地方配了一把一模一樣的鑰匙,那麼我的這把原來的鑰匙可以開我家的門,拿我家的東西,那麼配的那把鑰匙,也可以打開我家的門,拿走我家的東西。

其實我們想做的是,我們心買了一個房子,只是房子裏的東西擺設跟我原來的房子是一模一樣的,唯獨不一樣的就是,我原來家的鑰匙只能開原來家的門,新家的鑰匙只能開新家的門,雖然兩個房子裏的東西是一模一樣的,但是都是沒有實際的關聯關係。那麼這樣我門需要怎麼做呢。

對象B 修改 不會影響 A對象

我們可以先看看下面的這個方法

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

轉載於 https://www.cnblogs.com/xuanyubk/p/7779420.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章