SKT-otto

1 、ECMAScript6中字符串的用法
1.1 模版字符串
什么是標簽模板？這里的模板指的是上面講的字符串模板，用反引號定義的字符串；而標簽，則指的是一個函數，一個專門處理模板字符串的函數。

 
以上代碼有兩處要仔細講解的，首先是tagFn函數，是我們自定義的一個函數，它有三個參數分別是arr，v1，v2。函數tagFn的調用方式跟以往的不太一樣，以往我們使用括號( )表示函數調用執行，這一次我們在函數名后面直接加上一個模板字符串，如下面的代碼：

 
這樣就是標簽模板，你可以理解為標簽函數+模板字符串，這是一種新的語法規范。
接下來我們繼續看函數的3個參數，從代碼的打印結果我們看到它們運行后對應的結果，arr的值是一個數組：[ "他叫" ,  "，身高"  ,  "米。" ]，而v1的值是變量name的值：“張三”，v2的值是變量height的值：1.8。
你是否看出規律了：第一個參數arr是數組類型，它是內容是模板字符串中除了${ }以外的其他字符，按順序組成了數組的內容，所以arr的值是[ "他叫",  "，身高"  ,  "米。" ]；第2,3個參數則是模板字符串中對應次序的變量name和height的值。
標簽模板是ES6給我們帶來的一種新語法，它常用來實現過濾用戶的非法輸入和多語言轉換，這里不展開講解。因為一旦我們掌握了標簽模板的用法后，以后就可以好好利用它的這個特性，再根據自己的需求要來實現各種功能了。

1.2 repeat函數
repeat( )函數：將目標字符串重復N次，返回一個新的字符串，不影響目標字符串。

 
重復3次后返回一個新字符串賦值給name2，name1不受影響，所以name1的值不變。

1.3 includes函數
includes( )函數：判斷字符串中是否含有指定的子字符串，返回true表示含有和false表示未含有。第二個參數選填，表示開始搜索的位置。

 
傳統的做法我們可以借助indexOf( )函數來實現，如果含有指定的字符串，indexOf( )函數就會子字符串首次出現的位置，不含有，則返回-1。我們通過返回值是否為-1來判斷字符串中是否含有指定的子字符串，但是，我們現在可以用includes( )函數代替indexOf( )函數，因為它的返回值更直觀（true或false），況且我們并不關心子字符串出現的位置。
 注意，上面最后一句代碼，第二個參數為1，表示從第2個字符“端“開始搜索，第一個字符”前“的位置是0。

1.4 startsWith函數
startsWith( )函數：判斷指定的子字符串是否出現在目標字符串的開頭位置，第二個參數選填，表示開始搜索的位置。

 
我們如果判斷字符串是否以某個子字符串開頭，就可以直接使用startsWith( )函數即可，同樣，第二個參數為1表示從第2個字符開始搜索。若要從第一個字符開始搜索，參數應該為0或者為空（默認從第一個字符開始搜索）。

1.5 endsWith函數
endsWith( )函數：判斷子字符串是否出現在目標字符串的尾部位置，第二個參數選填，表示針對前N個字符。

 

1.6 string.raw函數
最后講解的一個函數是String.raw( )；看函數名raw是未加工的的意思，正如這個函數的作用一樣：返回字符串最原始的樣貌，即使字符串中含有轉義符，它都視而不見，直接輸出。舉個例子： 未經String.raw( )處理的字符串：

 
 \n會被識別為換行符，實現換行效果，而經過String.raw( )的同一個字符串的結果是：

 
 \n被識別為\和n兩個字符，失去換行的效果，直接輸出，這就是String.raw( )的功能。它常用來作為一個模板字符串的處理函數，也就是直接在后面加一個模板字符串。

ES6中字符串方法： 模版字符串  repeat()  includes()  startsWidth() endsWidth() String.raw+模版字符串

2 、ECMAScript6中數值的用法
2.1傳統寫法
在ES5中，我們存在幾個全局函數 isNaN函數，isFinite函數，parseInt函數，parseFloat函數等，對于這些全局函數的使用很簡單，就拿isNaN函數來舉例。
ES5中的寫法是：

 
以上兩種寫法均可，isNaN是全局函數，本身就是屬于window對象下的一個方法，所以大部分人會使用第一種寫法。
但是在ES6的標準中，isNaN方法被移植到了Number對象上，也就是原本屬于全局對象window下的函數，現在屬于Number對象上了，同樣被處理的函數還有isFinite函數，parseInt函數，parseFloat函數。
被移植后的函數使用方式是這樣的：

 
在使用之前必須指明它是Number對象下的函數，否則會被默認為window下的函數。
 
