JS宣告物件、陣列技巧

符合條件才有欄位的物件

利用展開運算子（spread operator）展開 null（或 undefined）不會產生任何欄位的特性，可以在宣告物件時就決定某個欄位是否存在，而不需要事後再用 if 補上。

{
  a: 'a',
  ...(isShowB ? { b: 'b' } : null),
}

當 isShowB 為 true 時得到 { a: 'a', b: 'b' }，為 false 時則得到 { a: 'a' }。

符合條件才在陣列中

同樣的概念用在陣列上：展開一個空陣列 [] 不會新增任何元素，因此可以條件式地決定某個元素要不要放進陣列裡。

[
  'a',
  ...(isShowB ? ['b'] : []),
]

當 isShowB 為 true 時得到 ['a', 'b']，為 false 時則得到 ['a']。

欄位名稱不固定的物件

利用計算屬性名稱（computed property names），可以用一個已宣告的字串參數來當作物件的欄位名稱，其中 stringParam 為已宣告的字串參數。

{ [stringParam]: 'a' }

若 stringParam 的值為 'name'，則會得到 { name: 'a' }。