---
# System prepended metadata

title: Day 13. ES6 - 動態參數、剩餘參數、展開運算子等應用
tags: [React.js]

---

### 函數-動態參數 / arguments：

- 此狀況，使用於你也不曉得初期函式裡頭要持有幾個參數
  但是呢，可以透過這個方式動態的賦予參數。
  - `arguments` , 是一個只存在於 函式裡面的值。
    - 且，會發現他是一種陣列的型態，但是一種偽陣列。
```javascript
      // 動態參數
      function getSum() {
        console.log(arguments); // 14 16
      }
          getSum(14, 16);



     結果: 
     Arguments(2)
     0: 14
     1: 16
```
### 有了動態參數，那麼就只剩+總：

- 且可發現，我們只需要做一次動態參數的迴圈相加
  外部執行 getSum，無論幾組、輸入幾次數值
  都可以反覆被應用來計算，非常方便。

``` javascript
      // 動態參數
      function getSum() {
        console.log(arguments);
        let sum = 0; // 初始數值
        for (i = 0; i < arguments.length; i++) {
          // 初始化:0 ; 限制 i 跑的長度; 在<長度限制內執行1次 i++
          // ex: 假設長度是3, 則從0開始跑至2 , 使此筆陣列的索引值做一個相加。
          sum += arguments[i];
        }
        console.log(sum);
        // 14+16 = 30
        // 9999+10000+3000 = 22999
      }
      getSum(14, 16);
      getSum(9999, 10000, 3000);
```

- 結語：
  - 動態參數 `arguments`，用來解決不知道用戶預計要使用幾筆參數
    放置在函式，則可以這樣來處理加總問題!
  - `arguments`，本質是一個**偽陣列**，**只存活於函式內**。  
    

---

### 函數-剩餘參數，求加總：

- 剩餘參數的作法：
  ()內下參數名稱 - 可任意取名但記得這樣輸入
  - ... 參數名，詳細如下
```javascript
      // 剩餘參數
      function getSum(...arr) {
        let sum = 0;
        for (let i = 0; i < arr.length; i++) {
            // 透過 for 迴圈來下 arr[i] 跑整筆陣列即可
          sum += arr[i];
        }
        console.log(sum); // 6
      }
      getSum(1, 2, 3);
```
### 那麼，動態參數與剩餘參數加總的差異在哪?

- 剩餘參數的妙用：
  - 參數以後的 ... 都變成[陣列]
  - 下列參數內有: a,b
    而 a,b 對應值為 1,2
    - ... 之後的 3,4,5 自動變成了陣列 - `arr`
```javascript
      // 剩餘參數
      function getSum(a, b, ...arr) {
        let sum = 0;
        for (let i = 0; i < arr.length; i++) {
          sum += arr[i];
        }
        console.log(sum); // 12
      }
      getSum(1, 2, 3, 4, 5); // [3,4,5]
```

- 故，執行了 getSum(1,2,3,4,5) 
  - sum 實際上是+總了 3+4+5 = 12

#### 剩餘參數與動態參數的差異在於
- 剩餘參數，是真實的陣列，實際開發應用時
  - 建議使用剩餘參數方法。
  - 剩餘參數 & 動態參數一樣，都只能存在於 function 裡面。
---
### 展開運算子 - 應用

- 展開運算子，也是以 `...`方式來寫的 - 很像**剩餘參數**

```javascript
      // 展開運算子
      const arr = [1, 2, 3];
      console.log(...arr); // 1 2 3
// 可是你這樣寫，實際上是沒意義的對吧?
```

- 搭配 Math.max() & Math.min():

```javascript
      // 展開運算子
      const arr = [1, 2, 3];
      // 透過數學方法 ,取出陣列裡面的最大值
      console.log(Math.max(...arr)); // 3
      // 透過數學方法 ,取出陣列裡面的最小值
      console.log(Math.min(...arr)); // 1
```
- 為什麼需要展開? 

```
因為呢，arr 本身是一組陣列
你若不展開的話，他只能是一個陣列對吧?
透過展開 ...
陣列裡面的值，就變成 真數值
也就可以取得了。
```

### 展開運算子，合併陣列大法：

- 將兩組陣列直接合併的妙法

```javascript
      // 展開運算子
      const arr1 = [1, 2, 3];
      // 透過數學方法 ,取出陣列裡面的最大值
      console.log(Math.max(...arr1)); // 3
      // 透過數學方法 ,取出陣列裡面的最小值
      console.log(Math.min(...arr1)); // 1

      // 展開運算 - 合併陣列
      const arr2 = [3, 4, 5];
      // 宣告一個變數，作為合併兩筆陣列：
      const arr = [...arr1, ...arr2];
      console.log(arr);
```

### 結語

- 展開運算子，是用來將陣列給展開
  - 可以求最大值`Math.max()`、最小值`Math.min()` 
    也可以合併陣列。
    
- 剩餘參數，可以將陣列裡頭剩餘的陣列值給合併成陣列。
  - 僅存活於函式內。    