# 其餘參數(剩餘參數 **rest parameter**)、展開運算子（Spread operator）
>整理編輯: Jung
>參考文章: [透過 ESLint 練習 JavaScript ES6 系列-江江好](https://ithelp.ithome.com.tw/users/20119924/ironman/2235)
:::spoiler
這邊兩篇連結在同一篇，是因為篇幅不會太長，且也更容易理解兩者的應用
:::

## 其餘參數(剩餘參數 **rest parameter**)
:::info
在有些情況，Function 有不確定數量的參數時，ES6 提供的「剩餘參數」就可以幫助我們很容易 取得剩餘的所有參數，並保存在陣列裡！
:::
>- 取得剩下的參數，並存為一個陣列。
>- 剩餘參數在傳入時，必定是位於最後一位，並且只能有一個剩餘參數。
>- 剩餘參數的值在沒有傳入實際值時，會變為一個空陣列，而不是undefined。
>- 又叫做「剩餘運算子」「其餘參數」「其餘運算子」
>- ESLint（airbnb）規則：不要使用 ==arguments== 語法，使用 rest 語法 ==...== 替代
---

#### 基本使用方式
> 函式中，最後一個參數命名開頭使用 ... 當開頭，就會將當前位置~最後一個變數組成陣列

function f(a, b, ...變數名稱) {
  //...
}

#### 將所有參數轉成陣列
> 範例：有一組套餐set，將套餐的內容組成陣列

let set = function(...food){
  console.log(food)  // ['薯條','壽司','可樂','雞塊','牛肉漢堡','蘋果派']
}
set('薯條','壽司','可樂','雞塊','牛肉漢堡','蘋果派');

#### 將所有參數轉成陣列
> 假如阿華要吃套餐的前兩樣產品，映萱吃掉剩下的所有餐點，我們就可以這樣寫
>

let set = function(first,second,...food){
  console.log(first); // 阿華要吃的第一樣 - 薯條
  console.log(second); // 阿華要吃的第二樣 - 壽司
  console.log(food);  // 映萱要吃剩下全部 - ["可樂", "雞塊", "牛肉漢堡", "蘋果派"]
}
set('薯條','壽司','可樂','雞塊','牛肉漢堡','蘋果派');

>如果function有先定義別的參數，就會將傳入的參數值先給定義好的參數，剩下的就全部塞入其餘參數，所以前兩個參數會分別帶入「薯條」與「壽司」，映萱要吃的剩餘食物就會被轉成陣列囉～
>

#### 將剩餘參數做運算
>今天美食街的所有產品都打85折，映萱吃完一圈吃後，想來算看看每餐都花了多少錢
>

let count = function(disCount,...food){
  return food.map(food => disCount * food);
  // disCount 儲存參數 0.8
  // food 儲存所有食物金額，格式為陣列
  // 使用陣列內建的map方法做計算
}
console.log(count(0.8,160,200,60,80,50,160));
// 取得打折後的金額 [128, 160, 48, 64, 40, 128]

---
>

## 展開運算子（Spread operator）
:::info
展開運算子，是把陣列裡面的值取出，並拆解成一個一個的獨立參數，和剩餘參數的使用方式一樣都是 ==...==。
:::
#### - 基本用法：陣列／字串拆解
用在陣列會把每個值拆出來，並用逗號隔開，如果用在字串的話，也會把每個字符拆開。

//陣列
let week = [1,2,3,4,5,6,7];
console.log(...week);  // 1,2,3,4,5,6,7

//字串
let str = 'IAmSoCute';
console.log(...str);  // "I","A","m","S","o","C","u","t","e"

#### - 可以用來複製陣列
以映萱的減肥餐為例，假如明天的菜單要跟今天一樣，就可以這樣寫：

let today = ['沙拉','水煮雞胸'];
let tomorrow = [...today];
console.log(tomorrow); // ['沙拉','水煮雞胸']

#### - 可以用來組合兩個陣列
在過去我們如果要把兩個陣列組合成一個陣列時，會使用concat語法。
假如映萱要整理今天中午跟晚上的減肥菜單總共吃了哪些食物，在過去就會這樣寫：

let dinner = ['雞胸肉', '沙拉'];
let lunch = ['大陸妹','水煮蛋','和風醬'];
let todayFood = dinner.concat(lunch);
console.log(todayFood); // ["雞胸肉", "沙拉", "大陸妹", "水煮蛋", "和風醬"];

而使用展開運算子的語法，可以很輕易的連結兩個陣列，像這樣：

let dinner = ['雞胸肉', '沙拉'];
let lunch = ['大陸妹','水煮蛋','和風醬'];
let todayFood = [...dinner, ...lunch];

console.log(todayFood); // ["雞胸肉", "沙拉", "大陸妹", "水煮蛋", "和風醬"];

#### - 把陣列傳入函式做運算
我們可以把陣列的值展開，傳入函數的參數中做運算。
假如映萱想要計算今天的減肥餐總共花了多少錢，就可以這樣寫：

function count(breakfast, lunch, dinner) {
  return breakfast + lunch + dinner;
}
var price = [10, 50, 20];

console.log(count(...price)); // 80

###### tags: `JavaScript` `剩餘參數` `其餘參數` `展開運算子`