12-3 箭頭函式 Arrow function ES6, rest parameter

Original: https://course.andys.pro/Javascript-Intro/12-3-arrow-function-es6-rest-parameter/

講義

1. arguments 物件：參數的集合

傳統的 function 內部有一個隱藏的 arguments 物件：

• 特性：它是「類陣列 (Array-like)」，包含所有傳入的參數。
• 用途：當你不確定使用者會傳入幾個參數時（例如寫一個可以相加無限多個數字的 add() 函式），就可以利用 arguments 遍歷所有值。
• 限制：它不是真正的陣列，不能直接使用 push、pop 等陣列專屬方法。

2. 其餘參數 (Rest Parameter)

ES6 之後，建議使用更直觀的其餘參數：

• 語法：使用 ... (三個點)。
• 範例：function fun1(first, ...rest) { ... }
• 優點：rest 會是一個「真正的陣列」，包含了除了第一個參數以外的所有剩餘資料。

3. 箭頭函式 (Arrow Function)

ES6 最受歡迎的新語法，讓函式寫起來更簡潔。

• 基本轉型：

  // 傳統寫法
  var square = function(x) { return x * x; };
  
  // 箭頭函式寫法
  var square = (x) => { return x * x; };

• 極致簡化規則：
  1. 如果參數只有一個，可省略小括號：x => { ... }
  2. 如果程式碼只有一行且是回傳值，可省略大括號與 return：x => x * x
• 重要差異：箭頭函式內 沒有 arguments 物件。

4. 總結與建議

• 撰寫簡單的數學運算或回傳值時，優先使用 箭頭函式。
• 需要處理不固定數量的參數時，優先使用 其餘參數 (...args)。

影片逐字稿 (AI 生成)

