標籤: js

0

鐵人賽:邁向 JavaScript 的勇者

這次是第四次參加鐵人賽,先前參加的主題分別為兩次 CSS 及一次 JavaScript (D3.js)。 因為原本是視覺設計師,在過去曾經打算專精於 CSS 就好,所以不斷專精 CSS 的表現模式以及他的開發模式,我還曾經開發過幾次的 CSS Framework (有實際運用過),不過隨著時間發展這個概念有了改變 :D。 撇開 CSS 不說,對於多變的 JavaScript 還是有一些自己的看法,

0

鐵人賽:透過 ESLint 學習 JavaScript ES6

至於 ES6 該怎麼學比較好!?很建議安裝 ESLint 來邊學邊修正觀念。ESLint 是一個團隊統一程式碼結構的工具,如果程式碼不符合規範,則會出現相對應的提示,而其中有三大主流規範是許多開發者愛用的: Google Airbnb JavaScript Standard Style 三個都有各自的擁護者,風格上 Airbnb 較為嚴謹,每一種語法都有嚴格的規範;而 JavaScript S

0

鐵人賽:ES6 建構式語法糖

這一段與先前介紹的建構式概念接近連結,單篇觀看可能無法理解為何 JavaScript 要加入 Class 的概念,而 Class 在 JavaScript 只是個語法糖,讓建構式及原型更容易被表現而已。 ES6 建構式這裡我們先將先前章節的程式碼整理過來,除了順序有些調換外,觀念上是沒有差異的,最後產生的值包含了物件屬性及原型的方法。 1234567891011121314151617181920

0

鐵人賽:JavaScript Await 與 Async

不知道上一篇大家對於 Promise 概念如何,本篇介紹的內容與 Promise 依然有相關性,因為這兩者就是建構於 Promise 之上的,如果直接從原始碼看可能不是很好瞭解這語法怎麼使用,不過可以先直接用 Google 翻譯了解大概意思: await: 等待 async: 非同步 Await 等待Promise 中完成會透過 then 來回傳,在 await 中他則是會等待這段函式完成後在

0

鐵人賽:使用 Promise 處理非同步

JavaScript 中有很多非同步的事件,而這些事件我們很常使用 callback,在一層包一層後就會出現知名的 callback 地獄,而 Promise 就是為了解決此問題而生的,因此每次介紹到 Promise 都會先下以下這張圖鎮鎮樓。 上一篇所介紹到的 Fetch() 就是使用 Promise,資料接收後才會繼續跑 then() 的內容。而 fetch() 是已經包裝好的 Promis

0

鐵人賽:ES6 原生 Fetch 遠端資料方法

如果不透過框架,要如何寫出一個 GET 請求呢?在 JavaScript 中可以使用 XMLHttpRequest 的方法,但其實我平常也不太會這樣寫,主要原因也是難以閱讀及撰寫,我們大多都會使用框架來處理這段,如 jQuery, Axios…,以下略為介紹如何製作一個原生的 GET 請求: 本篇使用的是 https://randomuser.me/ 隨機用戶產生器,這很適合用來作為 AJAX G

0

鐵人賽:常用陣列方法

除了 forEach 外還有非常多實用的陣列方法,上一篇介紹一些注意事項,本篇要來介紹其它常用的陣列方法,這些陣列方法在大部分瀏覽器也都可以運作了,除了少數舊款的 Android Browser, ie 9 等等不能用以外。 接下來都是使用這份資料來實作一些方法: 累加 比大小 分別運算 搜尋特定值等 123456789101112131415161718let people = [ 

0

鐵人賽:ES6 陣列方法

在過去處理陣列的方法不外乎就是使用 for 迴圈,或是使用配合框架的 forEach 像是 jQuery, angular.js 這些過去的框架都會提供 forEach;但到了 ES6 後,許多框架都不再提供 forEach 的語法,主要原因也是因為 ES6 就已經包含許多實用的陣列方法。 過去使用 forEach 的方式過去 JavaScript 並沒有 forEach 這樣的方法,如果是用原生

0

鐵人賽:ES6 解構賦值

解構賦值這是在 MDN 文件上的翻譯名詞,如果簡單來說他是個語法糖,讓我們在寫 物件、陣列 的時候可以使用縮寫來達到相同的效果,了解其中的規則再運用上最會很便利,且可以有效增加閱讀性 (程式碼短非常多)。 解構賦值可以想像是鏡子的概念,將右方的資料往左邊送,然後會一個位置對一個值 (但沒有像鏡子左右顛倒)。 陣列解構賦值就像是鏡子一樣,將值從右邊鏡射到左邊,所以左邊的陣列基本上就是從右方一個一個對

0

鐵人賽:JavaScript 展開與其餘

這兩個分別稱為 展開運算子(spread operator) 及 其餘運算子 (rest operator,也可稱為其餘參數),這兩個運算符有個兩個特點,就是都與陣列有關係,除此之外他都是 ...;第一次看到這樣的符號出現在 JavaScript 中,我還認為這是哪個預處理器的語法,不過在此他真的是 ES6 語法,以下內容一樣可以貼到 Chrome 運行。 預處理器:像是 CSS 的 Sass,