1、如何使用

很多场景，比如给ajax请求传递参数时，参数往往是一个对象，对象的属性个数不是固定的，需要动态添加：

let params = {
    id: 1
};

if(name){
    params.name = name;
}

if(address){
    params.address= address;
}

现在ES6提供了扩展运算符，以上的代码可以改成下面这样：

let params = {
    id: 1,
    ...(name && {name}),
    ...(address && {address}),
}

如果name和address的值都存在且不是空字符串，结果就会是这样：

{
    id: 1,
    name: 'dong',
    address: '赤水沟子'
}

如果它们的值为空，就会不存在name和address这两个属性：

{
    id: 1
}

2、原理

下面以name为例，说明它的原理。

如果name不为空，则

name && {name}

相当于

name && {name: name} //上面是ES6简写形式

相当于

if(name){
    return {
        name: name
    }
}else{
    return false;
}

如果name没有值，那么

...(name && {name})

相当于

...(false)

扩展运算符有以下规定：

1、如果扩展运算符后面是一个空对象，则没有任何效果
2、如果扩展运算符后面不是对象，则会自动将其转为对象

根据第2点，

...(false)

等同于

...Object(false)

等同于

...Boolean {false}

而Boolean {false}没有任何属性，所以又等同于

...{}

根据第1点可以知道，这没有任何效果，不会向params添加任何属性。

END