好 現在我們來到12-3 箭頭函式那箭頭函式是比較新的一種寫法那我們可以來學一下好的 我們會先學到ArgumentsArguments 就是參數的總和再來我們會學到Rest Parameter就是其餘的參數就有些參數是剩下來的然後還有再來是箭頭函式總要用箭頭函式來讓你的code 看起來又簡潔又漂亮然後寫起來又開心不用打很多東西好的Arguments 我們看到它是一個類陣列的物件可是它不是物件它是類陣列 Array like看起來像是Array這樣子好的那我們可以看到 假如我們今天對一個函式傳入三個參數那這時候呢 我們的Arguments 裡面的第0個就是第1個參數第1個 欸 index 是1的時候就是第2個參數index 是2的時候就是第3個參數值好的Arguments 它不是Array 可是它類似於Array所以它有0 1 2這樣子幾個這樣好 那首先我們來看一下就是當我寫了一個add的functionok那我今天裡面沒有放任何東西那我這時候 我在裡面直接拿Arguments那這時候點Land然後我先宣告說L 1 1 是這個Arguments 的長度好 我們宣告這兩個東西以後呢我們在for回圈我們看到在 比如說我今天有0個參數的話它就不會跑for嘛 對不對如果今天沒有傳任何東西像這個add然後裡面沒有任何東西它是不是forland是不是就等於arguments是沒有東西對不對長度就是0長度是0的情況下它是不是不會跑for回圈因為根本沒有東西在檢查條件的時候就不會進去跑所以它直接return一個sum這個sum就是0所以它就會直接說啊 這是0好 當我們有一個參數的時候arguments的長度是不是就是1所以它在裡面它就會跑0然後sum是0嘛對不對加等於arguments第0個是什麼是這個1嘛對不對所以它就把1加起來然後就變 return sum就會是1那如果我今天有1234呢我的arguments的長度是不是就是4然後我的長度是4的時候是不是index會跑什麼0 1 2 3然後arguments第0個是1好 那sum是0加等於1就是1上變1了好 再加等於2sum變3了然後再加等於3就變6了再加等於4就變10了然後這個回圈跑完跳出來 return sum就是我們現在看到的這個10OK所以用arguments的方法呢我們就可以讓 function的參數變得很彈性喔對不對我可以我可以有沒有參數我可以有一個參數我可以有四個參數我甚至這個add我可以加很長很長很長我都可以把它加起來好的那我們跑一下這段code好好的 那這邊大家注意到注意到喔就是這個加等於因為它只有一行所以它可以怎樣它可以不用大括號喔實際上它好像類似有大括號的感覺所以我們這個方形這樣寫好那這4回圈這樣是一行的情況下可以這樣寫可是你如果在4回圈裡面有兩行有一行以上的程式的話你就要用大括號把它掛起來可是你如果只有一行的話你不需要用大括號把它掛起來OK嗎就是實際上這個是有一個大括號是省略是像這樣OK那因為你裡面只有一行所以它可以省略掉所以它可以省略掉所以我們add0嘛add11234好這樣大家可以理解嗎那如果說欸我覺得老師我們可不可以真的去看到這個lan是什麼喔可以啊那我們就把這個方形先改一下喔我們在這邊我們先去說我們先去說我要concel打log我要把lan印出來甚至我們可以把我們直接把arguments印出來勒這時候我們add它是0對不對然後它的argument是長這樣有沒有argument就是長度是0好可是你看它沒有它不是那個它不是array對不對好如果我們是1呢它的長度是不是1然後它裡面的arguments有第0個是1可是它後面還有一些length是1可是它還有call還有其他不同的功能所以它不是一個array它是argumentsok那如果我們今天是1234那它這邊有沒有看到它的長度是4對不對然後它裡面有第0個是1第1個是12第3個是3第2個是3然後第不是index0是1index1是2index2是3index3是4長度是4ok我們把這段程式給大家好的再來我們還要說其餘參數rest parameter好我們在這邊看到的是我們把它視為一個陣列那有的時候呢其實如果知道你們在寫react的時候可能就會很常用到這個就是你要看到這邊其實有幾個東西叫做點點點OK好首先呢我們這邊先寫一個 function方1然後呢它前面有個數字然後呢然後呢然後呢它前面有個數字然後後面是其餘函數就是點點點the args好console log你可以the args然後你這邊會發現說就是這裡的args.lensargs.lens是undefined因為根本就沒有這個args因為連number都沒有好的那如果是5和6呢這時候number是不是就是6是不是就是其餘那其餘呢它的長度是多少它的長度是1ok因為它只有6那如果是5、6、7它是不是the args裡面的第0個是不是6第1個是不是7就是index0是6然後index1是7然後它的長度是2ok嗎那它這邊呢它如果說這個大於0的話它把那個the args去joinok我剛才可能這邊就是因為我這邊可能這個講的沒有很清楚就是如果說它現在什麼東西都沒有的話它的長度是0然後它這邊印出來the args因為裡面東西是沒有所以join印出來它是什麼它是undefined因為the args就是undefined因為它沒有東西ok它有有有宣告可是它是undefined的字讓我跑跑看請教然後這邊要先做一下整理然後這邊我現在要確定的事情它點點點是不是欸一樣嗎對一樣好它點點沒有打錯好這種東西就是要特別注意就是不是不是說故意懷疑它是說因為有時候就是多注意一點比較不會不會被雷到好大家要注意喔這個這個衣服因為它後面這邊就是欸我看一下對因為這個大家想一下就是說我剛開始跑這個的時候呢它undefined不能去joinundefined是直接它預設就returnedundefinedok嗎因為這個的args點join是在那個是在衣服裡面要args大於0它才會去returntheargs點join那我們這邊呢我們也可以怎麼樣呢我們可以console.log多一個console.log然後我們把theargs把印出來好的首先我們fm1然後沒有東西大家有發現一件事嗎這時候theargs其實是一個空字串好嗎空字串空字串A被declear所以AA好好AA.joinokAA.join會變成是一個什麼空的就是空的array去join以後會變成一個空的streamok所以它才要在這邊的時候其實這邊有隱藏一行它沒有寫出來就你在寫這個 function 的時候它其實隱藏了一行是return undefined對不對那因為我們剛才直接用 fun 小括號的時候呢我們發現什麼我們發現the args 的長度是 0the args 是一個空的array那它的長度是不是 0所以它不會跑進來return所以它要到最後面的時候return undefined所以在講義裡面才會看到說我跑這個的時候這個console log是 0然後這邊回傳的 undefined是這個console log印出來這個function的回傳值是 undefined那為什麼它會跑出來是因為這邊有console log假如你今天只有fun 1然後小括號的話它不會把回傳值印出來OK那這邊的1會跑出來是因為這個的回傳就是這邊的6剛才講錯這邊6會跑出來是因為你這邊有回傳裡arg.join然後console log把這個回傳的值印出來所以它才會有6這邊因為有這邊有console log把這個回傳的值印出來所以才有67沒關係我們把後面的也跑一下我們來跑一下6有沒有這個是這個console log假如你今天只有這樣子有沒有這是它return的值可是它不是console log印出來的值這是它return的值那因為這邊是chrome所以你可以看得到可是你如果是在vscore的話你就會看不到這個回傳的值OK嗎假如我們今天是把這個是12之幾12之33之1.js在這邊我們把剛剛這個function好的好的那像這樣呢我們如果直接去比如說我們剛才console log對不對然後我們去logfund1然後56然後我們去跑它這時候它是不是跑console log2就是這個的這個的長度這個array的長度是多少是1嘛然後它因為它有回傳把the argument的這個array把它join變成字串回傳回來然後我們console log把這個字串印出來所以是6然後這邊是567的話console log567的話它會變什麼它會變成2然後67可是如果說這個回傳的值我們沒有去對它做我們如果今天只是去call這個function我們沒有去做把這個值console log出來它只會給我裡面的2有沒有長度回傳值你會看不到對不對回傳值你可能要比如說這個這個這個這個時候你去logstr才會是67大家大概知道意思嗎這個回傳值可以寫給str但因為我這邊有console log寫成這樣所以它才有把67印出來假如你今天只有跑這段程式它就不會跑出67因為你沒有console log它是一個回傳值這樣就只有2這樣就只有2OK這是其餘其餘參數就是後面這個點點點theargs它就可以把你前面拿一個number後面剩下的補起來就是用點點點然後補這個參數它就會把後面可能多的這些比如說67把它存在這裡面然後用一個用一個正列的方式把它存起來好的再來我們要講error function好那它是一個更短的韓式寫法它沒有argument這個物件好的我們原本的寫法是用expression的寫法是var func等於functionxreturnx加1對不對那那個開發者覺得誒這種語法就是還要寫function那我就我就想要寫得更短所以它怎麼做呢它用一個小括號把x然後呢箭頭然後x加1那這邊沒有寫大括號代表說這個值就是回傳的值不使用大括號代表說自動加上return這一個就是它return的值OK所以你可以一行的就這樣寫就是我這個function是x然後回傳x加1那如果它有加大括號你就前面還要再加一個return好沒關係我們來就是我們來把這個程式12-312-3-2.js那我們先把它拿最複雜的對不對我們可以把它叫做funk1然後我們把它複製我們把它複製一份然後我們把它簡化我們把funk2簡化就是呢我們把它寫成像課本一樣的箭頭函式那麼可以把它首先我們把前面的 function拿掉我們把它變成是箭頭這樣子funk2跟funk1是一樣的我們把 function省略掉把它變成等於和箭頭好的因為我們也只有一行而且它還是個return但我們又可以再更簡化的把它寫起來寫起來就是呢我們把return跟大怪貓拿掉這樣其實也是一樣的有沒有很精簡OK嗎那我們怎麼樣來測試我們的那個我們就是先log對不對然後我們log function1然後然後我們 function2 function3然後這時候呢這幾個東西都要怎樣我們給它傳一樣的好的我們跑一下跑出來都是666對不對都是加1加1加1return回來印出來對不對return的值印出來return的值印出來OK所以這個呢這個寫法超級精簡它超級精簡就是可以讓你在比如說你要做平方啊等等的一些很簡單而且用數學式的 function你可以寫得非常簡化那如果說你今天你的程式比較複雜一點比如說它return一個東西你要再做更多的運算那你其實就是還是可以用箭頭函式然後你把這裡面呢比如說你就可以把這個東西你可以把它變這樣然後比如說我們就可以把它變成像類似正式的韓式一樣這樣寫然後我可以比如說lety等於x加1然後我可以把y回床對不對這樣也是可以的然後這邊可能把它叫做lety這樣子OK所以你就可以把它刮起來那這樣子的寫法其實就是這種寫法就是在react其實後面也可以用得到而且你的程式會變得非常非常簡化好的本章重點韓式是物件的一種然後我們了解就是function就是the declaration就是就是宣告然後呢我們可以了解的事情是你可以直接在如果是韓式宣告的話你可以在上面直接叫它那匿名韓式沒有名稱然後我們也理解到它的用法就是用一個小括號然後把 function直接放在裡面然後後面再用一個小括號可以直接call它然後再來是在12-3我們學到arguments它是一個類正列的形式arguments是類正列然後你可以用0-1-2-3去把這些arguments叫出來可是它不是正列OK那我們還學了其餘那個其餘參數還有箭頭韓式那這是第12章

