对象的动态条件属性与数组的动态条件元素

1. 对象的动态条件属性

长话短说上代码：javascript

const a = true
const b = {
          c: 'c',
          ...( a && {d: 'd'}),
          }
复制代码

b的结果将会是{ c: 'c', d: 'd' }。分析一下这个代码，先说 && 运算符。 &&也能够算做一种短路运算符，它左侧的值若是为真那么将会返回 && 右侧的值。(跟||运算符有那么一些相反的意思。)
好比这个例子，a为真的状况下之际上执行的是 { c: 'c', ...{ d : 'd' }}。
因此在解构以后获得了值{ c: 'c', d: 'd' }。java

这个有什么用？
这个代码十分好用，好比根据不一样条件来建立不一样对象的时候，常常在Ajax请求的时候会用到。这样作的优势是消除大量的if判断条件，精简代码逻辑，在熟悉以后一目了然让代码变得十分简洁。缺点是略微难以理解，不过若是长期使用，这种写法天然会变为常规操做。git

2. 数组的动态条件元素

数组也有相应的版本：github

const a = true
const b = [1,
           2,
           ...(a ? [3] : []),
           ]
复制代码

b的结果将会是[1,2,3]。这里当a为真的时候，对[3]进行解构，返回3。若是a为假的时候，对[]解构，什么都不返回(也不返回undefined和null！)，b的值就会返回[1,2]数组

这个有什么用？
这个用处也很大。能够根据条件定义数组的元素，很是灵活，能够消除大量没必要要的if条件语句。缺点也是不直观，若是没用过须要时间熟悉。markdown

结语

总之，我认为，这两个“技巧”能够优化代码逻辑，消除没必要要的废话。另外，这两种写法都是来自互联网，在ES6的解构运算符出现以后新出现的写法。在我看来，这都是ES6的常规操做，是必需要掌握并且使用起来的标准写法。有人认为这是一种hack，在滥用JS的特性;我强烈反对这种说法。这些新的写法，都是新的标准操做，是必需要适应的。JS发展很是快，若是不迅速掌握，必然被时代淘汰。

oop

参考资料：

github.com/tc39/propos…优化

stackoverflow.com/questions/1…spa