###### tags: `JavaScript`

嘿！JavaScript 我要學會你！
===

- [前言](/m6FBwHJxSMu4dzSjgYqPkw)
- [前端開發工具彙整](/pwbErM2ITXKpVtIPQwcwwg)

❁ 資料型別與基礎
---
#### 最初的最初

- [1-1 什麼是資料型別？](/y_AIrha6QoKnGH5-W3k-Mg)
- [1-2 什麼是變數？](/AiGNXs9_S3qvPgqAUep1oA)
- [1-3 JavaScript 與 ES5、ES6](https://vocus.cc/article/61e24cd9fd8978000164dc34)
- [1-4 var、let 與 const 差異](/Rl4kBcNmSKyzXa061vigQA)

❁ 瀏覽器的物件模型
---
#### 一、BOM

- [1-1 瀏覽器與 JavaScript 的關係](/UDUKO5L5RC6xPJtiARckmQ)
- [1-2 什麼是 BOM ?](/FlHEyIgGQo2DboznB9BViQ)
- [1-3 window.location 修改網址](/FKd3SmmpSU6nReX6VtK4kw)
- [1-4 setTimeOut 延遲任務執行](/khnAI_qLT7CaRgwVNvpGJQ)
- [1-5 如何開新瀏覽器視窗](/CcoIWQAqReGcLjQbBv-rHA)

#### 二、DOM

- [2-1 DOM 與網頁生命週期](/nsE278-vQGKrVOhCGJBMrw)
- [2-2 操作 DOM 讓網頁回到最後上方](/CSZbxaPjR5ewxfBQ_9Vjcg)

❁ 網頁事件
---

#### 一、事件種類

- [1-1 網頁介面相關事件](/zp1s7bYwQky6dQPJ35Pj9w)
- [1-2 滑鼠相關事件](/50o2i-C_TTeSa1xbvxqIdw)
- [1-3 鍵盤相關事件](/x3Aqm-wiQFi6aRADYgujrg)
- [1-4 表單相關事件](/_OA9fx3eRJCBZzN_Fbgwxg)
- [1-5 特殊事件](/jwbWu52aTQ6MPeJfN1PF5g)
- [1-6 剪貼簿事件](/8TXWqtJQQlCFm1cNNMF7XQ)

#### 二、事件方法

- [2-1 什麼是事件處理器？](/tJavnRgpR_yHwat6ExLPrA)

❁ JavaScript 核心
---
#### ㄧ、基礎函式

- [1-1 箭頭函式](/1jinPWIoSP26crR7L_2dLw)
- [1-2 其餘參數](/oWAz40NDTp2Cq5wfaVRN9g)
- [1-3 以物件作為參數](/5aSPS_wlTtSFHVDAUO99iA)
- [1-4 參數檢查](/mNskFvPAT5C2_L2gL8d8eA)
- [1-5 callback function](/G0CruhLzQOCGGVDKDt9ViQ)
- [1-6 立即函式 IIFE](/UydchuRVRqy_UGUBThNZtA)
- [1-7 void](/we0DwDvVSYqdPtUI5x3eIw)
- [1-8 callback hell](/iCnDQxCqTLeBPyKJlDCDnw)
- [1-9 Async、Await 解決非同步問題](/Au-i4_4CTn2xb78m3DMy2g)
- [1-10 EventQueue](/emMbkIdQRMS0L3wnD6Z3tA)

#### 二、進階函式

- [2-1 範圍鏈](/m5eRrA-mS9W6OA-5iA3mIQ)
- [2-2 閉包](/HcryF8-XROKkxiNbqHNj5A)
- [2-3 this ](/vwFt9J1KQJGLk_1xydrzvQ)

#### 三、原型鏈
#### 四、字串方法

- [4-1 String.split( ) 拆分字串](/xmWwDYpNRGGMyW8qR1GXbw)

#### 五、物件
- [5-1 物件解構賦值](/EHHEXTzxQ0-XfJs0lqh3fQ)
- [5-2 Date 物件方法](/eZD4PHMYRA-_xF9OUrtguw)
- [5-3 Object.keys( )方法簡介](/LNKXwJMZRa-M6VAMKdHKzg)
- [5-4 Object.values( )方法簡介](/cuD2UIN3RnGkrK9O8JuIqg)
- [5-5 Object.entries( )方法簡介](/slkT34rhSEG71tSzrdTQYQ)

#### 六、陣列
- [6-1 slice 切分陣列](/fSlEFubsQeuc8Pqk-a4Hrw)
- [6-2 splice 在陣列中刪除/新增指定元素](/oXuO9ss-Q2aEGnUw9ej3OA)
- [6-3 陣列解構賦值](/csIQ2hHBT5-iOvcIHeB8YQ)
- [6-4 陣列的合併](/X91W3c4ATvCDMYp9LoqRQQ)
- [6-5 filter](/gJFYR9Z6RneYgeYYxNDL5Q)
- [6-6 sort 進行排序](/dfZha_BoQhmuocZdIlD2ww)
#### 七、Math方法 & 數字的應用
- [7-1 常見運算方法](/GqlEhTyuT_W_4Dxmqgd4sA)
- [7-2 如何將字串轉換為數字](/AdILVSm9QJ2EBKC9c9Pvyg)

#### 八、WebSocket

- [8-1 WebSocket 簡介](/BdjakByZTKO43MrX6FKFDg)
- [8-2 Websocket 範例](/iFQCtd9yTsWpNpE1mwtR6Q)
- [➤ WebSocket 教學](https://www.letswrite.tw/websocket/)

#### 九、Promise

- [9-1 什麼是 Promise？](/PMGeU2FQTv-lW7MJJ-I1Ng)

#### 十、原型鏈

- [10-1 class 簡介](/_pfhUm4VRSyaxaMiKD33zg)
- [10-2 constructor 簡介](/uXEtAiXMRp-qWVT572FI3w)

#### 十一、記憶體

- [11-1 JavaScript 的傳參考、傳值](/71Cd7oyiQ-eMW7U28B66gg)
- [11-2 淺拷貝與深拷貝](/WFLskn5RRUqjTfyiew1_lg)

❁ JavaScript 管理模式
---
#### Factory Mode
- [1-1 工廠模式是什麼？](/99C1EvdJRoOTMevZOeXNzw)

#### Object Destructuring

- [2-1 為什麼需要物件解構](/yDc6elM8Q7C9m7l7xg7uKg)
- [2-2 物件解構提取鍵值](/IyeT_jViTEOCwrevJgJdZg)

❁ ES Module 元件化程式碼
---
- [1-1 預設匯出匯入](/ZgQC9rcVRjmwBcZk7XOuGA)
- [1-2 具名匯出匯入](/RbYTOJ4lSHaTGp_lBzFysA)
- [1-3 如何在 HTML 中建立模組且取用](/QooDvuRHTaqgSxASWioJ0g)
- [1-4 使用 ESM 方式引入其他第三方套件](/Nfra2vcCQ92pOHsdDnKjnA)

❁ RESTful API
---
- [1-1 什麼是 RESTful API?](/y8GUdE3GRFmABKA5hx3HSQ)
- [1-2 如何使用 fetch 進行網路請求？](/CDdO1v2MTj6xXph3vaA7Rw)

❁ Open Source API
---
- [臺北旅遊景點 API](https://www.travel.taipei/open-api/swagger/ui/index)
- [幣安 WebSocket 行情 API](https://binance-docs.github.io/apidocs/spot/en/#websocket)
- [交通部 TDX API](https://tdx.transportdata.tw/api-service/swagger)[target=_blank]

❁ 好用套件
---

- [Mermaid.js 流程圖套件](/Lem6VQN0T5298IXkQPgogw)
- [Big.js 處理大數字](https://mikemcl.github.io/big.js/)
- [QR code 產生器](https://www.npmjs.com/package/qrcode-generator)
- [Moment.js 處理時間](https://momentjs.com/)

❁ 好文收藏
---

- [➤ 物件解構賦值](https://dmitripavlutin.com/javascript-object-destructuring/)
- [➤ 篩選陣列不重複值](https://guahsu.io/2017/06/JavaScript-Duplicates-Array/)
- [➤ ES6 以後的工廠模式](https://medium.com/javascript-scene/javascript-factory-functions-with-es6-4d224591a8b1)[target=_blank]