# 對象的擴展
## 屬性的簡潔表示法
ES6允許直接寫入變量和函數，作為對象的屬性和方法。這樣的書寫更加簡潔。
~~~
var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}
// 等同于
var baz = {foo: foo};
~~~
上面代碼表明，ES6允許在對象之中，只寫屬性名，不寫屬性值。這時，屬性值等于屬性名所代表的變量。下面是另一個例子。
~~~
function f(x, y) {
return {x, y};
}
// 等同于
function f(x, y) {
return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}
~~~
除了屬性簡寫，方法也可以簡寫。
~~~
var o = {
method() {
return "Hello!";
}
};
// 等同于
var o = {
method: function() {
return "Hello!";
}
};
~~~
下面是一個實際的例子。
~~~
var birth = '2000/01/01';
var Person = {
name: '張三',
//等同于birth: birth
birth,
// 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); }
};
~~~
這種寫法用于函數的返回值，將會非常方便。
~~~
function getPoint() {
var x = 1;
var y = 10;
return {x, y};
}
getPoint()
// {x:1, y:10}
~~~
CommonJS模塊輸出變量，就非常合適使用簡潔寫法。
~~~
var 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
};
~~~
屬性的賦值器（setter）和取值器（getter），事實上也是采用這種寫法。
~~~
var cart = {
_wheels: 4,
get wheels () {
return this._wheels;
},
set wheels (value) {
if (value < this._wheels) {
throw new Error('數值太小了！');
}
this._wheels = value;
}
}
~~~
注意，簡潔寫法的屬性名總是字符串，這會導致一些看上去比較奇怪的結果。
~~~
var obj = {
class () {}
};
// 等同于
var obj = {
'class': function() {}
};
~~~
上面代碼中，`class`是字符串，所以不會因為它屬于關鍵字，而導致語法解析報錯。
如果某個方法的值是一個Generator函數，前面需要加上星號。
~~~
var obj = {
* m(){
yield 'hello world';
}
};
~~~
## 屬性名表達式
JavaScript語言定義對象的屬性，有兩種方法。
~~~
// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;
~~~
上面代碼的方法一是直接用標識符作為屬性名，方法二是用表達式作為屬性名，這時要將表達式放在方括號之內。
但是，如果使用字面量方式定義對象（使用大括號），在ES5中只能使用方法一（標識符）定義屬性。
~~~
var obj = {
foo: true,
abc: 123
};
~~~
ES6允許字面量定義對象時，用方法二（表達式）作為對象的屬性名，即把表達式放在方括號內。
~~~
let propKey = 'foo';
let obj = {
[propKey]: true,
['a' + 'bc']: 123
};
~~~
下面是另一個例子。
~~~
var lastWord = 'last word';
var a = {
'first word': 'hello',
[lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"
~~~
表達式還可以用于定義方法名。
~~~
let obj = {
['h'+'ello']() {
return 'hi';
}
};
obj.hello() // hi
~~~
注意，屬性名表達式與簡潔表示法，不能同時使用，會報錯。
~~~
// 報錯
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };
// 正確
var foo = 'bar';
var baz = { [foo]: 'abc'};
~~~
## 方法的name屬性
函數的`name`屬性，返回函數名。對象方法也是函數，因此也有`name`屬性。
~~~
var person = {
sayName() {
console.log(this.name);
},
get firstName() {
return "Nicholas";
}
};
person.sayName.name // "sayName"
person.firstName.name // "get firstName"
~~~
上面代碼中，方法的`name`屬性返回函數名（即方法名）。如果使用了取值函數，則會在方法名前加上`get`。如果是存值函數，方法名的前面會加上`set`。
有兩種特殊情況：`bind`方法創造的函數，`name`屬性返回“bound”加上原函數的名字；`Function`構造函數創造的函數，`name`屬性返回“anonymous”。
~~~
(new Function()).name // "anonymous"
var doSomething = function() {
// ...
};
doSomething.bind().name // "bound doSomething"
~~~
如果對象的方法是一個Symbol值，那么`name`屬性返回的是這個Symbol值的描述。
~~~
const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
[key1]() {},
[key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // ""
~~~
上面代碼中，`key1`對應的Symbol值有描述，`key2`沒有。
## 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()
### 基本用法
`Object.assign`方法用于對象的合并，將源對象（source）的所有可枚舉屬性，復制到目標對象（target）。
~~~
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
~~~
`Object.assign`方法的第一個參數是目標對象，后面的參數都是源對象。
注意，如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性。
~~~
var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
~~~
如果只有一個參數，`Object.assign`會直接返回該參數。
~~~
var obj = {a: 1};
Object.assign(obj) === obj // true
~~~
如果該參數不是對象，則會先轉成對象，然后返回。
~~~
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
~~~
其他類型的值（即數值、字符串和布爾值）不在首參數，也不會報錯。但是，除了字符串會以數組形式，拷貝入目標對象，其他值都不會產生效果。
~~~
var v1 = 'abc';
var v2 = true;
var v3 = 10;
var obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
~~~
上面代碼中，`v1`、`v2`、`v3`分別是字符串、布爾值和數值，結果只有字符串合入目標對象（以字符數組的形式），數值和布爾值都會被忽略。這是因為只有字符串的包裝對象，會產生可枚舉屬性。
~~~
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' }
~~~
上面代碼中，`Object.assign`要拷貝的對象只有一個不可枚舉屬性`invisible`，這個屬性并沒有被拷貝進去。
屬性名為Symbol值的屬性，也會被`Object.assign`拷貝。
~~~
Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }
~~~
### 注意點
`Object.assign`方法實行的是淺拷貝，而不是深拷貝。也就是說，如果源對象某個屬性的值是對象，那么目標對象拷貝得到的是這個對象的引用。
~~~
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
~~~
上面代碼中，源對象`obj1`的`a`屬性的值是一個對象，`Object.assign`拷貝得到的是這個對象的引用。這個對象的任何變化，都會反映到目標對象上面。
對于這種嵌套的對象，一旦遇到同名屬性，`Object.assign`的處理方法是替換，而不是添加。
~~~
var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }
~~~
上面代碼中，`target`對象的`a`屬性被`source`對象的`a`屬性整個替換掉了，而不會得到`{ a: { b: 'hello', d: 'e' } }`的結果。這通常不是開發者想要的，需要特別小心。
有一些函數庫提供`Object.assign`的定制版本（比如Lodash的`_.defaultsDeep`方法），可以解決淺拷貝的問題，得到深拷貝的合并。
注意，`Object.assign`可以用來處理數組，但是會把數組視為對象。
~~~
Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
~~~
上面代碼中，`Object.assign`把數組視為屬性名為0、1、2的對象，因此目標數組的0號屬性`4`覆蓋了原數組的0號屬性`1`。
### 常見用途
`Object.assign`方法有很多用處。
**（1）為對象添加屬性**
~~~
class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}
~~~
上面方法通過`Object.assign`方法，將`x`屬性和`y`屬性添加到`Point`類的對象實例。
**（2）為對象添加方法**
~~~
Object.assign(SomeClass.prototype, {
someMethod(arg1, arg2) {
···
},
anotherMethod() {
···
}
});
// 等同于下面的寫法
SomeClass.prototype.someMethod = function (arg1, arg2) {
···
};
SomeClass.prototype.anotherMethod = function () {
···
};
~~~
上面代碼使用了對象屬性的簡潔表示法，直接將兩個函數放在大括號中，再使用assign方法添加到SomeClass.prototype之中。
**（3）克隆對象**
~~~
function clone(origin) {
return Object.assign({}, origin);
}
~~~
上面代碼將原始對象拷貝到一個空對象，就得到了原始對象的克隆。
不過，采用這種方法克隆，只能克隆原始對象自身的值，不能克隆它繼承的值。如果想要保持繼承鏈，可以采用下面的代碼。
~~~
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}
~~~
**（4）合并多個對象**
將多個對象合并到某個對象。
~~~
const merge =
(target, ...sources) => Object.assign(target, ...sources);
~~~
如果希望合并后返回一個新對象，可以改寫上面函數，對一個空對象合并。
~~~
const merge =
(...sources) => Object.assign({}, ...sources);
~~~
**（5）為屬性指定默認值**
~~~
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
options = Object.assign({}, DEFAULTS, options);
}
~~~
上面代碼中，`DEFAULTS`對象是默認值，`options`對象是用戶提供的參數。`Object.assign`方法將`DEFAULTS`和`options`合并成一個新對象，如果兩者有同名屬性，則`option`的屬性值會覆蓋`DEFAULTS`的屬性值。
注意，由于存在深拷貝的問題，`DEFAULTS`對象和`options`對象的所有屬性的值，都只能是簡單類型，而不能指向另一個對象。否則，將導致`DEFAULTS`對象的該屬性不起作用。
## 屬性的可枚舉性
對象的每個屬性都有一個描述對象（Descriptor），用來控制該屬性的行為。`Object.getOwnPropertyDescriptor`方法可以獲取該屬性的描述對象。
~~~
let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
// value: 123,
// writable: true,
// enumerable: true,
// configurable: true
// }
~~~
描述對象的`enumerable`屬性，稱為”可枚舉性“，如果該屬性為`false`，就表示某些操作會忽略當前屬性。
ES5有三個操作會忽略`enumerable`為`false`的屬性。
* `for...in`循環：只遍歷對象自身的和繼承的可枚舉的屬性
* `Object.keys()`：返回對象自身的所有可枚舉的屬性的鍵名
* `JSON.stringify()`：只串行化對象自身的可枚舉的屬性
ES6新增了一個操作`Object.assign()`，會忽略`enumerable`為`false`的屬性，只拷貝對象自身的可枚舉的屬性。
這四個操作之中，只有`for...in`會返回繼承的屬性。實際上，引入`enumerable`的最初目的，就是讓某些屬性可以規避掉`for...in`操作。比如，對象原型的`toString`方法，以及數組的`length`屬性，就通過這種手段，不會被`for...in`遍歷到。
~~~
Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false
Object.getOwnPropertyDescriptor([], 'length').enumerable
// false
~~~
上面代碼中，`toString`和`length`屬性的`enumerable`都是`false`，因此`for...in`不會遍歷到這兩個繼承自原型的屬性。
另外，ES6規定，所有Class的原型的方法都是不可枚舉的。
~~~
Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false
~~~
總的來說，操作中引入繼承的屬性會讓問題復雜化，大多數時候，我們只關心對象自身的屬性。所以，盡量不要用`for...in`循環，而用`Object.keys()`代替。
## 屬性的遍歷
ES6一共有5種方法可以遍歷對象的屬性。
**（1）for...in**
`for...in`循環遍歷對象自身的和繼承的可枚舉屬性（不含Symbol屬性）。
**（2）Object.keys(obj)**
`Object.keys`返回一個數組，包括對象自身的（不含繼承的）所有可枚舉屬性（不含Symbol屬性）。
**（3）Object.getOwnPropertyNames(obj)**
`Object.getOwnPropertyNames`返回一個數組，包含對象自身的所有屬性（不含Symbol屬性，但是包括不可枚舉屬性）。
**（4）Object.getOwnPropertySymbols(obj)**
`Object.getOwnPropertySymbols`返回一個數組，包含對象自身的所有Symbol屬性。
**（5）Reflect.ownKeys(obj)**
`Reflect.ownKeys`返回一個數組，包含對象自身的所有屬性，不管是屬性名是Symbol或字符串，也不管是否可枚舉。
以上的5種方法遍歷對象的屬性，都遵守同樣的屬性遍歷的次序規則。
* 首先遍歷所有屬性名為數值的屬性，按照數字排序。
* 其次遍歷所有屬性名為字符串的屬性，按照生成時間排序。
* 最后遍歷所有屬性名為Symbol值的屬性，按照生成時間排序。
~~~
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]
~~~
上面代碼中，`Reflect.ownKeys`方法返回一個數組，包含了參數對象的所有屬性。這個數組的屬性次序是這樣的，首先是數值屬性`2`和`10`，其次是字符串屬性`b`和`a`，最后是Symbol屬性。
## `__proto__`屬性，Object.setPrototypeOf()，Object.getPrototypeOf()
**（1）`__proto__`屬性**
`__proto__`屬性（前后各兩個下劃線），用來讀取或設置當前對象的`prototype`對象。目前，所有瀏覽器（包括IE11）都部署了這個屬性。
~~~
// es6的寫法
var obj = {
method: function() { ... }
};
obj.__proto__ = someOtherObj;
// es5的寫法
var obj = Object.create(someOtherObj);
obj.method = function() { ... };
~~~
該屬性沒有寫入ES6的正文，而是寫入了附錄，原因是`__proto__`前后的雙下劃線，說明它本質上是一個內部屬性，而不是一個正式的對外的API，只是由于瀏覽器廣泛支持，才被加入了ES6。標準明確規定，只有瀏覽器必須部署這個屬性，其他運行環境不一定需要部署，而且新的代碼最好認為這個屬性是不存在的。因此，無論從語義的角度，還是從兼容性的角度，都不要使用這個屬性，而是使用下面的`Object.setPrototypeOf()`（寫操作）、`Object.getPrototypeOf()`（讀操作）、`Object.create()`（生成操作）代替。
在實現上，`__proto__`調用的是`Object.prototype.__proto__`，具體實現如下。
~~~
Object.defineProperty(Object.prototype, '__proto__', {
get() {
let _thisObj = Object(this);
return Object.getPrototypeOf(_thisObj);
},
set(proto) {
if (this === undefined || this === null) {
throw new TypeError();
}
if (!isObject(this)) {
return undefined;
}
if (!isObject(proto)) {
return undefined;
}
let status = Reflect.setPrototypeOf(this, proto);
if (!status) {
throw new TypeError();
}
},
});
function isObject(value) {
return Object(value) === value;
}
~~~
如果一個對象本身部署了`__proto__`屬性，則該屬性的值就是對象的原型。
~~~
Object.getPrototypeOf({ __proto__: null })
// null
~~~
**（2）Object.setPrototypeOf()**
`Object.setPrototypeOf`方法的作用與`__proto__`相同，用來設置一個對象的`prototype`對象。它是ES6正式推薦的設置原型對象的方法。
~~~
// 格式
Object.setPrototypeOf(object, prototype)
// 用法
var o = Object.setPrototypeOf({}, null);
~~~
該方法等同于下面的函數。
~~~
function (obj, proto) {
obj.__proto__ = proto;
return obj;
}
~~~
下面是一個例子。
~~~
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
~~~
上面代碼將proto對象設為obj對象的原型，所以從obj對象可以讀取proto對象的屬性。
**（3）Object.getPrototypeOf()**
該方法與setPrototypeOf方法配套，用于讀取一個對象的prototype對象。
~~~
Object.getPrototypeOf(obj);
~~~
下面是一個例子。
~~~
function Rectangle() {
}
var rec = new Rectangle();
Object.getPrototypeOf(rec) === Rectangle.prototype
// true
Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false
~~~
## Object.values()，Object.entries()
### Object.keys()
ES5引入了`Object.keys`方法，返回一個數組，成員是參數對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵名。
~~~
var obj = { foo: "bar", baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
~~~
目前，ES7有一個[提案](https://github.com/tc39/proposal-object-values-entries)，引入了跟`Object.keys`配套的`Object.values`和`Object.entries`。
~~~
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）屬性的鍵值。
~~~
var obj = { foo: "bar", baz: 42 };
Object.values(obj)
// ["bar", 42]
~~~
返回數組的成員順序，與本章的《屬性的遍歷》部分介紹的排列規則一致。
~~~
var obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]
~~~
上面代碼中，屬性名為數值的屬性，是按照數值大小，從小到大遍歷的，因此返回的順序是`b`、`c`、`a`。
`Object.values`只返回對象自身的可遍歷屬性。
~~~
var obj = Object.create({}, {p: {value: 42}});
Object.values(obj) // []
~~~
上面代碼中，`Object.create`方法的第二個參數添加的對象屬性（屬性`p`），如果不顯式聲明，默認是不可遍歷的。`Object.values`不會返回這個屬性。
`Object.values`會過濾屬性名為Symbol值的屬性。
~~~
Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']
~~~
如果`Object.values`方法的參數是一個字符串，會返回各個字符組成的一個數組。
~~~
Object.values('foo')
// ['f', 'o', 'o']
~~~
上面代碼中，字符串會先轉成一個類似數組的對象。字符串的每個字符，就是該對象的一個屬性。因此，`Object.values`返回每個屬性的鍵值，就是各個字符組成的一個數組。
如果參數不是對象，`Object.values`會先將其轉為對象。由于數值和布爾值的包裝對象，都不會為實例添加非繼承的屬性。所以，`Object.values`會返回空數組。
~~~
Object.values(42) // []
Object.values(true) // []
~~~
### Object.entries
`Object.entries`方法返回一個數組，成員是參數對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對數組。
~~~
var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
~~~
除了返回值不一樣，該方法的行為與`Object.values`基本一致。
如果原對象的屬性名是一個Symbol值，該屬性會被省略。
~~~
Object.entries({ [Symbol()]: 123, foo: 'abc' });
// [ [ 'foo', 'abc' ] ]
~~~
上面代碼中，原對象有兩個屬性，`Object.entries`只輸出屬性名非Symbol值的屬性。將來可能會有`Reflect.ownEntries()`方法，返回對象自身的所有屬性。
`Object.entries`的基本用途是遍歷對象的屬性。
~~~
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`結構。
~~~
var obj = { foo: 'bar', baz: 42 };
var 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;
}
~~~
## 對象的擴展運算符
目前，ES7有一個[提案](https://github.com/sebmarkbage/ecmascript-rest-spread)，將Rest解構賦值/擴展運算符（...）引入對象。Babel轉碼器已經支持這項功能。
**（1）Rest解構賦值**
對象的Rest解構賦值用于從一個對象取值，相當于將所有可遍歷的、但尚未被讀取的屬性，分配到指定的對象上面。所有的鍵和它們的值，都會拷貝到新對象上面。
~~~
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
~~~
上面代碼中，變量`z`是Rest解構賦值所在的對象。它獲取等號右邊的所有尚未讀取的鍵（`a`和`b`），將它們和它們的值拷貝過來。
由于Rest解構賦值要求等號右邊是一個對象，所以如果等號右邊是`undefined`或`null`，就會報錯，因為它們無法轉為對象。
~~~
let { x, y, ...z } = null; // 運行時錯誤
let { x, y, ...z } = undefined; // 運行時錯誤
~~~
Rest解構賦值必須是最后一個參數，否則會報錯。
~~~
let { ...x, y, z } = obj; // 句法錯誤
let { x, ...y, ...z } = obj; // 句法錯誤
~~~
上面代碼中，Rest解構賦值不是最后一個參數，所以會報錯。
注意，Rest解構賦值的拷貝是淺拷貝，即如果一個鍵的值是復合類型的值（數組、對象、函數）、那么Rest解構賦值拷貝的是這個值的引用，而不是這個值的副本。
~~~
let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2
~~~
上面代碼中，`x`是Rest解構賦值所在的對象，拷貝了對象`obj`的`a`屬性。`a`屬性引用了一個對象，修改這個對象的值，會影響到Rest解構賦值對它的引用。
另外，Rest解構賦值不會拷貝繼承自原型對象的屬性。
~~~
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let o3 = { ...o2 };
o3 // { b: 2 }
~~~
上面代碼中，對象`o3`是`o2`的拷貝，但是只復制了`o2`自身的屬性，沒有復制它的原型對象`o1`的屬性。
下面是另一個例子。
~~~
var o = Object.create({ x: 1, y: 2 });
o.z = 3;
let { x, ...{ y, z } } = o;
x // 1
y // undefined
z // 3
~~~
上面代碼中，變量`x`是單純的解構賦值，所以可以讀取繼承的屬性；Rest解構賦值產生的變量`y`和`z`，只能讀取對象自身的屬性，所以只有變量`z`可以賦值成功。
Rest解構賦值的一個用處，是擴展某個函數的參數，引入其他操作。
~~~
function baseFunction({ a, b }) {
// ...
}
function wrapperFunction({ x, y, ...restConfig }) {
// 使用x和y參數進行操作
// 其余參數傳給原始函數
return baseFunction(restConfig);
}
~~~
上面代碼中，原始函數`baseFunction`接受`a`和`b`作為參數，函數`wrapperFunction`在`baseFunction`的基礎上進行了擴展，能夠接受多余的參數，并且保留原始函數的行為。
**（2）擴展運算符**
擴展運算符（`...`）用于取出參數對象的所有可遍歷屬性，拷貝到當前對象之中。
~~~
let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }
~~~
這等同于使用`Object.assign`方法。
~~~
let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);
~~~
擴展運算符可以用于合并兩個對象。
~~~
let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);
~~~
如果用戶自定義的屬性，放在擴展運算符后面，則擴展運算符內部的同名屬性會被覆蓋掉。
~~~
let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同于
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// 等同于
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
// 等同于
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });
~~~
上面代碼中，`a`對象的`x`屬性和`y`屬性，拷貝到新對象后會被覆蓋掉。
這用來修改現有對象部分的部分屬性就很方便了。
~~~
let newVersion = {
...previousVersion,
name: 'New Name' // Override the name property
};
~~~
上面代碼中，`newVersion`對象自定義了`name`屬性，其他屬性全部復制自`previousVersion`對象。
如果把自定義屬性放在擴展運算符前面，就變成了設置新對象的默認屬性值。
~~~
let aWithDefaults = { x: 1, y: 2, ...a };
// 等同于
let aWithDefaults = Object.assign({}, { x: 1, y: 2 }, a);
// 等同于
let aWithDefaults = Object.assign({ x: 1, y: 2 }, a);
~~~
擴展運算符的參數對象之中，如果有取值函數`get`，這個函數是會執行的。
~~~
// 并不會拋出錯誤，因為x屬性只是被定義，但沒執行
let aWithXGetter = {
...a,
get x() {
throws new Error('not thrown yet');
}
};
// 會拋出錯誤，因為x屬性被執行了
let runtimeError = {
...a,
...{
get x() {
throws new Error('thrown now');
}
}
};
~~~
如果擴展運算符的參數是`null`或`undefined`，這個兩個值會被忽略，不會報錯。
~~~
let emptyObject = { ...null, ...undefined }; // 不報錯
~~~
## Object.getOwnPropertyDescriptors()
ES5有一個`Object.getOwnPropertyDescriptor`方法，返回某個對象屬性的描述對象（descriptor）。
~~~
var obj = { p: 'a' };
Object.getOwnPropertyDescriptor(obj, 'p')
// Object { value: "a",
// writable: true,
// enumerable: true,
// configurable: true
// }
~~~
ES7有一個提案，提出了`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: bar],
// set: undefined,
// enumerable: true,
// configurable: true } }
~~~
`Object.getOwnPropertyDescriptors`方法返回一個對象，所有原對象的屬性名都是該對象的屬性名，對應的屬性值就是該屬性的描述對象。
該方法的實現非常容易。
~~~
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: foo],
// enumerable: true,
// configurable: true }
~~~
上面代碼中，將兩個對象合并的邏輯提煉出來，就是下面這樣。
~~~
const shallowMerge = (target, source) => Object.defineProperties(
target,
Object.getOwnPropertyDescriptors(source)
);
~~~
`Object.getOwnPropertyDescriptors`方法的另一個用處，是配合`Object.create`方法，將對象屬性克隆到一個新對象。這屬于淺拷貝。
~~~
const clone = Object.create(Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj));
// 或者
const shallowClone = (obj) => Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
);
~~~
上面代碼會克隆對象`obj`。
另外，`Object.getOwnPropertyDescriptors`方法可以實現，一個對象繼承另一個對象。以前，繼承另一個對象，常常寫成下面這樣。
~~~
const obj = {
__proto__: prot,
foo: 123,
};
~~~
ES6規定`__proto__`只有瀏覽器要部署，其他環境不用部署。如果去除`__proto__`，上面代碼就要改成下面這樣。
~~~
const obj = Object.create(prot);
obj.foo = 123;
// 或者
const obj = Object.assign(
Object.create(prot),
{
foo: 123,
}
);
~~~
有了`Object.getOwnPropertyDescriptors`，我們就有了另一種寫法。
~~~
const obj = Object.create(
prot,
Object.getOwnPropertyDescriptors({
foo: 123,
})
);
~~~
`Object.getOwnPropertyDescriptors`也可以用來實現Mixin（混入）模式。
~~~
let mix = (object) => ({
with: (...mixins) => mixins.reduce(
(c, mixin) => Object.create(
c, Object.getOwnPropertyDescriptors(mixin)
), object)
});
// multiple mixins example
let a = {a: 'a'};
let b = {b: 'b'};
let c = {c: 'c'};
let d = mix(c).with(a, b);
~~~
上面代碼中，對象`a`和`b`被混入了對象`c`。
出于完整性的考慮，`Object.getOwnPropertyDescriptors`進入標準以后，還會有`Reflect.getOwnPropertyDescriptors`方法。
