前言

ES提案中的Rest/Spread Properties

• 剩余部分操作符(...)，仅用于数据解构和函数参数定义
• 扩散操作符(...)，仅用于数组字面量和函数以及方法调用的时候

对象解构中的剩余操作符

可以这么用了

const obj = {foo: 1, bar: 2, baz: 3};
const {foo, ...rest} = obj;
    // Same as:
    // const foo = 1;
    // const rest = {bar: 2, baz: 3};

也可以这么用了

function func({param1, param2, ...rest}) { // rest operator
    console.log('All parameters: ',
        {param1, param2, ...rest}); // spread operator
    return param1 + param2;
}

感觉叼叼的

语法限制

对象中每一层级（...）操作符只能用一次，并且只能放在最后

const {...rest, foo} = obj; // SyntaxError
const {foo, ...rest1, ...rest2} = obj; // SyntaxError

你可以这样用：

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

对象字面量中的扩散操作符

在对象字面量中，可以通过...将A对象的所有可以枚举的属性插入到B对象中

const A= {foo: 1, bar: 2, baz: 3};
const B = {...obj, qux: 4}
// B: { foo: 1, bar: 2, baz: 3, qux: 4 }

需要注意的是如果属性名正好相同的话，是会相互覆盖的，覆盖的结果取决于变量的顺序。

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 }

使用场景及注意事项

克隆对象

只会克隆其可枚举的属性，不会克隆其原型指向，这个跟Object.assign很像
如果想克隆其原型，在浏览器中可以使用如下的方法

const clone1 = {__proto__: Object.getPrototypeOf(obj), ...obj};
const clone2 = Object.assign(
    Object.create(Object.getPrototypeOf(obj)), obj);

整体克隆

有的场景下，你需要拷贝对象的所有属性：包括writable,enumerable,getters,setters等等，这个时候Object.assign()和...操作符都没有无能为力，可以使用

const clone1 = Object.defineProperties({},
    Object.getOwnPropertyDescriptors(obj));

如果还想保留克隆对象的原型的话，可以使用Object.create()

const clone2 = Object.create(
    Object.getPrototypeOf(obj),
    Object.getOwnPropertyDescriptors(obj));

浅拷贝

这些克隆操作都是浅拷贝，需要注意避免可能造成的问题

其他用途

合并对象

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);

制定个别键的默认值

const userData = {foo: 1}; 
const data = {foo: 'a', bar: 'b', ...userData};  
const data = Object.assign({}, {foo:'a', bar:'b'}, userData);  // {foo: 1, bar: 'b'}

扩散操作符和Object.assign()的异同

两种使用Object.assign()的方式

Object.assign(target, source1, source2);

这个情况下，target被改变了

const result = Object.assign({}, source1, source2);

这个情况下，没有对现存的对象做任何改变

共同点

扩散操作符和Object.assign()都是使用get操作去读取value的

扩散操作符和Object.assign()都只能获取枚举属性

不同点

扩散操作符定义了属性，Object.assign()设置了属性

扩散操作符在目标对象定义了新的属性，Object.assign()是通过set操作穿件了属性，有两种结果：

第一： Object.assign()会触发setters

Object.defineProperty(Object.prototype, 'foo', {
    set(value) {
        console.log('SET', value);
    },
});
const obj = {foo: 123};

Object.assign({}, obj)
//SET 123
//{}

{ ...obj }
//{ foo: 123 }

第二： 如果目标对象设置了只读属性，Object.assign()会继承只读属性，扩散操作符不会

Object.defineProperty(Object.prototype, 'bar', {
    writable: false,
    value: 'abc',
});
const tmp = {};
tmp.bar = 123;
// 在严格模式下报错：TypeError: Cannot assign to read only property 'bar'
// 在非严格模式下只是忽略，不报错