2.2 Number.isNaN函數
Number.isNaN函數：用于判斷傳入的是否是非數值，注意：是判斷非數值，而不是判斷數值，IsNaN的全稱是： is not a number。
由于2.5是一個number類型的數值，所以返回false（再次注意：判斷是非數值，所以是false，表示2.5是一個數值類型的值）。
那么，移植到Number對象isNaN函數和原本是全局函數的isNaN函數，有不一樣的地方嗎？ 傳統的isNaN函數會把非數值的參數轉化成數值再進行判斷，而Number. isNaN只對數值類型有效，非數值類型的參數一律返回false。

 
Number下面的isNaN都懶得給字符串’abc’做類型轉換，直接返回false。而ES5中的isNaN函數會對字符串’abc’進行類型轉換后，發現它是一個NaN（非數值），才返回true。
 
所以我們在使用這個函數到時候還要小心，當返回false的時候，不一定就是一個數值，有可能是一個非數值類型的參數。
總結：掛在到Number上之后，傳入的值是數字或者字符串返回結果都為false。 Infinity 無窮

2.3 Number.isFinite函數
Number.isFinite函數：用來檢查一個數值是否非無窮。注意是判斷非無窮，不是判斷無窮，這里跟isNaN函數一樣，有點繞。

 
注意第二行代碼的參數：Infinity，Infinity是window對象下的一個常量，表示一個無窮數。所以第二行代碼會返回false。此外，isFinite函數跟isNaN函數一樣，也只是對數值類型有效，對非數值類型的參數一律返回false。

 
 所以同樣要注意，當Number.isFinite函數返回false的時候，參數不一定就是一個有窮的數值類型，也有可能是一個非數值類型的參數。如：字符串’abc’。
 總結： isFinete 驗證數字的，只有infinity是無窮，其他的數字都是有窮的，如果是字符串，則返回false

2.4 Number.parseInt函數
parseInt函數：解析一個字符串，返回一個整數。parseInt函數同樣是從window對象下移植到Number對象下，但是它的作用沒有任何變化。

 
以上函數都是在window對象下，移植到了Number對象下，這么做的目的是慢慢地減少全局性的函數，把全局函數合理地規劃到其他對象下，漸漸實現語言的模塊化。

2.5 Number.isInteger函數
Number.isInteger函數：用來判斷是否是整數。

 
上面的運行結果也如我們所料，數值3.2不是整數，返回false。不過有一點要注意：在javascript內部對整數和浮點數采用一樣的存儲方式，因此小數點后如果都是0的浮點數，都會被認為是整數。看個例子就知道了：

 
數值3.0和3.00都會被認為是整數。
 總結：isInteger 用來判斷是否是整數，小數點后面均為0，則認為是整數

 

2.6 Math.trunc函數
 Math.trunc函數：用于去除一個數的小數部分，返回整數部分。

 
運行結果也很好理解，如果傳入的參數是整數，就直接返回整數，如果是小數，就去除了小數部分，返回整數部分：3。

2.7 Math.sign函數
Math.sign函數：用來判斷一個數到底是正數、負數、還是零。

 
返回的結果類型有點多，我們分別來講解一下，參數如果是正數，結果返回1；如果是負數，結果返回-1；如果是0，結果返回0；如果是一個非數值類型的參數，結果返回：NaN

3 、ECMAScript6中數組的用法
3.1 Array.of函數
函數作用：將一組值，轉換成數組。

 
是不是很好理解，傳進去的數字是：1~5，最后經過Array.of函數處理，得到了一個數組，而數組的內容就是[1,2,3,4,5]。

