Sebastian Markbåge 提出的 Rest/Spread Properties 提案包括兩部分：
- 用於物件解構的 rest 操作符(...)。目前，這個操作符只能在陣列解構和引數定義中使用
- 物件字面量中的 spread 操作符(...)。目前，這個操作符只能用於陣列字面量和在函式方法中呼叫。
物件解構中的 rest 操作符(...)
在物件解構模式下，rest 操作符會將解構源的除了已經在物件字面量中指明的屬性之外的，所有可列舉自有屬性拷貝到它的運算物件中。
const obj = {foo: 1, bar: 2, baz: 3};
const {foo, ...rest} = obj;
// Same as:
// const foo = 1;
// const rest = {bar: 2, baz: 3};
複製程式碼如果你正在使用物件解構來處理命名引數，rest 操作符讓你可以收集所有剩餘引數：
function func({param1, param2, ...rest}) { // rest operator
console.log('All parameters: ',{param1, param2, ...rest}); // spread operator
return param1 + param2;
}
複製程式碼語法限制
在每個物件字面量的頂層，可以使用 rest 操作符最多一次，並且必須只能在末尾出現：
const {...rest, foo} = obj; // SyntaxError
const {foo, ...rest1, ...rest2} = obj; // SyntaxError
複製程式碼如果是巢狀結構，你可以多次使用 rest 操作符：
const obj = {
foo: {
a: 1,
b: 2,
c: 3,
},
bar: 4,
baz: 5,
};
const {foo: {a, ...rest1}, ...rest2} = obj;
// Same as:
// const a = 1;
// const rest1 = {b: 2, c: 3};
// const rest2 = {bar: 4, baz: 5};
複製程式碼物件字面量中的 spread 操作符
物件字面量內部，spread 操作符將自身運算物件的所有可列舉的自有屬性，插入到通過字面量建立的物件中：
> const obj = {foo: 1, bar: 2, baz: 3};
> {...obj, qux: 4}
{ foo: 1, bar: 2, baz: 3, qux: 4 }
複製程式碼要注意的是順序問題，即使屬性 key 並不衝突，因為物件會記錄插入順序：
> {qux: 4, ...obj}
{ qux: 4, foo: 1, bar: 2, baz: 3 }
複製程式碼如果 key 出現了衝突，後面的會覆蓋前面的屬性：
> const obj = {foo: 1, bar: 2, baz: 3};
> {...obj, foo: true}
{ foo: true, bar: 2, baz: 3 }
> {foo: true, ...obj}
{ foo: 1, bar: 2, baz: 3 }
複製程式碼物件 spread 操作符的使用場景
這一節，我們會看看 spread 操作符的使用場景。我也會用 Object.assign() 實現一遍，它和 spread 操作符很相似（之後我們會更詳細地比較它們）。
拷貝物件
拷貝物件 obj 的可列舉自有屬性：
const clone1 = {...obj};
const clone2 = Object.assign({}, obj);
複製程式碼clone 物件們的原型都是 Object.prototype，它是所有通過物件字面量建立的物件的預設原型：
> Object.getPrototypeOf(clone1) === Object.prototype
true
> Object.getPrototypeOf(clone2) === Object.prototype
true
> Object.getPrototypeOf({}) === Object.prototype
true
複製程式碼拷貝一個物件 obj，包括它的原型：
const clone1 = {__proto__: Object.getPrototypeOf(obj), ...obj};
const clone2 = Object.assign(
Object.create(Object.getPrototypeOf(obj)), obj);
複製程式碼注意，一般來說，物件字面量內部的 proto 只是瀏覽器內建的特性，並非 JavaScript 引擎所有。
物件的真拷貝
有時候，你需要老老實實地拷貝物件的所有自有屬性(properties)和特性(writable, enumerable, …)，包括 getters 和 setters。這時候 Object.assign() 和 spread 操作符就回天乏術了。你需要使用屬性描述符(property descriptors)：
const clone1 = Object.defineProperties({},
Object.getOwnPropertyDescriptors(obj));
複製程式碼如果還希望保留 obj 的原型，可以用 Object.create()：
const clone2 = Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj));
複製程式碼“探索 ES2016 and ES2017” 裡介紹了 Object.getOwnPropertyDescriptors()
陷阱：總是淺拷貝
我們之前見過的所有拷貝物件的方式，都是淺拷貝：如果原始屬性值是一個物件，拷貝的物件將指向同一個物件，它不會（遞迴的、深度的）拷貝自身：
const original = { prop: {} };
const clone = Object.assign({}, original);
console.log(original.prop === clone.prop); // true
original.prop.foo = 'abc';
console.log(clone.prop.foo); // abc
複製程式碼其他使用場景
合併 obj1 和 obj2 兩個物件：
const merged = {...obj1, ...obj2};
const merged = Object.assign({}, obj1, obj2);
複製程式碼給使用者資料填充預設值
const DEFAULTS = {foo: 'a', bar: 'b'};
const userData = {foo: 1};
const data = {...DEFAULTS, ...userData};
const data = Object.assign({}, DEFAULTS, userData);
// {foo: 1, bar: 'b'}
複製程式碼安全地更新屬性 foo:
const obj = {foo: 'a', bar: 'b'};
const obj2 = {...obj, foo: 1};
const obj2 = Object.assign({}, obj, {foo: 1});
// {foo: 1, bar: 'b'}
複製程式碼指定屬性 foo 和 bar 的預設值：
const userData = {foo: 1};
const data = {foo: 'a', bar: 'b', ...userData};
const data = Object.assign({}, {foo:'a', bar:'b'}, userData);
// {foo: 1, bar: 'b'}
複製程式碼展開物件 VS Object.assign()
spread 操作符和 Object.assign() 很相似。主要的區別在於前者定義了新屬性，而後者還進行了賦值。稍後將解釋這究竟意味著什麼。
Object.assign() 的兩種使用方式
Object.assign() 有兩種使用方式： 第一種，帶有破壞性的（修改已有物件）：
Object.assign(target, source1, source2);
複製程式碼這裡的 target 物件被修改了；source1 和 source2 被拷貝進去了。 第二種，非破壞性的（已有物件不會被修改）：
const result = Object.assign({}, source1, source2);
複製程式碼新物件是通過將 source1 和 source2 拷貝進一個空物件而生成的。最終，這個新物件被返回並賦值給 result。 spread 操作符類似於 Object.assign() 的第二種方式。接下來，我們來看看兩者的相似和不同之處。
都是通過 "get" 操作符讀值
在寫物件之前，兩者都使用了 ”get“ 操作符去讀取源物件的屬性值。這一過程會將 getter 轉換成正常的資料屬性。 來看個例子：
const original = {
get foo() {
return 123;
}
};
複製程式碼original 有一個 foo getter(它的屬性描述符有 get 和 set 屬性)
> Object.getOwnPropertyDescriptor(original, 'foo')
{ get: [Function: foo],
set: undefined,
enumerable: true,
configurable: true }
複製程式碼但是在它拷貝的結果 clone1 和 clone2 裡，foo 是一個正常的資料屬性（屬性描述符有value 和 writable 屬性）：
> const clone1 = {...original};
> Object.getOwnPropertyDescriptor(clone1, 'foo')
{ value: 123,
writable: true,
enumerable: true,
configurable: true }
> const clone2 = Object.assign({}, original);
> Object.getOwnPropertyDescriptor(clone2, 'foo')
{ value: 123,
writable: true,
enumerable: true,
configurable: true }
複製程式碼spread 定義屬性，Object.assign() 設定屬性
spread 操作符在目標物件上定義了新的屬性，而 Object.assign() 使用了一個 "set" 操作符來建立屬性。這會導致兩個結果：
目標物件帶有 setter
首先，Object.assign() 觸發 setter，而 spread 不會：
Object.defineProperty(Object.prototype, 'foo', {
set(value) {
console.log('SET', value);
},
});
const obj = {foo: 123};
複製程式碼以上程式碼段設定了一個 foo setter，它會被所有普通物件繼承。 如果我們通過 Object.assign() 拷貝 obj，繼承的 setter 會被觸發：
> Object.assign({}, obj)
SET 123
{}
複製程式碼而 spread 就不會：
> { ...obj }
{ foo: 123 }
複製程式碼Object.assign() 在拷貝時還會觸發自有 setter，這裡並沒有發生重寫。
目標物件帶有隻讀屬性
第二，你可以通過繼承只讀屬性，來阻止 Object.assign() 建立自有屬性，但 spread 上這是做不到的：
Object.defineProperty(Object.prototype, 'bar', {
writable: false,
value: 'abc',
});
複製程式碼以上程式碼設定了只讀屬性 bar，它會被所有普通物件繼承。 這樣，你就再也不能使用賦值語句去建立自有屬性 bar（嚴格模式下會拋一個異常，寬鬆模式會靜默失敗）：
> const tmp = {};
> tmp.bar = 123;
TypeError: Cannot assign to read only property 'bar'
複製程式碼下列程式碼，我們使用物件字面量成功地建立了屬性 bar。因為物件字面量沒有設定屬性，它只是定義了它們：
const obj = {bar: 123};
複製程式碼然而，Object.assign() 使用賦值語句建立屬性，這就是不能拷貝 obj 的原因：
> Object.assign({}, obj)
TypeError: Cannot assign to read only property 'bar'
複製程式碼通過 spread 操作符拷貝沒有問題：
> { ...obj }
{ bar: 123 }
複製程式碼spread 和 Object.assign() 都只拷貝自有可列舉屬性
它們都會忽略所有繼承的屬性和不可列舉的自有屬性。 物件 obj 從 proto 繼承了一個可列舉屬性，並且有兩個自有屬性：
const proto = {
inheritedEnumerable: 1,
};
const obj = Object.create(proto, {
ownEnumerable: {
value: 2,
enumerable: true,
},
ownNonEnumerable: {
value: 3,
enumerable: false,
},
});
複製程式碼如果拷貝 obj，結果將只有屬性 ownEnumerable。屬性 inheritedEnumerable 和 ownNonEnumerable 沒有被拷貝：
> {...obj}
{ ownEnumerable: 2 }
> Object.assign({}, obj)
{ ownEnumerable: 2 }
複製程式碼原文：http://exploringjs.com/es2018-es2019/ch_rest-spread-properties.html