ES6之對象的擴展

對象字面量語法的擴展

屬性初始化器的速記法

ES6 允許直接寫入變量和函數，作爲對象的屬性和方法。這樣的書寫更加簡潔。ES6 允許在對象之中，直接寫變量。這時，屬性名爲變量名, 屬性值爲變量的值。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同於
const baz = {foo: foo};

function f(x, y) {
  return {x, y};
}

// 等同於

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

方法簡寫

除了屬性簡寫，方法也可以簡寫。

const o = {
  method() {
    return "Hello!";
  }
};

// 等同於

const o = {
  method: function() {
    return "Hello!";
  }
};

let birth = '2000/01/01';

const Person = {

  name: '張三',

  //等同於birth: birth
  birth,

  // 等同於hello: function ()...
  hello() { console.log('我的名字是', this.name); }

};

CommonJS 模塊輸出一組變量，就非常合適使用簡潔寫法。

let ms = {};

function getItem (key) {
  return key in ms ? ms[key] : null;
}

function setItem (key, value) {
  ms[key] = value;
}

function clear () {
  ms = {};
}

module.exports = { getItem, setItem, clear };
// 等同於
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
};

如果某個方法的值是一個 Generator 函數，前面需要加上星號。

const obj = {
  * m() {
    yield 'hello world';
  }
};

注意，簡潔寫法的屬性名總是字符串，這會導致一些看上去比較奇怪的結果。class是字符串，所以不會因爲它屬於關鍵字，而導致語法解析報錯。

const obj = {
  class () {}
};

// 等同於

var obj = {
  'class': function() {}
};

需計算屬性名

但是，如果使用字面量方式定義對象（使用大括號），在 ES5 中只能使用標識符定義屬性。

var obj = {
  foo: true,
  abc: 123
};

ES6 允許字面量定義對象時，用方法二（表達式）作爲對象的屬性名，即把表達式放在方括號內。

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

let lastWord = 'last word';

const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

注意，屬性名表達式與簡潔表示法，不能同時使用，會報錯。

// 報錯
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

// 正確
const foo = 'bar';
const baz = { [foo]: 'abc'};

注意，屬性名表達式如果是一個對象，默認情況下會自動將對象轉爲字符串[object Object]，這一點要特別小心。

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};

myObject // Object {[object Object]: "valueB"}

重複的對象字面量屬性

ES5嚴格模式爲重複的對象字面量屬性引入了一個檢查，若找到重複的屬性名，就會拋出錯誤。例如，以下代碼就有問題。
但ES6移除了重複屬性的檢查，嚴格模式與非嚴格模式都不再檢查重複的屬性。當存在重複屬性時，排在後面的屬性的值會成爲該屬性的實際值，如下所示：

"use strict";

var    person = {
    name: "Nicholas",
    name: "Greg"//在ES6嚴格模式中不會出錯
};

console.log(person.name);//    "Greg"

屬性的可枚舉性和遍歷

可枚舉性

描述對象的enumerable屬性，稱爲”可枚舉性“，如果該屬性爲false，就表示某些操作會忽略當前屬性。
目前，有四個操作會忽略enumerable爲false的屬性。

• for...in循環：只遍歷對象自身的和繼承的可枚舉的屬性。
• Object.keys()：返回對象自身的所有可枚舉的屬性的鍵名。
• JSON.stringify()：只串行化對象自身的可枚舉的屬性。
• Object.assign()： 忽略enumerable爲false的屬性，只拷貝對象自身的可枚舉的屬性。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false

Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

ES6 規定，所有Class的原型的方法都是不可枚舉的。

Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false

總的來說，操作中引入繼承的屬性會讓問題複雜化，大多數時候，我們只關心對象自身的屬性。所以，儘量不要用for...in循環，而用Object.keys()代替。

屬性的遍歷

ES6 一共有 5 種方法可以遍歷對象的屬性。

for...in

for...in循環遍歷對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。

Object.keys(obj)

