卡斯伯提供的教學資源：
鐵人賽：ES6 原生 Fetch 遠端資料方法
如果不透過框架，要如何寫出一個 GET 請求呢？在 JavaScript 中可以使用 XMLHttpRequest 的方法，但其實我平常也不太會這樣寫，主要原因也是難以閱讀及撰寫，我們大多都會使用框架來處理這段，如 jQuery, Axios…，以下略為介紹如何製作一個原生的 GET 請求： 本篇使...
鐵人賽：常用陣列方法
除了 forEach 外還有非常多實用的陣列方法，上一篇介紹一些注意事項，本篇要來介紹其它常用的陣列方法，這些陣列方法在大部分瀏覽器也都可以運作了，除了少數舊款的 Android Browser, ie 9 等等不能用以外。 接下來都是使用這份資料來實作一些方法： 累加 比大小 分別運算 搜尋特定...
鐵人賽：ES6 陣列方法
在過去處理陣列的方法不外乎就是使用 for 迴圈，或是使用配合框架的 forEach 像是 jQuery, angular.js 這些過去的框架都會提供 forEach；但到了 ES6 後，許多框架都不再提供 forEach 的語法，主要原因也是因為 ES6 就已經包含許多實用的陣列方法。 過去使用...
鐵人賽：ES6 解構賦值
解構賦值這是在 MDN 文件上的翻譯名詞，如果簡單來說他是個語法糖，讓我們在寫 物件、陣列 的時候可以使用縮寫來達到相同的效果，了解其中的規則再運用上最會很便利，且可以有效增加閱讀性 (程式碼短非常多)。 解構賦值可以想像是鏡子的概念，將右方的資料往左邊送，然後會一個位置對一個值 (但沒有像鏡子左右...
鐵人賽：JavaScript 展開與其餘
這兩個分別稱為 展開運算子(spread operator) 及 其餘運算子 (rest operator，也可稱為其餘參數)，這兩個運算符有個兩個特點，就是都與陣列有關係，除此之外他都是 ...；第一次看到這樣的符號出現在 JavaScript 中，我還認為這是哪個預處理器的語法，不過在此他真的是...
鐵人賽：ES6 的縮寫概念
再參加過那麼多次鐵人賽，我自己習慣在週六寫比較簡短的文章，因此本篇也是屬於短文，還要介紹 ES6 偷懶的方法(O)，這讓撰寫 JavaScript 變得更簡化，熟悉這些語法也會讓閱讀性更高 (一開始會有點不習慣啦)，本篇要來介紹一些 ES6 中簡化的 JavaScript 語法。 物件縮寫在過去相同...
鐵人賽：JavaScript Template String 樣板字串
在過去我們撰寫字串的時候都是使用 " ，這種寫法會讓程式碼變得很攏長且難以閱讀，再多行的時候也必須插入反斜線來換行。 const people = [ { name: '小明', friends: 2 }, { ...
鐵人賽：箭頭函式 (Arrow functions)
Arrow function 對於它也是又愛又恨的，看似簡約的外型卻有著全新的體驗，它有著更簡短的語法以及重新定義的 this，所以先前學的 this 在此也會有不同的情境。 簡短的語法一般使用箭頭函式與 function 的用法大致一致，可以傳入參數、也有大括號包起來，除此之外箭頭函式也有更簡短的...
鐵人賽：ES6 開始的新生活 let, const
接下來本篇開始會介紹 ES6 語法，在很久之前聽到 ES6 這個名詞時我都是保持觀望的態度，裡面有許多語法讓我感覺的不是很真實，像是 ...、=>、class 等等，這些看起來與現有的 JavaScript 很不搭嘎 :(。 ES6 許多語法與現有的觀念有很大的關係，其中也很大一部分是為了改進...
鐵人賽：JavaScript 建構式與原型
還記得先前幾篇的原型鍊嗎？多個物件可以使用相同原型的那個章節，兩個不同的角色但是共用相同的原型，所以當原型增加新的功能，另一個角色一樣會獲得相同功能： 現在已經透過 JavaScript 建構式產生一個獨立的物件，我們接下來會使用原型鍊的概念來創造原型。 範例目前已經使用建構式製作一個簡單手機樣板...