對象的擴展

對象的擴展

對象字面量的加強

Object.is()

Object.assign()

Object.getOwnPropertyDescriptors()

Object.keys()，Object.values()，Object.entries()

• 對象字面量的加強

對象內屬性簡寫，對象內方法簡寫，注意簡寫的是function不是箭頭函數

const obj = {
  // bar:bar
  bar,
  // method:function(){},
  method(){                     //注意這種簡寫，只是針對function
    console.log(this);          //this指向obj
  },
  [Math.random()]:123,          //計算屬性名
  [1+1]:2
}

• Object.is()

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

與===不一樣之處只有兩個：一是+0不等於-0，二是NaN等於自身。

兩等在比較以前能夠進行類型轉化，三等嚴格判斷類型，對象比較地址值

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

• Object.assign()

Object.assign()方法用於對象的合併，將源對象（source）的全部可枚舉屬性，複製到目標對象（target）

第一個參數是目標對象，後面的參數都是源對象

同名屬性，則後面的屬性會覆蓋前面的屬性

返回值就是目標對象，此時bar引用已經改爲合併後的對象

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

const result = Object.assign(target, source1, source2);   target // {a:1, b:2, c:3}

console.log(result === target) true

• Object.getOwnPropertyDescriptors()

ES5 的Object.getOwnPropertyDescriptor()方法會返回某個對象屬性的描述對象（descriptor）。ES2017 引入了Object.getOwnPropertyDescriptors()方法，返回指定對象全部自身屬性（非繼承屬性）的描述對象

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};

Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

上面代碼中，Object.getOwnPropertyDescriptors()方法返回一個對象，全部原對象的屬性名都是該對象的屬性名，對應的屬性值就是該屬性的描述對象

該方法的引入目的，主要是爲了解決Object.assign()沒法正確拷貝get屬性和set屬性的問題

const source = {
  set foo(value) {
    console.log(value);
  }
};

const target1 = {};
Object.assign(target1, source);

Object.getOwnPropertyDescriptor(target1, 'foo')
// { value: undefined,
//   writable: true,
//   enumerable: true,
//   configurable: true }

上面代碼中，source對象的foo屬性的值是一個賦值函數，Object.assign方法將這個屬性拷貝給target1對象，結果該屬性的值變成了undefined。這是由於Object.assign方法老是拷貝一個屬性的值，而不會拷貝它背後的賦值方法或取值方法。

這時，Object.getOwnPropertyDescriptors()方法配合Object.defineProperties()方法，就能夠實現正確拷貝。

const source = {
  set foo(value) {
    console.log(value);
  }
};

const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
Object.getOwnPropertyDescriptor(target2, 'foo')
// { get: undefined,
//   set: [Function: set foo],
//   enumerable: true,
//   configurable: true }

• Object.keys()，Object.values()，Object.entries()

Object.entries({ [Symbol()]: 123, foo: 'abc' });
// [ [ 'foo', 'abc' ] ]

let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
  console.log(
    `${JSON.stringify(k)}: ${JSON.stringify(v)}`
  );
}
// "one": 1
// "two": 2