Object.keys返回一個數組，包括對象自身的（不含繼承的）所有可枚舉屬性（不含Symbol屬性）的鍵名。

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個數組，包含對象自身的所有屬性（不含Symbol屬性，但是包括不可枚舉屬性）的鍵名。

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertyNames返回一個數組，包含對象自身的所有屬性（不含Symbol屬性，但是包括不可枚舉屬性）的鍵名。

Reflect.ownKeys(obj)

Reflect.ownKeys返回一個數組，包含對象自身的所有鍵名，不管鍵名是Symbol或字符串，也不管是否可枚舉。

自有屬性的枚舉順序

• 首先遍歷所有數值鍵，按照數值升序排列。
• 其次遍歷所有字符串鍵，按照加入時間升序排列。
• 最後遍歷所有 Symbol 鍵，按照加入時間升序排列。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

super 關鍵字

ES6 又新增了另一個類似的關鍵字super，指向當前對象的原型對象。

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello

注意，super關鍵字表示原型對象時，只能用在對象的方法之中，用在其他地方都會報錯。

// 報錯
const obj = {
  foo: super.foo
}

// 報錯
const obj = {
  foo: () => super.foo
}

// 報錯
const obj = {
  foo: function () {
    return super.foo
  }
}

上面三種super的用法都會報錯，因爲對於 JavaScript 引擎來說，這裏的super都沒有用在對象的方法之中。第一種寫法是super用在屬性裏面，第二種和第三種寫法是super用在一個函數裏面，然後賦值給foo屬性。目前，只有對象方法的簡寫法可以讓 JavaScript 引擎確認，定義的是對象的方法。
super是指向當前對象的原型的一個指針，實際上就是Object.getPrototypeOf(this)的值。

const proto = {
  x: 'hello',
  foo() {
    console.log(this.x);
  },
};

const obj = {
  x: 'world',
  foo() {
    super.foo();
  }
}

Object.setPrototypeOf(obj, proto);

obj.foo() // "world"

正式的“方法”定義

在ES6之前，“方法”的概念從未被正式定義，它此前僅指對象的函數屬性（而非數據屬性）。ES6則正式做出了定義：方法是一個擁有[[Homeobject]]內部屬性的函數，此內部屬性指向該方法所屬的對象。
任何對super的引用都會使用[[Homeobject]]屬性來判斷要做什麼。第一步是在[[Homeobject]]上調用Object.getPrototypeof（）來獲取對原型的引用；接下來，在該原型上查找同名函數；最後，創建this綁定並調用該方法。這裏有個例子：

let    person    =    {
        getGreeting()    {
            return    "Hello";
        }
};

//    原型爲    person
let    friend    =    {
        getGreeting()    {
            return    super.getGreeting()    +    ",    hi!";
        }
};
Object.setPrototypeOf(friend,    person);

console.log(friend.getGreeting());//"Hello,    hi!"

調用friend.getsreeting（）返回了一個字符串，也就是person.getoreeting（）的返回值與"，hi！”的合併結果。此時friend.getGreeting（）的[[Homeobject]]值是friend，並且friend的原型是person，因此super.getGreeting（）就等價於person.getGreeting.call（this）。

對象的新增方法

ES從ES5開始就有一個設計意圖：避免創建新的全局函數，避免在object對象的原型上添加新方法，而是嘗試尋找哪些對象應該被添加新方法。因此，對其他對象不適用的新方法就被添加到全局的Object對象上。ES6在Object對象上引入了兩個新方法:Object.is()方法和Object.assign()方法，以便讓特定任務更易完成。

Object .is()真正的兩個值是否相等

ES5 比較兩個值是否相等，只有兩個運算符：相等運算符（==）和嚴格相等運算符（===）。它們都有缺點，前者會自動轉換數據類型，後者的NaN不等於自身，以及+0等於-0。JavaScript缺乏一種運算，在所有環境中，只要兩個值是一樣的，它們就應該相等。
ES6 提出“Same-value equality”（同值相等）算法，用來解決這個問題。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

ES5可以通過下面的代碼，部署 Object .is()。