3.2 Array.from函數
函數作用：可以將類似數組的對象或者可遍歷的對象轉換成真正的數組。
有哪些是類似數組的對象？最常見的就是調用getElementsByTagName方法得到的結果，它就是一個類似數組的結果，getElementsByTagName方法一定不陌生吧，我們來看一下：

 
看上面的代碼，我們調用getElementsByTagName方法，得到結果存到變量ele中，然后對其進行類型判斷，發現變量ele并不是一個數組，而是一個對象Array，一個類似數組的對象Object，接下來我們用Array.from( )對其進行處理，并再一次進行類型判斷。

 
這個時候我們運行的結果是：true，也就是經過Array.from函數處理返回的結果，已經變成了一個真正的數組。
Array.from函數其中一個用處就是將字符串轉換成數組。看下面的案例：

 
 字符串“hello”被轉換后的返回的結果已經變成了一個數組：["h", "e", "l", "l","o"]。

注意:Array.from()  可以放兩個參數，第一個是要轉變的對象，但是此對象必須要有長度,第二個參數是回掉函數，是指完成前面的轉換后做什么事情。

 

3.3 find函數
函數作用：找出數組中符合條件的第一個元素。

 
看上面的代碼，find()函數的參數是一個匿名函數，數組的每個元素都會進入匿名函數執行，直到結果為true，find函數就會返回value的值：3。倘若所有元素都不符合匿名函數的條件，find( )函數就會返回undefind。看下面的代碼案例：

 
上面的案例中，數組中沒有存在大于7的元素，所以find函數就會返回：undefined。

3.4 findIndex函數
函數作用：返回符合條件的第一個數組成員的位置。

 
上面的代碼結果是：2，因為數組元素中大于8的元素是9，而元素9的位置正是2，（數組元素是從0算起）。倘若所有元素都不符合匿名函數的條件，findIndex( )函數就會返回-1。

3.5 fill函數
函數作用：用指定的值，填充到數組。

 
經過fill( )函數處理后的數組arr已經變成了[4,4,4]；正如函數名fill（填充）一樣。所有元素都被填充為數字4了。如果我想只填充部分元素可不可以呢？可以的，fill( )函數提供了一些參數，用于指定填充的起始位置和結束位置。
還是上面的案例，我們稍做調整，再演示一下：

 
 上面的代碼中第2個參數和第3個參數的意思是：從位置1的元素開始填充數字4，截止到位置3之前，所以是位置1和位置2的元素被數字4填充了，得到的結果：[1,4,4]。
總結：fill（替換內容，開始索引，結束索引但是不包括該索引內容）

 

3.6 entries函數
函數作用：對數組的鍵值對進行遍歷，返回一個遍歷器，可以用for..of對其進行遍歷。
遍歷器和for..of也是ES6的新增特性，目前我們還沒有介紹到，我們可以先進行一下簡單地認知。
回到我們的entries( )函數，看個案例：

 
上面的代碼中，我們將entries( )函數返回的一個遍歷器，用for...of進行遍歷，并打印出結果，能得到數組的鍵值：0和1，以及對應的數組元素：‘a‘和’b‘。
如果只想遍歷數組的索引鍵的話，可以使用另一個實例方法。

3.7 keys函數
函數作用：對數組的索引鍵進行遍歷，返回一個遍歷器。

 
 正如上面的運行結果一樣，我們打印出了數組的索引鍵：0和1。
 如果我們想只對數組的元素進行遍歷，我們可以使用兩一個實例方法。

3.8 values函數
作用：對數組的元素進行遍歷，返回一個遍歷器。

 
 上面的代碼運行結果也是我們預料之中的，最終打印出了數組的元素：a和b。
 除了新增函數以外，ES6還為數組帶來了一個新的概念：數組推導。

3.9 數組的推倒
數組推導：用簡潔的寫法，直接通過現有的數組生成新數組。
舉個例子：加入我們有一個數組，我在這個數組的基礎上，每個元素乘以2，得到一個新數組。我們看看傳統的實現方法：

 
傳統的方式，除了以上的方式，我們還可以用forEach方法實現。但我們現在介紹的主要是利用ES6提供的新寫法：數組推導。

 
  我們同樣可以得到數組arr2，它的值和上一段代碼的一樣。并且代碼量大大地減少了。這就是數組推導給我們帶來的便利。 在數組推導中，for..of后面還可以加上if語句，我們來看看代碼案例：

 
在上面代碼中，我們不再是對數組的元素乘以2，而是用if做了個判斷：數組的元素要大于3。所以運行的結果是：[ 4 ]。