影片逐字稿largev2

現在我們來到12-3箭頭函式箭頭函式是比較新的一種寫法我們可以來學一下我們會先學到argumentsarguments就是參數的總和再來我們會學到rest parameter就是其餘的參數有些參數是剩下來的還有再來是箭頭函式我們用箭頭函式來讓你的code看起來又簡潔又漂亮然後寫起來又開心不用打很多東西好的arguments我們看到它是一個類陣列的物件可是它不是物件它是類陣列,array line看起來像是array好的假如我們今天對一個函式傳入三個參數那這時候我們的arguments裡面的第0個就是第一個參數第一個index是1的時候就是第二個參數index是2的時候就是第三個參數值好的,arguments它不是array可是它類似於array所以它有0,1,2這樣幾個好那首先我們來看一下就是當我寫了一個add的functionok那我今天裡面沒有放任何東西那我這時候我在裡面直接拿arguments那這時候點length然後我先宣告說len是這個arguments的長度好,我們宣告這兩個東西以後呢我們在for回圈我們看到在比如說我今天有0個參數的話它就不會跑for嘛,對不對如果今天沒有傳任何東西像這個add,然後裡面沒任何東西它是不是forlength是不是就等於arguments是沒有東西對不對,長度就是0長度是0的情況下它是不是不會跑for回圈因為根本沒有東西,在檢查條件的時候就不會進去跑所以它直接return一個sum,這個sum就是0,所以它就會直接說這是0好,當我們有一個參數的時候arguments的長度是不是就是1所以它在裡面它就跑0然後sum是0嘛對不對加等於arguments第0個是什麼,是這個1嘛對不對,所以它就把1加起來然後就變returnsum就會是1那如果我今天有1,2,3,4呢我的arguments的長度是不是就是4然後我的長度是4的時候是不是index會跑什麼0,1,2,3然後arguments第0個是1好,那sum是0加等於1就是1,sum變1了好,再加等於2sum變3了然後再加等於3就變6了再加等於4就變10了然後這個迴圈跑完跳出來return sum,就是我們現在看到的這個10ok所以用arguments的方法呢我們就可以讓function的參數變得很彈性喔對不對我可以有沒有參數我可以有1個參數,我可以有4個參數我甚至這個add我可以加很長很長很長我都可以把它加起來那我們跑一下這一段code好了那這邊大家注意到就是這個加等於因為它只有一行所以它可以怎樣它可以不用大括號實際上它好像類似有大括號的感覺所以我們這個function這樣寫好那這for回圈這樣是一行的情況下可以這樣寫可是你如果在for回圈裡面有兩行有一行以上的程式的話你就用大括號把它掛起來可是你如果只有一行的話你不需要用大括號把它掛起來ok嗎就實際上這個是有一個大括號是省略是像這樣ok那因為你裡面只有一行所以它可以省略掉好所以我們add0嘛add1 2 3 4好這樣大家可以理解嗎那如果說老師我們可不可以真的去看到這個len是什麼可以啊那我們就把這個function先改一下喔我們在這邊先去說我要console.log我要把len印出來甚至我們可以把我們直接把argument印出來喔這時候我們add它是0對不對然後它的argument是長這樣有沒有argument就是長度是0可是你看它沒有它不是那個它不是array對不對那如果我們是1呢它的長度是不是1然後它裡面的argument有第0個是1可是它後面還有一些length是1可是它還有callee還有其他不同的功能所以它不是一個array它是argumentok那如果我們今天是1 2 3 4那它這邊有沒有看到它的長度是4對不對第一個是1第二個是3index0是1index1是2index2是3index3是4長度是4ok我們把這段程式給大家好好了再來我們來說這個參數resparameter好我們在這邊看到的是我們把它視為一個陣列那有的時候呢其實如果之後你們在寫react的時候可能就會很常用到這個就是說你會看到這邊其實有幾個東西叫做點點點好首先呢我們這邊我們先寫一個functionfun1function1然後呢它前面有個數字number然後後面是其餘函數就是點點點argsconsole.log你可以args然後你這邊會發現說就是這裡的args.length是undefined因為根本就沒有這個args因為連number都沒有好的那如果是5和6呢這時候number是不是就是5那其餘呢它的長度是多少它的長度是1因為它只有6那如果是5,6,7呢它是不是離args裡面的第0個是不是6第1個是不是7就是index0是6index1是7然後它的長度是2那它這邊呢它如果說這是大於0的話它把那個離args去joinok我剛才可能這邊就是我這邊可能這個講的沒有很清楚就是如果說它現在什麼東西都沒有的話它的長度是0然後它這邊印出來離args因為裡面東西是沒有所以join印出來它是什麼它是undefined因為離args就是undefined因為它沒有東西有宣告可是它是undefined讓我跑跑看清掉然後這邊要先做一下整理然後這邊我現在要確定的事情它點點點是不是欸一樣嗎對一樣好它點點點沒有打錯這種東西就是要特別注意不是說故意懷疑它是說因為有時候就是多注意一點比較不會不會被雷到好大家要注意喔這個這個if因為它後面這邊就是對因為這個大家想一下就是說我剛開始跑這個的時候呢它undefined不能去join喔undefined是直接它預設就return undefinedok嗎因為這個的args.join是在那個是在if裡面喔要args大於0它才會去return the args.join那我們這邊呢我們也可以怎麼樣呢我們可以console.log多一個console.log然後我們把the args把它印出來好的首先我們fn1然後沒有東西大家有發現一件事嗎這時候the args其實是一個空字串好嗎空字串a被declarea.joina.join會變成是一個什麼空的就是空的array去join以後會變成一個空的string所以它才要在這邊的時候其實這邊有隱藏一行它沒有寫出來就是什麼就你在寫這個function的時候它其實隱藏了一行是returnundefined那因為我們剛才直接用放小括號的時候呢我們發現什麼我們發現the args的長度是0the args是一個空的array那它的長度是不是0嘛所以它不會跑進來return所以它到最後面的時候它會returnundefined所以在講義裡面才會看到說我跑這個的時候這個console.log是0然後這邊回傳的undefined是這一個console.log印出來這個function的回傳值是undefinedok那為什麼它會跑出來是因為這邊有console.log假如你今天只有fun1然後小括號的話它不會把回傳值印出來那這邊的1會跑出來是因為這個的回傳就是這邊的6這邊的6會跑出來是因為你這邊有回傳the arg.join然後console.log把這個回傳的值印出來所以它才會有6這邊因為有console.log把這個回傳的值印出來所以才有6 7沒關係我們把後面的也跑一下6這個是這個console.log假如你今天只有這樣子有沒有這是它return的值 可是它不是console.log印出來的這是它return的值那因為這邊是chrome所以你可以看得到 可是你如果是在VSCode你就會看不到這個回傳的值ok嗎假如我們今天是把這個是12之幾12之3我們把這邊12之33之1.js在這邊我們把剛剛這個functionok那像這樣呢我們如果直接去比如說我們剛剛console.log然後我們去logfun1然後56然後我們去跑它這時候它是不是跑console.log就是這個的長度這個array的長度是多少是1嘛然後因為它有回傳把the arguments的這個array把它join變成字串回傳回來然後我們console.log把這個字串印出來所以是6然後這邊是567的話它會變成2然後67嘛可是如果說這個回傳的值我們沒有去對它做我們如果今天只是去call這個function我們沒有去做把這個值console.log出來它只會給我裡面的2有沒有長度回傳值你會看不到對不對回傳值你可能要比如說let然後let str等於這個這個時候你去log str才會是67大家大概知道意思嗎這個回傳值可以寫給str嘛那因為我這邊有console.log寫成這樣所以它才有把67印出來假如你今天只有跑這一段程式它就不會跑出67因為你沒有console.log嘛它是一個回傳值這樣就只有2ok這是其餘參數就是後面這個點點點的args它就可以把你前面哪一個number後面剩下的補起來就是用點點點然後補這個參數它就會把後面可能多的這些比如說67啊把它存在這裡面然後用一個陣列的方式把它存起來那要講error function那它是一個更短的函式寫法它沒有argument這個物件好的我們原本的寫法是用expression的寫法是var func等於functionx return x加1對不對那個開發者覺得這種語法還要寫function我就想要寫得更短所以它怎麼做呢它用一個小括號把x然後呢箭頭然後x加1那這邊沒有寫大括號代表說這個值就是回傳的值不使用大括號代表說自動加上return這一個就是它return的值ok所以你可以一行的就這樣寫我這個function是x然後回傳x加1那如果它有加大括號你就前面還要再加一個return好沒關係我們來就是我們來把這個乘412-3-2.js那我們先把拿最複雜的對不對我們可以把它叫做func1然後我們把它複製我們把它複製一份然後我們把它簡化我們把func2簡化就是呢我們把它寫成像課本一樣的箭頭函式那我們可以把它首先我們把前面的function拿掉我們把它變成是箭頭這樣子func2跟func1是一樣的我們把function省略掉我們把它變成等於和箭頭好的因為我們也只有一行而且它還是個return那我們又可以再更簡化的把它寫起來寫起來就是呢我們把return跟大括號拿掉這樣其實也是一樣的有沒有很精簡ok嗎那我們怎麼樣來測試我們的那個我們就是先log嘛對不對然後我們log function1然後然後我們function2function3然後這時候呢這幾個東西都要怎樣我們給它傳一樣的好的我們跑一下跑出來都是666都是加1加1加1return回來印出來return的值印出來return的值印出來ok所以這個呢這個寫法超級精簡那它超級精簡就是可以讓你在比如說你要做平方啊等等的一些很簡單而且用數學式的function你可以寫的非常簡化那如果說你今天你的程式比較複雜一點比如說它return一個東西你要再做更多的運算那你其實還是可以用箭頭的方式然後你把這裡面呢比如說你就可以把這個東西把它變這樣然後比如說我們就可以把它變成像類似正式的函式一樣然後可以比如說lety等於x加1然後可以把y回傳這樣也是可以的嘛然後這邊可能把它叫做let function yok所以你就可以把它掛起來那這樣子的寫法其實這種寫法就是在react其實後面也可以用得到而且你的程式會變得非常非常簡化好的本章重點函式是物件的一種然後我們了解就是function就是declaration就是宣告然後呢我們可以了解的事情是你可以直接在如果是函式宣告的話你可以在上面直接叫它那匿名函式沒有名稱然後我們也理解到它的用法就是用一個小括號然後把function直接放在裡面然後後面再用一個小括號可以直接call它然後再來是在12-3我們學到arguments它是一個類陣列的形式就是arguments是類陣列然後你可以用0,1,2,3去把這些arguments叫出來可是它不是陣列那我們還學了其餘那個其餘參數還有箭頭函式那這是第12章