1-6 展開語法和其餘語法

還有一個同樣經常在 React 中會使用到的語法，稱作「展開語法（Spread Syntax）」和「其餘語法（Rest Syntax）」。這兩個語法的使用時機不同，但在寫程式時是用相同的文字來表達，也就是 ...。

沒錯，就是 ...，這個 ... 同樣可以使用於物件和陣列上。

展開語法（spread syntax）#

展開語法最常用在要「複製一個物件，並為該物件添加一些屬性時」，舉例來說，我們先定義智慧型手機的基本屬性：

// 定義一個物件
const mobilePhone = {
  name: 'mobile phone',
  publishedYear: '2019',
};

接下來如果要複製 mobilePhone 這個物件變成一個新的物件（iPhone），同時添加一些屬性時，可以使用 ... 展開語法，這裡我們添加 name 和 os 這兩個屬性到新的物件中：

const iPhone = {
  ...mobilePhone,
  name: 'iPhone',
  os: 'iOS',
};

console.log(iPhone); // { name: 'iPhone', publishedYear: '2019', os: 'iOS' }

note

💡 Tip：筆者習慣把「展開語法」的 ... 當作「解壓縮」的概念，就是把原本的物件，解開來，複製一份放進去新的物件裡面，同時還可以添加一些新的屬性。當屬性名稱重複時，新的會把舊的給覆蓋掉。

這裡我們定義了一個新的物件，稱作 iPhone，接著把原本 mobilePhone 的內容全部複製一份進去，最後再添加 name 和 os 這兩個屬性進去。

可以注意到，在原本的 mobilePhone 就已經有 name 這個屬性，後來我們又添加同樣名為 name 的屬性時，就會把原本的 name 給覆蓋掉；而 os 這個屬性，因為在原本的 mobilePhone 中沒有這個屬性，所以就會直接被添加到新的 iPhone 這個物件內。

展開語法同樣可以用來複製陣列，並在新的陣列中添加元素，像是這樣：

/* 展開語法（spread syntax） */

const mobilesOnSale = ['Samsung', 'Apple', 'Huawei'];
const allMobiles = [...mobilesOnSale, 'Oppo', 'Vivo', 'Xiaomi'];

console.log(allMobiles); // [ 'Samsung', 'Apple', 'Huawei', 'Oppo', 'Vivo', 'Xiaomi' ]

其餘語法（rest syntax）#

其餘語法和展開語法的寫法一樣，都是 ...，但是使用時機不太一樣，如果說展開語法像是「解壓縮」，那麼其餘語法就像是「壓縮」。它可以把在解構賦值中沒有被取出來的物件屬性或陣列元素都放到一個壓縮包裡。

舉例來說，在前面談到物件解構賦值的時候，從伺服器拿到一大包資料：

const product = {
  name: 'iPhone',
  image: 'https://i.imgur.com/b3qRKiI.jpg',
  description: '全面創新的三相機系統，身懷萬千本領，卻簡練易用。',
  brand: 'Apple',
  aggregateRating: {
    ratingValue: '4.6',
    reviewCount: '120',
  },
  offers: {
    priceCurrency: 'TWD',
    price: '26,900',
  },
};

雖然我們取出了所需的資料，但其餘剩下沒有取出來的物件屬性仍想要保留下來稍後使用，這時就可以使用其餘語法，把除了 name 和 description 剩下沒有取出來的物件屬性，都放到取名為 other 的變數中（變數名稱可以自己取），如此 other 就會是 product 物件中，扣除掉 name 和 description 屬性後的所有其餘資料。有點類似把除了 name 和 description 之外的屬性都壓縮到 other 這個變數內：

// 在物件的解構賦值中使用其餘語法
const { name, description, ...other } = product;
console.log(other);

// other 物件
// {
//   image: 'https://i.imgur.com/b3qRKiI.jpg',
//   brand: 'Apple',
//   aggregateRating: { ratingValue: '4.6', reviewCount: '120' },
//   offers: { priceCurrency: 'TWD', price: '26,900' }
// }

其餘語法同樣可以用在陣列中，前面我們有把銷量前三名的手機取出來，那其餘剩下沒被取出來的怎麼辦呢？這時候就可以使用「其餘語法」把剩下的陣列元素全都拿出來，像是這樣：

// 在陣列的解構賦值中使用其餘語法

const mobileBrands = [
  'Samsung',
  'Apple',
  'Huawei',
  'Oppo',
  'Vivo',
  'Xiaomi',
  'LG',
  'Lenovo',
  'ZTE',
];

// 變數名稱不一定要取名為 other
const [best, second, third, ...other] = mobileBrands;
console.log(other); // [ 'Oppo', 'Vivo', 'Xiaomi', 'LG', 'Lenovo', 'ZTE' ]