4 、ECMAScript6中對象的使用
4.1 對象的傳統寫法
傳統表示法：

 
上面的案例很簡單，變量person就是一個對象，對象含有name屬性和一個say方法。表示法是用鍵值對的形式來表示，這就是傳統的表示法。
ES6中的簡潔寫法：

 
咱們來講解一下上面這個案例，首先定義兩個變量name和age，分別用傳統的寫法和ES6中的寫法，把變量作為person對象的屬性值。第一種寫法大家很熟悉，使用鍵值對的表示法，而ES6中的新寫法只是簡單地用兩個變量名即可，而得到的結果跟傳統的寫法一樣。
        這也就是新的寫法更簡捷了，變量名可以作為鍵值對的鍵（變量名name和age），而變量的名作為值（變量的值Zhangsan和12），最后一起組成了person對象的內容{name:”Zhangsan”,age:12}。
 
        對象的屬性可以這樣簡寫，那么對象的方法表示呢？
 
        我們來講解方法的簡寫表示法：

 
通過上面的案例，可以看出兩種寫法的區別，不管是屬性還是方法，確實ES6給我們帶來的表示法更加簡捷，代碼量更少。

4.2 ECMAScript6中屬性名的更新
用字面量定義一個對象的時候，可以用表達式作為對象的屬性名或者方法名。

 
注意上面person對象的定義，其中屬性名和方法名都是用中括號[ ]包裹著，里面都是一個字符串相加的表達式，這就告訴我們，用字面量（大括號{ }）定義對象的時候，屬性名和方法名可以是一個表達式，表達式的運算結果就是屬性名或者方法名。這點改進會使得對象在實際開發中的使用變得更加的靈活方便。
 
4.3 Object.is函數
函數的作用：比較兩個值是否嚴格相等，或者說全等。
嚴格相等和抽象相等：

 
可以看到，抽象相等用“==”表示，嚴格相等用“===”表示，進行嚴格相等判斷的時候，首先要求類型是一樣的，否則會直接返回false。
 
        所以上面的例子中，變量str和變量num一個是字符串類型，一個是數字類型，所以結果是false，而抽象相等會對類型不一致的兩個變量進行類型轉化，轉成同一類型再進行判斷。“12”轉換成數字類型得到12，再進行比較后得到的結果是true。

 
上述的執行結果跟我們預期的一樣，參數類型不一樣str和num進行比較，得到的結果是false。變量類型和值都一樣的num和num2進行比較，得到的結果是true。

4.4 Object.assign函數
函數作用：將源對象的屬性賦值到目標對象上。（assign [??sa?n] :分派、指派、委派）這么講肯定是有點抽象的，咱們用案例說話，更直觀更形象：

 
注意輸出的結果，target對象已經不是{ a:1 }了，而是變成了{a: 1, b: 2, c: 3}，經過Object.assign( )函數的處理，源對象的屬性被添加到了target對象上。這就是Object.assign( )函數的作用。
 
        此外，Object.assign( )函數的參數還可以是多個（至少是兩個）。我們在上面的案例稍做修改，加一個參數：

 
我們從最后打印出來的結果可以看出，對象origin1和對象origin2的屬性都被添加賦值到了對象target上。也就是Object.assign( )函數參數中的源對象可以是一個或者一個以上，而目標對象只有一個。
 
        那么，如果賦值過程中，對象的屬性出現了相同的名字怎么辦？如果這樣，后面的屬性值就會覆蓋前面的屬性值。還是上面的案例稍做修改，看代碼：

 
 每個對象屬性都含有屬性a，它的值從1到最后變成了3，也就是Object.assign()函數處理的過程中，會把最后出現的屬性覆蓋前面的同名屬性。
 
        巧妙利用Object.assign( )函數的功能，我們可以完成很多效果，比如：給對象添加屬性和方法，克隆對象，合并多個對象，為對象的屬性指定默認值。
 
4.5 Object.getPrototypeOf函數
函數作用：獲取一個對象的prototype屬性。這里的對象我們用一個自定義類實例出來的對象來演示。

 
  這個案例代碼有點長，但是為了大家能看懂，我把注釋寫得比較詳細，前面部分都是關于面向對象的實現。把函數Person用new關鍵字調用，這個時候函數Person就相當于構造函數或者說是一個類，實例化后是一個對象，這個對象會繼承Person類的prototype的屬性和方法。上述例子中，也就是對象allen繼承了一個say方法，可以直接調用。
 
        如果你想看看prototype中還有哪些方法和屬性，那么，你就可以使用Object.getPrototypeOf( )函數來獲取，參數就是allen對象，最后的結果也如我們所料，確實打印出了我們剛開始定義好的內容：一個對象，含有一個say方法{say:function(){.....}}。
 
        那么，如果我想為這個對象修改prototype的內容，要怎么辦？這個時候，我們可以用ES6給我們的另一個方法。
 
