js內建物件

前端小白。。發表於2023-11-17

Js 標準內建物件

Object

Object 是 JavaScript 的一種資料型別。它用於儲存各種鍵值集合和更復雜的實體。可以透過 Object() 建構函式或者使用物件字面量的方式建立物件。

Object.assign()

Object.assign() 靜態方法將一個或者多個源物件中所有可列舉自有屬性複製到目標物件,並返回修改後的目標物件。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source); 
// target 目標物件 需要應用源物件屬性的目標物件,修改後將作為返回值
// source 源物件

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

描述

如果目標物件與源物件具有相同的鍵(屬性名),則目標物件中的屬性將被源物件中的屬性覆蓋,後面的源物件的屬性將類似地覆蓋前面的源物件的同名屬性。

Object.assign() 方法只會複製源物件可列舉的自有屬性到目標物件。該方法在源物件上使用 [[Get]],在目標物件上使用 [[Set]],因此它會呼叫 gettersetter。故它對屬性進行賦值,而不僅僅是複製或定義新的屬性。如果合併源物件包含 getter 的新屬性到原型中,則可能不適合使用此方法。

如果要將屬性定義(包括它們的可列舉性)複製到原型中,則應改用 Object.getOwnPropertyDescriptor()Object.defineProperty() 方法。

字串Symbol 型別屬性都會被複制。

如果賦值期間出錯,例如如果屬性不可寫,則會丟擲 TypeError;如果在丟擲異常之前已經新增了一些屬性,則這些屬性會被保留,而 target 物件也會被修改。

備註: Object.assign() 不會在源物件值為 nullundefined 時丟擲錯誤

  1. 複製物件
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
  1. 深複製問題

    針對深複製,需要使用其他辦法,因為 Object.assign() 只複製屬性值。

    const obj1 = { a: 0, b: { c: 0 } };
    const obj2 = Object.assign({}, obj1);
    console.log(obj2); // { a: 0, b: { c: 0 } }
    
    obj1.a = 1;
    console.log(obj1); // { a: 1, b: { c: 0 } }
    console.log(obj2); // { a: 0, b: { c: 0 } }
    
    obj2.a = 2;
    console.log(obj1); // { a: 1, b: { c: 0 } }
    console.log(obj2); // { a: 2, b: { c: 0 } }
    
    // 假如源物件是一個物件的引用,它僅僅會複製其引用值。
    obj2.b.c = 3;
    console.log(obj1); // { a: 1, b: { c: 3 } }
    console.log(obj2); // { a: 2, b: { c: 3 } }
    
    // 深複製
    const obj3 = { a: 0, b: { c: 0 } };
    const obj4 = JSON.parse(JSON.stringify(obj3));
    obj3.a = 4;
    obj3.b.c = 4;
    console.log(obj4); // { a: 0, b: { c: 0 } }
    
    
    1. 合併物件
    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 },目標物件本身發生了變化
    
    // 合併具有相同屬性的物件   
    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. 複製 Symbol 型別屬性

    const o1 = { a: 1 };
    const o2 = { [Symbol("foo")]: 2 };
    
    const obj = Object.assign({}, o1, o2);
    console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
    Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
    
    
    1. 原型鏈上的屬性和不可列舉的屬性不能被複制

    2. 基本型別會被封裝為物件

    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" }
    
    
    1. 異常會中斷後續的複製

相關文章