Hi，大家好，我是Tony，是一個對於JavaScript有一點點概念的新手。

挑戰來到第24天啦！
今天的學習內容是：JavaScript 其餘運算 (Rest Operator)

學習內容來自
彭彭老師JavaScript 其餘運算 Rest Operator
https://www.youtube.com/watch?v=xNJL_Wxb2No&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=30

昨天的學習內容：[Day 23] JavaScript 解構賦值 (Destructuring Assignment)
https://ithelp.ithome.com.tw/articles/10346898

1. 什麼是 其餘運算符號 (Rest Operator)？

是一個特殊的運算符號，
顧名思義，就是把剩餘的資料包在一起。
語法表示就是：三個點 ...

<script>
    //其餘運算符號 (Rest Operator)
    ...
</script>

運用場景：

1. 運用在解構賦值

• 陣列：把剩餘的資料包在一個新陣列中
• 物件：把剩餘的資料包在一個新物件中

2. 運用在函式參數

• 把剩餘的資料包在一個新陣列中

2. 運用在解構賦值：陣列

未逐一指定名稱的剩餘值，利用其餘運算符號，包在新陣列中。
先看範例：

<script>
    let arr=[3,4,5,6,2];
    let [d1,d2,...data]=arr;
    console.log(data); //會印出陣列[5,6,2]
</script>

一開始的陣列arr有5筆資料，但宣告變數只有兩個，放入資料3、4。
剩下的資料5、6、2放入一個新的陣列叫data，
console.log印出來可以看到沒錯data陣列的資料是5、6、2。

• 限制：其餘運算符號只能放在列表的最後，否則會出現錯誤。

範例：

<script>
    let arr=[3,4,5,6,2];
    let [d1,...data,d2]=arr; //error
</script>

3. 運用在解構賦值：物件

未逐一指定名稱的剩餘值，利用其餘運算符號，包在新物件中。
先看範例：

<script>
    let obj={x:3,y:4,z:5};
    let {x,...data}=obj;
    console.log(data); //會印出物件{y:4,z:5}
</script>

• 限制：在物件也一樣，其餘運算符號只能放在列表的最後，否則會出現錯誤。

範例：

<script>
    let obj={x:3,y:4,z:5};
    let {...data,x}=obj; //error
</script>

4. 運用在函式參數：其餘參數 (Rest Parameter)

未逐一指定參數名稱的參數資料，利用其餘運算符號，包在陣列中。
其餘參數的運用：

<script>
    function test(a,b,...data){
        console.log(a,b): //印出3、4
        console.log(data); //印出[1,2,5]
    }
    test(3,4,1,2,5);
</script>

• 限制：在函式也一樣，其餘運算符號只能放在列表的最後，否則會出現錯誤。

<script>
    function test(a,...data,b){  // error
        console.log(a,b): 
        console.log(data); 
    }
</script>

練習

• 練習1：陣列的解構賦值

因為做解構賦值，每一個原本陣列裡的資料都要有新的名稱放進去，
但有時資料太多，就可以用其餘運算符號包起來。

<script>    
    let [n1,n2,...data]=[3,2,1,5,4,0];    
    console.log(n1,n2,data);
</script>

網頁結果1
可以看到n1,n2,data印出的資料是3、2、[,1,5,4,0]

• 練習2：物件的解構賦值

物件也是一樣，還會遇到資料變動的奘況，
因為做解構賦值，每一個原本陣列裡的資料都要有新的名稱放進去，
但有時資料太多，就可以用其餘運算符號包起來。

<script>    
    let {x,y,...obj}={x:3,y:2,z:1,a:5,b:4,c:0};    
    console.log(x,y,obj);
</script>

網頁結果2
可以看到x,y,obj印出的資料是3、2、{z: 1, a: 5, b: 4, c: 0}

• 練習3：限制，回報錯誤

如果把其餘函數...放在中間，就會回報錯誤

<script>    
    let {x,...obj,y}={x:3,y:2,z:1,a:5,b:4,c:0};    
    console.log(x,y,obj);
</script>

網頁結果3
回報錯誤

• 練習4：物件的解構賦值，包的資料沒有照順序

如果解構賦值沒有照一開始的順序也沒關係，
沒有被列到的資料一樣會被其餘運算符號包起來，
記得其餘運算符號要寫在最後面

<script>    
    let {x,z,c,...obj}={x:3,y:2,z:1,a:5,b:4,c:0}; //x、z、c抓出來
    console.log(x,z,c,obj);
</script>

網頁結果4
x,z,c印出的資料是3、1、0，obj是{y: 2, a: 5, b: 4}

• 練習5：函式參數，運用其餘參數，累加練習

做一個簡單的加法函式運算,
但不確定資料有幾個，多的資料就放到其餘參數裡面。
練習中先累加兩筆資料，其餘資料包起來，再累加。

<script>    
    function add(n1,n2,...args){
        console.log(n1,n2,args); //印出每次函式哪些資料放到其餘參數
        let total=n1+n2;
        for(let i=0;i<args.length;i++){
            total=total+args[i];
        }
        console.log(total);
    }
    add(3,4); //7
    add(3,4,5,2); //14
    add(1,2,1,2,3,4,5) //18
</script>

網頁結果4
再函式中先做n1+n2，其餘的參數，再利用for迴圈累加起來。

以上就是今天學習的內容，
謝謝大家。