卡斯伯提供的教學資源:
鐵人賽: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 建構式產生一個獨立的物件,我們接下來會使用原型鍊的概念來創造原型。 範例目前已經使用建構式製作一個簡單手機樣板...