對象的動態條件屬性與數組的動態條件元素

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