4.6 Object.setPrototypeOf函數
函數作用：設置一個對象的prototype屬性。

 

 
  上面的代碼，我們使用Object.setPrototypeOf()函數對對象的prototype屬性進行了修改，具體的修改是重寫了say方法。在修改前，我們曾經調用過一次say( )方法，得到的結果是打印hello，修改之后我們再一次調用allen.say( )；得到的結果是打印出hi，說明我們修改成功了。
 
        最后兩個函數Object.getPrototypeOf()和Object.setPrototypeOf()的案例代碼有點長，涉及到了javascript的面向對象內容。新手如果沒有接觸過面向對象的話，讀起來一定會懵逼，這里有必要拓展一下javascript的面向對象。
 
4.7 Javascript中面向對象
Javascript本身不是一種面向對象的編程語言，在ES5中，它的語法中也沒有class（類的關鍵字），但是，開發者可以利用對象的原型prototype屬性來模擬面向對象進行編程開發。

 
 上面的案例告訴我們，模擬面向對象編程有幾個關鍵步驟：1、構造函數；2、給prototype對象添加屬性和方法；3、實例化；4、通過實例化后的對象調用類的方法或者屬性。
 
 注意：面向對象是一種編程思想，并不是具體的工具。

5 、ECMAScript6中函數的使用
5.1 參數的默認值
傳統方式：

 
上面是傳統的實現方式，通過或運算實現，原理：如果運算符 || 左側為true，直接返回左側的值，否則返回右側的值； 在person函數內，如果參數n沒有傳參，那么變量name得到的值就是“Zhangsan”，如果傳參了，變量name的值就為參數n的值。
 
        但是，前提是參數對應的布爾值不能false（比如：數字0，空字符串等轉換成布爾值就是false），這就使得這種傳統的實現方式存在一定的不足和缺陷。
ES6的寫法：

 
看，我們把默認值的設定放在了參數上：(name = 'Zhangsan',age = 25)，這樣就實現了參數name的默認值為‘Zhangsan’，age的默認值為25。而不需要在函數體內進行檢測，函數體內可以專注對參數的使用或者運算，再也不用擔心函數的實際傳參情況了。
 
        上面的案例，我們對person( )函數進行兩次調用，區別是有傳參數和沒傳參數，運行的結果也符合我們的預期：沒傳參，得到的是默認值Zhangsan 25，傳參就會得到傳入的參數值：Lisi  18。
 
        但是，多留個心眼，凡事總會有但是，如果函數有多個參數，但只有部分需要指定默認值，另一部分不需要的話，那么，設定默認值的參數一定要放在最后。看案例：

 
上面的person函數，兩個參數name和age，其中只有age需要指定默認值，name不需要，那么，age的排序就必須放在最后，name放在前面。也就是有默認值的參數后面不能再跟不需默認值的參數了。
 
        另外，只有當傳入的參數為undefined，才會觸發默認值賦值。否則，哪怕你傳的參數值為0，false，null都不會觸發默認值賦值，這就完美的解決了傳統實現方式的弊端，試試看：

 
看person( )函數的4次調用和結果，只有不傳或者傳入undefined的時候才會觸發默認值賦值，得到12，傳入數字0或者null都不會觸發默認值賦值。
 
        還有一個要注意的地方，函數的參數是默認聲明的，聲明過的變量，就不能用let或者const關鍵字再次聲明，否則會報錯的，不信給你看一個案例：

 
上面這種情況，函數被調用后，就會報錯，會提示你age已經被聲明過了，你別再聲明它了。
 
// 默認值如果傳遞的是對象，則只有undefined，NaN和空可以觸發默認值 其他情況傳入值就是實際值
    // 默認值如果傳遞的是變量，則只有undefined，空可以觸發默認值 其他情況傳入值就是實際值

 

