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

**Published by:** [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/)
**Published on:** 2025-11-24
**Categories:** javascript, ecmascript, tdd
**URL:** https://paragraph.com/@gcake/day-1-3

## Content

Git 檔案版本控制基本指令，亦可在 VS code GUI 操作： git add [要暫存的檔案] git commit -m "更新內容筆記說明" git branch：建立分支 git checkout：跳到某分支或某標籤 (選用) git push：推送到雲端程式庫如 GitLab、GitHubTDD (Test-Driven Development)安裝 node.js, vitest 初步理解 TDD 開發流程，測試先寫（app.test.js），再寫功能邏輯（app.js），最後由主程式（main.js）負責串接互動 為了讓 Node.js 可以在終端機互動，連結到 readline 和非同步的概念 閱讀文件：為你自己學 Git 電子書Vitest 官方文件AlphaCamp 教學文章30天快速上手 TDD非同步、Promise、await/async、readline非同步允許 JS 邊執行主程式、邊等待資料（如 API、IO），常見技術有 callback、Promise、async/awaitPromise 用 then、catch、finally 串接處理流程async/await 是基於 Promise 的語法糖，讓非同步流程容易讀懂/寫測試readline 讓 Node.js 互動式接收使用者輸入，適合 CLI 練習補充文件：MDN - 非同步概念MDN - PromiseMDN - async function 與 awaitExplainThis.io async/awaitExplainThis.io PromiseOXXO Studio async/await 教學ExplainThis.io Event LoopVitest expect 檢查方法expect().toBe()：嚴格相等（基本型別）expect().toEqual()：內容（陣列、物件）深度比對expect().toMatch()：字串或正則表達式片段比對注意：用原生 .match() 包在 expect，result 只要不是 null 就可能 test pass，正式專案務必注意要用 matcher 方法！補充文件：Vitest expect APIMDN String.match()型別轉換Number(n) 讓字串轉成數值，可搭配 isNaN() 判斷資料有效性num.toString() 或模板字串 `${num}` 快速把數字轉成字串，適合終端機/前端輸出補充文件：MDN - Number()MDN - isNaN()MDN - 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 - forMDN - Array.from()MDN - Array.reduce()MDN - Array.map()

## Publication Information

- [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/): Publication homepage
- [All Posts](https://paragraph.com/@gcake/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@gcake): Subscribe to updates