大家好，這是百日轉職前端工程師的 Day9，也是 7/20（一）。今天開始要來複習 JavaScript 常用的內建函式 (function)，這些多是程式導師實驗計畫第三週程式基礎下的課程內容，其實函式如果運用得好可以節省很多時間，不過在實際運用函式前，其實也練習手刻了滿多功能的，這樣子的好處是能夠瞭解函式內在邏輯是怎運作的，其次當遇到真的沒有的函式符合你的需求時，也能隨時動手作出來。
一、常用的陣列內建函式如何使用
1. Array.map
適用在陣列。就是可以對陣列內每一個元素做「處理」，會回傳一個每一元素處理完後新的陣列。
比方說先寫好一個 double() 的 function，然後再 Array.map(double)
詳細可參考 MDN – Array.prototype.map()
2. Array.filter
適用在陣列。就是可以對陣列內每一個元素做「過濾」，會回傳原陣列中過濾完後回傳 true 的元素組成的新陣列。
比方說先寫好一個 isPositive() 的 function，然後再 Array.map(isPositive)
詳細可參考 把要的元素留下來的 Array 陣列方法 filter()
3. Array.indexOf
適用在陣列。就是可以幫你找到你要的值在陣列中的第一個位置，若是找不到則會回傳 -1。
比方說 [1, 2, 4, 5, 4].indexOf(4) 則會回傳 2，在第三個的位置。
反之，Array.lastIndexOf 會從後面找回來，比方說 [1, 2, 4, 5, 4].lastIndexOf(4) 則會回傳 5，在第五的位置。
4. Array.reverse()
適用在陣列。就是可以對陣列內每一個元素做反轉，然後回傳一個所有元素順序倒轉的陣列。
比方說 [‘one’, ‘two’, ‘three’].reverse() 則會回傳 [‘three’, ‘two’, ‘one’]
5. Array.fill()
適用在陣列。就是將指定的值填入取代陣列已有的元素，可以指定填充位置。
比方說 [1, 2, 3, 4].fill(2) 則會回傳 [2, 2, 2, 2]
比方說 [1, 2, 3, 4].fill(5, 2, 3) 則會填充第二到第三的位置回傳 [1, 2, 5, 5]
詳細可參考 MDN – Array.prototype.fill()
6. Array.join()
適用在陣列。就是將所有的陣列元素以一個指定的字串連接後輸出一個字串，若沒指定則以 , 連接。
[‘one’, ‘two’, ‘three’].join(‘-‘) 則回傳一字串 ‘one-two-three’
二、常用的字串內建函式如何使用
1. String.trim
適用在字串。將字串「前」「後」的指定元素刪除掉回傳一新字串，若是沒指定則預設為空白。
比方說 ‘ 556 6 ‘.trim() 則回傳 ‘556 6’
2. String.toLowerCase
適用在字串。將字串中所有英文大寫轉成小寫後回傳一新字串。
比方說 ‘APPLE’.toLowerCase() 則回傳 ‘apple’
3. String.endsWith
適用在字串。判斷字串是否以指定字元做結尾，若是則回傳 true。
比方說 ‘My name is Paul.’.endsWith(Paul.) 則回傳 true
比方說 ‘My name is John.’.endsWith(Paul.) 則回傳 false
4. String.padEnd
適用在字串。將一字串不足指定長度的部分以指定值填入，若未指定值則預設填充空白，然後回傳一填充後的字串。
比方說 ‘012’.padEnd(10, ‘-‘) 則回傳 ‘012——–‘
比方說 ‘012’.padEnd(10) 則回傳 ‘012 ‘
4. String.slice
適用在字串。切下初始到結束位置的字串元素然後回傳成一個新的字串。
比方說 ‘Hello, I am fine. How about you?’ .slice(7, 16) 回傳 ‘I am fine.’
5. String.repeat
適用在字串。比方說 ‘a123’.repeat(3) ，就會輸出 ‘a123a123a123’。
三、總結：瞭解函式的原理，才好用
以上的函式其實都能自己寫出來，所以再直接套用函式前記得先瞭解原理，當你遇到你需要的功能沒有現有的內建函式符合的時候，不要忘了其實你都可以自己寫出來。
- 百日轉職前端工程師：前端工程師知識地圖 《DAY 1》
- 百日轉職前端工程師：時間管理的技巧 《DAY 2》
- 百日轉職前端工程師：網頁的普通常識 HTML 《DAY 3》
- 百日轉職前端工程師：高效率的最高休息法 《DAY 4》
- 百日轉職前端工程師：用 CLI 命令電腦 《DAY 5》
- 百日轉職前端工程師：人生不能重來但 GIT 可以《DAY 6》
- 百日轉職前端工程師：前端後端怎麼合作開餐廳《DAY 7》
- 百日轉職前端工程師：第四週秒懂網路基礎《DAY 8》
- 百日轉職前端工程師：JS 常用內建函式《DAY 9》
- 百日轉職前端工程師：第三週 JS 程式基礎《DAY 10》
- 百日轉職前端工程師：談談轉職初衷《DAY 11》
- 百日轉職前端工程師：第六週前端基礎 HTML《DAY 12》
- 百日轉職前端工程師：第六週前端基礎 CSS《DAY 13》
- 百日轉職前端工程師：第七週前端魔王 JAVASCRIPT《DAY 14》
- 百日轉職前端工程師：第八週前端整合串 API 《DAY 15》
- 百日轉職前端工程師：第九週後端基礎 PHP 與 MYSQL 《DAY 16》
- 百日轉職前端工程師：第十一週資訊安全復盤 《DAY 17》
- 百日轉職前端工程師：第十二週前後端整合復盤 《DAY 18》
- 百日轉職前端工程師：第十三週 WEBPACK, GULP 《DAY 19》
- 百日轉職前端工程師：第十三週現代前端工具復盤 《DAY 20》
- 百日轉職前端工程師：第十三週正規表達式 《DAY 21》
- 百日轉職前端工程師：第十四週伺服器 SERVER 與遠端部署 《DAY 22》
- 百日轉職前端工程師：第十四週 FTP 資料傳輸《DAY 23》
訂閱我不斷更新的百日學習專欄，看看我百日後有沒有成為工程師，薪水多少？
