1. 程式人生 > 實用技巧 >8.Object.assign ()原物件的屬性和方法都合併到了目標物件

8.Object.assign ()原物件的屬性和方法都合併到了目標物件

https://www.jianshu.com/p/9e2a78a35b04

主要的用途是用來合併多個JavaScript的物件。

Object.assign()介面可以接收多個引數,第一個引數是目標物件,後面的都是源物件,assign方法將多個原物件的屬性和方法都合併到了目標物件上面,如果在這個過程中出現同名的屬性(方法),後合併的屬性(方法)會覆蓋之前的同名屬性(方法)。
語法: Object.assign(target, …sources) target: 目標物件,sources: 源物件
用於將所有可列舉屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。

一.淺拷貝:複製的只是引用,原物件屬性的改變會引起拷貝物件對應引用屬性的變化。

使用Object.assign()(只能拷貝第一層)

let a = {
    name:'tom',
    age:20,
    friends:{
        student:['jack']
    }
}
let b = Object.assign({},a);
a.friends.student = ['tony'];
console.log(a);// { name: 'tom', age: 20, friends: { student: [ 'tony' ] } }
console.log(b);// { name: 'tom', age: 20, friends: { student: [ 'tony' ] } }

二.深拷貝:開闢新的記憶體空間,原物件與拷貝物件之間沒有影響。

使用JSON.parse()加JSON.stringify()

let obj = {
  name:'tom',
  age:10,
  friend:{
    name:'jack'
  }
};
let copy = JSON.parse(JSON.stringify(obj));
obj.name = 'elric';
console.log(obj);// {name: "elric", age: 10, friend: {…}}
console.log(copy);// {name: "tom", age: 10, friend: {…}}

copy物件的name沒有因為obj的name變化而變化,說明該方法實現了深拷貝。缺陷:無法拷貝函式、undefined

一、Object.assign()物件的拷貝

Object.assign() 方法用於將所有可列舉屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。
Object.assign(target, ...sources)    【target:目標物件】,【souce:源物件(可多個)】
舉個栗子:
const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
console.log(object1)  // { a: 1, b: 2, c: 3 }
console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }

注意:
1.如果目標物件中的屬性具有相同的鍵,則屬性將被源物件中的屬性覆蓋。後面的源物件的屬性將類似地覆蓋前面的源物件的屬性
2.Object.assign 方法只會拷貝源物件自身的並且可列舉的屬性到目標物件。該方法使用源物件的[[Get]]和目標
物件的[[Set]],所以它會呼叫相關 getter 和 setter。因此,它分配屬性,而不僅僅是複製或定義新的屬性。如
果合併源包含getter,這可能使其不適合將新屬性合併到原型中。為了將屬性定義(包括其可列舉性)複製到
原型,應使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

二、Object.assign()物件的深拷貝

針對深拷貝,需要使用其他辦法,因為 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}} 
最後一次賦值的時候,b是值是物件的引用,只要修改任意一個,其他的也會受影響

// Deep Clone (深拷貝)
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}}

3、物件的合併

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目標物件自身也會改變。
其實就是物件的拷貝,o1就是目標物件,後面的是源物件,後面的屬性等會拷貝到目標物件

4、合併具有相同屬性的物件

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
1.屬性被後續引數中具有相同屬性的其他物件覆蓋。
2.目標物件的屬性與源物件的屬性相同,源的會覆蓋目標的屬性

5.繼承屬性和不可列舉屬性是不能拷貝

const obj = Object.create({foo: 1}, { // foo 是個繼承屬性。
    bar: {
        value: 2  // bar 是個不可列舉屬性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是個自身可列舉屬性。
    }
});
建立物件時,如果沒有設定enumerable的值,預設為false(不可列舉屬性),設定為true,則為可列舉屬性
const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

6.原始型別會被包裝為物件

const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo")

const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始型別會被包裝,null 和 undefined 會被忽略。
// 注意,只有字串的包裝物件才可能有自身可列舉屬性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

7.異常會打斷後續拷貝任務

const target = Object.defineProperty({}, "foo", {
    value: 1,
    writable: false
}); // target 的 foo 屬性是個只讀屬性。

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意這個異常是在拷貝第二個源物件的第二個屬性時發生的。

console.log(target.bar);  // 2,說明第一個源物件拷貝成功了。
console.log(target.foo2); // 3,說明第二個源物件的第一個屬性也拷貝成功了。
console.log(target.foo);  // 1,只讀屬性不能被覆蓋,所以第二個源物件的第二個屬性拷貝失敗了。
console.log(target.foo3); // undefined,異常之後 assign 方法就退出了,第三個屬性是不會被拷貝到的。
console.log(target.baz);  // undefined,第三個源物件更是不會被拷貝到的。


作者:小棋子js
連結:https://www.jianshu.com/p/9e2a78a35b04
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。