5.2 rest函數
rest參數，這是一個新的概念，rest的中文意思是：剩下的部分。

 
上面的代碼注釋把每一步都寫得很詳細，首先，我們會看到一個陌生的語法：...values；咦？這是什么鬼？這是一種新的寫法，也就是我們要介紹的rest參數，它代表的意思是：在實參中，除了第一個參數以外，剩余的參數都會被...values獲取到。
       
        在上面的案例中：sum(res,1,2,3,4)，也就是除去實參 res 以外的參數，它們是1,2,3,4一共4個參數。它們全被...values收入囊中，接著，我們打印了values，看到的結果是一個數組：[1,2,3,4]，也就是這4個參數被裝在了一個數組中，我們想要使用這4個參數的話，就可以用數組的方法來對他們進行處理，所以我們用了forEach方法對它們進行了循環，并求和，把求和結果存儲到了變量res中，最后我們打印出結果，得到了數字10，也就是數字1,2,3,4的求和結果。
 
        （上面這段有點長，耐心讀完了嗎？讀不懂，可以拉上去再閱讀一遍上面的代碼案例）
 
        上面的案例主要是介紹了rest參數的用法，首先是表示法：...values（三個點+變量名）；其次，values是一個數組；我們要學會這兩點即可。
 
        要注意的是，rest參數必須是函數的最后一個參數，后面不能再跟其他參數，什么意思呢？看案例：

 
上面有錯誤和正確的兩種表示，在注釋上有說明原因。總之rest參數后面不能再跟有其他參數。
        rest參數并不是適合所有的函數使用，只在特定的情境下會比較適用，比方說剛剛案例中的求和函數，就十分適合要rest參數把實際的參數收集起來放在數組中進行求和，在適當的情況下使用它可以事半功倍，減少代碼量，提高開發效率。

 

5.3 擴展運算符
上面講到的rest參數，它的表示法使用...（三個點），它除了用在rest參數中，還有其他用途，我們稱這種表示法為擴展運算符，那么，它還有什么作用呢？
 
        它一般結合數組使用，把數組的元素用逗號分隔開來，組成一個序列。我們看一下實際案例：

 
上面的sum( )函數是簡單的將兩個數字相加求和，參數是兩個普通的參數x，y，并不是什么高逼格的rest參數，所以我們運用了擴展運算符...將數組[  2,3 ] 轉成了 2,3 兩個普通的數列，再傳進sum( )方法，對應上x，y兩個參數。實際上，sum( ...arr ) 的效果相當于sum( 2,3 ) 。
 
        從這個案例我們就可以理解擴展運算符...的作用了，它可以將一個數組轉成一個對應的參數數列。在實際開發中，你可以根據擴展運算符的作用，可以靈活運用，實現各種效果。
 

 

5.4 箭頭函數
箭頭函數，這又是一個新概念，ES6給我們介紹一種全新的定義函數的方式，就是用箭頭符號（=>），故得名為箭頭函數。具體怎么用，我們來看案例：

 
什么？第二種寫法這么簡短.....不敢信！！
 
        上面演示了兩種寫法，函數的作用都是一樣的，傳入參數a，直接返回a；第一種傳統的寫法大家都熟悉，我們看看第二種寫法：a=>a; 這里的第一個a代表是傳進去的參數，箭頭=>后面的a表示函數體；也許大家跟我一樣，很不習慣，但這種寫法確實簡潔了很多。
 
        看到這里，有開發經驗的“老司機”可能會問：如果傳入的參數不止一個，或者函數體不是簡單的返回a，需要做一些其他的運算，含有多條語句的話，怎么辦？
 
        問得好，對于這種情況，我們又有另一種處理辦法。舉個例子，假如我們給函數傳入2個參數，然后進行相加運算，我們用箭頭函數來實現：

 注意上面的參數和函數體部分，如果參數超過1個的話，需要用小括號（）括起來，函數體語句超過1條的時候，需要用大括號{ }括起來。
 
        箭頭函數的最大作用就是簡化函數的實現，大大地減少代碼量。來舉個例子對比一下，假設我們現在要對一個數組 [ 1,2,3,4 ] 里面的數求和，我們分別用傳統的方式和箭頭函數都實現一次，大家看看差別：

 
大家對比一下，用箭頭函數代替了傳統的匿名函數，確實減少了代碼量。