# Day 1-3：熟悉 JavaScript 基礎工具語法，以 TDD 實作為核心思考撰寫程式碼

By [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake) · 2025-11-24

javascript, ecmascript, tdd

---

Git 檔案版本控制
----------

基本指令，亦可在 VS code GUI 操作：

git add \[要暫存的檔案\]

git commit -m "更新內容筆記說明"

git branch：建立分支

git checkout：跳到某分支或某標籤

(選用) git push：推送到雲端程式庫如 GitLab、GitHub

TDD (Test-Driven Development)
-----------------------------

安裝 node.js, vitest 初步理解 TDD 開發流程，測試先寫（app.test.js），再寫功能邏輯（app.js），最後由主程式（main.js）負責串接互動

為了讓 Node.js 可以在終端機互動，連結到 readline 和非同步的概念

**閱讀文件：**

*   [為你自己學 Git 電子書](https://leanpub.com/learn-git)
    
*   [Vitest 官方文件](https://vitest.dev/guide/)
    
*   [AlphaCamp 教學文章](https://tw.alphacamp.co/blog/tdd-test-driven-development-example)
    
*   [30天快速上手 TDD](https://tdd.best/blog/the-three-laws-of-tdd/)
    

非同步、Promise、await/async、readline
--------------------------------

*   **非同步**允許 JS 邊執行主程式、邊等待資料（如 API、IO），常見技術有 callback、Promise、async/await
    
*   **Promise** 用 then、catch、finally 串接處理流程
    
*   **async/await** 是基於 Promise 的語法糖，讓非同步流程容易讀懂/寫測試
    
*   **readline** 讓 Node.js 互動式接收使用者輸入，適合 CLI 練習
    

**補充文件：**

*   [MDN - 非同步概念](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing)
    
*   [MDN - Promise](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise)
    
*   [MDN - async function 與 await](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/async_function)
    
*   [ExplainThis.io async/await](https://www.explainthis.io/zh-hant/swe/async-await)
    
*   [ExplainThis.io Promise](https://www.explainthis.io/zh-hant/swe/what-is-promise)
    
*   [OXXO Studio async/await 教學](https://www.oxxostudio.tw/articles/201908/js-async-await.html)
    
*   [ExplainThis.io Event Loop](https://www.explainthis.io/zh-hant/swe/what-is-event-loop)
    

* * *

Vitest expect 檢查方法
------------------

*   `expect().toBe()`：嚴格相等（基本型別）
    
*   `expect().toEqual()`：內容（陣列、物件）深度比對
    
*   `expect().toMatch()`：字串或正則表達式片段比對
    
*   注意：用原生 `.match()` 包在 expect，result 只要不是 null 就可能 test pass，正式專案務必注意要用 matcher 方法！
    

**補充文件：**

*   [Vitest expect API](https://vitest.dev/api/expect.html)
    
*   [MDN String.match()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/match)
    

* * *

型別轉換
----

*   `Number(n)` 讓字串轉成數值，可搭配 `isNaN()` 判斷資料有效性
    
*   `num.toString()` 或模板字串 `` `${num}` `` 快速把數字轉成字串，適合終端機/前端輸出
    

**補充文件：**

*   [MDN - Number()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number)
    
*   [MDN - isNaN()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/isNaN)
    
*   [MDN - toString()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)
    

* * *

for loop
--------

語法：for (let i=1; i<=n; i++) 可多層 nested 使用

搭配 if 判斷式執行或 break 跳出

array
-----

空陣列：let arr = \[\];

產生一個長度為n的陣列，從 arr\[0\] = 1 開始依序填值：let arr = Array.from({ length: n }, (v, i) => i + 1); v 為 undefined、i 為 index

加總所有元素：arr.reduce((acc,cur)=>acc+cur,0)，原理是設定初始值為 0，依照 index 逐一 callback 目前累積得到的總和acc和（下一個要加的值）當前元素cur

映射每個元素（到新陣列）：arr.map

**補充文件：**

*   [MDN - for](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/for)
    
*   [MDN - Array.from()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
    
*   [MDN - Array.reduce()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
    
*   [MDN - Array.map()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
    

* * *

---

*Originally published on [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/day-1-3)*