Object.defineProperty(Object, 'is', {
  value: function(x, y) {
    if (x === y) {
      // 針對+0 不等於 -0的情況
      return x !== 0 || 1 / x === 1 / y;
    }
    // 針對NaN的情況
    return x !== x && y !== y;
  },
  configurable: true,
  enumerable: false,
  writable: true
});

Object.assign()用於對象的合併

混入（Mixin）是在JS中組合對象時最流行的模式。在一次混入中，一個對象會從另一個對象中接收屬性與方法。很多JS的庫中都有類似下面的混入方法：

function    mixin(receiver,    supplier)    {
    Object.keys(supplier).forEach(function(key)    {
            receiver[key]    =    supplier[key];
    });

    return    receiver;
}

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

const target = { a: 1 };

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

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

注意，如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性。

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

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

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

如果該參數不是對象，則會先轉成對象，然後返回。

typeof Object.assign(2) // "object"

由於undefined和null無法轉成對象，所以如果它們作爲參數，就會報錯。

Object.assign(undefined) // 報錯
Object.assign(null) // 報錯

如果非對象參數出現在源對象的位置（即非首參數），那麼處理規則有所不同。首先，這些參數都會轉成對象，如果無法轉成對象，就會跳過。這意味着，如果undefined和null不在首參數，就不會報錯。

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

屬性名爲 Symbol值的屬性，也會被Object.assign拷貝。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

Object.assign可以用來處理數組，但是會把數組視爲對象。

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

取值函數的處理

const source = {
  get foo() { return 1 }
};
const target = {};

Object.assign(target, source)
// { foo: 1 }

其他類型的值（即數值、字符串和布爾值）不在首參數，也不會報錯。但是，除了字符串會以數組形式，拷貝入目標對象，其他值都不會產生效果。

const v1 = 'abc';
const v2 = true;
const v3 = 10;

const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

Object(true) // {[[PrimitiveValue]]: true}
Object(10)  //  {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上面代碼中，布爾值、數值、字符串分別轉成對應的包裝對象，可以看到它們的原始值都在包裝對象的內部屬性[[PrimitiveValue]]上面，這個屬性是不會被Object.assign拷貝的。只有字符串的包裝對象，會產生可枚舉的實義屬性，那些屬性則會被拷貝。
Object.assign拷貝的屬性是有限制的，只拷貝源對象的自身屬性（不拷貝繼承屬性），也不拷貝不可枚舉的屬性（enumerable: false）。

Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
)
// { b: 'c' }

常見用途

爲對象添加屬性

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

爲對象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

// 等同於下面的寫法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

克隆對象

function clone(origin) {
  return Object.assign({}, origin);
}

不過，採用這種方法克隆，只能克隆原始對象自身的值，不能克隆它繼承的值。如果想要保持繼承鏈，可以採用下面的代碼。

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

合併多個對象

將多個對象合併到某個對象。

const merge =
  (target, ...sources) => Object.assign(target, ...sources);

如果希望合併後返回一個新對象，可以改寫上面函數，對一個空對象合併。

const merge =
  (...sources) => Object.assign({}, ...sources);

爲屬性指定默認值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

注意，由於存在淺拷貝的問題，DEFAULTS對象和options對象的所有屬性的值，最好都是簡單類型，不要指向另一個對象。否則，DEFAULTS對象的該屬性很可能不起作用。

const DEFAULTS = {
  url: {
    host: 'example.com',
    port: 7070
  },
};

processContent({ url: {port: 8000} })
// {
//   url: {port: 8000}
// }

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 } }

模擬一個：

function getOwnPropertyDescriptors(obj) {
  const result = {};
  for (let key of Reflect.ownKeys(obj)) {
    result[key] = Object.getOwnPropertyDescriptor(obj, key);
  }
  return result;
}

該方法的引入目的，主要是爲了解決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.setPrototypeOf()設置對象的原型對象

__proto__屬性（前後各兩個下劃線），用來讀取或設置當前對象的prototype對象。目前，所有瀏覽器（包括 IE11）都部署了這個屬性。
該屬性沒有寫入ES6的正文，而是寫入了附錄，原因是__proto__前後的雙下劃線，說明它本質上是一個內部屬性，而不是一個正式的對外的API，只是由於瀏覽器廣泛支持，才被加入了ES6。標準明確規定，只有瀏覽器必須部署這個屬性，其他運行環境不一定需要部署，而且新的代碼最好認爲這個屬性是不存在的。因此，無論從語義的角度，還是從兼容性的角度，都不要使用這個屬性，而是使用下面的Object.setPrototypeOf()（寫操作）、Object.getPrototypeOf()（讀操作）、Object.create()（生成操作）代替。

Object.setPrototypeOf方法的作用__proto__相同，用來設置一個對象的prototype對象，返回參數對象本身。它是ES6正式推薦的設置原型對象的方法。

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null);
let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40

如果第一個參數不是對象，會自動轉爲對象。但是由於返回的還是第一個參數，所以這個操作不會產生任何效果。

Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true

由於undefined和null無法轉爲對象，所以如果第一個參數是undefined或null，就會報錯。

Object.getPrototypeOf()讀取對象的原型對象

function Rectangle() {
  // ...
}

const rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangle.prototype
// true

Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false

如果參數不是對象，會被自動轉爲對象。

// 等同於 Object.getPrototypeOf(Number(1))
Object.getPrototypeOf(1)
// Number {[[PrimitiveValue]]: 0}

// 等同於 Object.getPrototypeOf(String('foo'))
Object.getPrototypeOf('foo')
// String {length: 0, [[PrimitiveValue]]: ""}

// 等同於 Object.getPrototypeOf(Boolean(true))
Object.getPrototypeOf(true)
// Boolean {[[PrimitiveValue]]: false}

Object.getPrototypeOf(1) === Number.prototype // true
Object.getPrototypeOf('foo') === String.prototype // true
Object.getPrototypeOf(true) === Boolean.prototype // true

如果參數是undefined或null，它們無法轉爲對象，所以會報錯。

Object.keys()返回自身屬性的鍵名的數組

ES5 引入了Object.keys方法，返回一個數組，成員是參數對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵名。

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作爲遍歷一個對象的補充手段，供for...of循環使用。

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

Object.values()返回自身屬性的鍵值的數組

Object.values方法返回一個數組，成員是參數對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值。

const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

Object.values只返回對象自身的可遍歷屬性。

const obj = Object.create({}, {p: {value: 42}});
Object.values(obj) // []

Object.values會過濾屬性名爲 Symbol 值的屬性。

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

如果Object.values方法的參數是一個字符串，會返回各個字符組成的一個數組。

Object.values('foo')
// ['f', 'o', 'o']

如果參數不是對象，Object.values會先將其轉爲對象。由於數值和布爾值的包裝對象，都不會爲實例添加非繼承的屬性。所以，Object.values會返回空數組。

Object.values(42) // []
Object.values(true) // []

Object.entries()返回自身屬性的鍵值對數組

Object.entries()方法返回一個數組，成員是參數對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對數組。

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

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

Object.entries方法的另一個用處是，將對象轉爲真正的Map結構。

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

自己實現Object.entries方法，非常簡單。

// Generator函數的版本
function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

// 非Generator函數的版本
function entries(obj) {
  let arr = [];
  for (let key of Object.keys(obj)) {
    arr.push([key, obj[key]]);
  }
  return arr;
}

Object.fromEntries()將鍵值對數組轉爲對象

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }

該方法的主要目的，是將鍵值對的數據結構還原爲對象，因此特別適合將 Map 結構轉爲對象。

// 例一
const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

Object.fromEntries(entries)
// { foo: "bar", baz: 42 }

// 例二
const map = new Map().set('foo', true).set('bar', false);
Object.fromEntries(map)
// { foo: true, bar: false }

該方法的一個用處是配合URLSearchParams對象，將查詢字符串轉爲對象。

Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// { foo: "bar", baz: "qux" }

參考文章ECMAScript 6 入門