<100 subscribers
線上課程觀課進度管理小工具開發日誌
Day 6:JavaScript 程式碼執行排序:遞迴函數、Call Stack、Task Queue
Call Stack;遞迴函數與 call stack 的關係;Task Queue(非同步的概念再釐清)
Day 9:「修煉圈圈 Practice Rings」Web app 開發日誌 - 2025 六角 AI Vibe Coding 體驗營期末大魔王作業
這份筆記旨在記錄 2025 六角 Vibe Coding 體驗營每日作業 Day 21 的期末專案成果,從一個簡單的個人痛點出發,透過與 AI(在我這個情境中是 Perplexity)協作,在一天內完成了一個包含前後端的全端網頁小工具:「修煉圈圈 Practice Rings」。
線上課程觀課進度管理小工具開發日誌
Day 6:JavaScript 程式碼執行排序:遞迴函數、Call Stack、Task Queue
Call Stack;遞迴函數與 call stack 的關係;Task Queue(非同步的概念再釐清)
Day 9:「修煉圈圈 Practice Rings」Web app 開發日誌 - 2025 六角 AI Vibe Coding 體驗營期末大魔王作業
這份筆記旨在記錄 2025 六角 Vibe Coding 體驗營每日作業 Day 21 的期末專案成果,從一個簡單的個人痛點出發,透過與 AI(在我這個情境中是 Perplexity)協作,在一天內完成了一個包含前後端的全端網頁小工具:「修煉圈圈 Practice Rings」。
這次 code review 時,花了一些時間釐清觀念,討論「()」在陣列方法或測試方法語法裡面的箭頭函式的意思,reviewer 分享 () 有兩個意思:
// 1. 用來定義函式接收的參數
function hello(name){
// do something
console.log(`Hello, ${name}!`);
return
}
// 2. 用來表示要執行 () 前的函式
hello();
// 函式表達式和箭頭函式
// 當作一般函式使用時,可以視為同義寫法
const hello = function (name){...};
const hello = (name) => {...};
// 3. 除了上述跟函式相關的用法,還可以用來改變運算優先順序,跟數學算式的用法類似
// 1.、2. 是函式語法的一部分,3. 是群組運算子
2 + 3 * 4; // 先乘除後加減
(2 + 3) * 4; // 括號算完才由左到右運算
// 陣列方法
arr.filter((item) => item.active);
arr.map((item) => item.name);
arr.reduce((sum, item) => sum + item.price, 0);
// 陣列方法的同語意寫法
arr.filter(function (item) { return item.active; });
arr.map(function (item) { return item.name; });
arr.reduce(function (sum, item) { return sum + item.price; }, 0);
// Vitest 測試語法
test('adds', () => {
expect(add(1, 2)).toBe(3);
});
test.each([
[1, 1, 2],
[1, 2, 3],
[2, 1, 3],
])('add(%i, %i) -> %i', (a, b, expected) => {
expect(add(a, b)).toBe(expected);
});
// Vitest 測試語法的同語意寫法
test('adds', function () {
expect(add(1, 2)).toBe(3);
});
test.each([
[1, 1, 2],
[1, 2, 3],
[2, 1, 3],
])('add(%i, %i) -> %i', function (a, b, expected) {
expect(add(a, b)).toBe(expected);
});
在「不使用 this / arguments、也不拿來 new」的情境下,可以把這兩種寫法視為同語意。目前練習還沒碰到。
// 這兩個在「當作一般函式使用」時,語意可以視為相同
const hello = function (name) {
// ...
};
const hello = (name) => {
// ...
};
():定義函式接收的參數
=> 或 function:定義函式的內容
// 箭頭函式
(item) => item.active;
// 從定義拆解箭頭函式
function (item) {
return item.active;
}
// 回到陣列方法中拆解
arr.filter((item) => item.active);
arr.filter(function (item) {
return item.active;
});
arr.filter(...):filter 是 HOF 高階函式,() 要放一個函式當作判斷條件
(item) => item.active:定義一個匿名函式
參數:(item) 表示函式接收自訂名稱為 item 的參數,在這裡會是陣列中的每個元素
函式內容:item.active 表示函式處理運算參數的內容和回傳值
不同陣列方法的參數數量和回傳值內容不同
// Vitest 測試語法中的箭頭函式
// 單一測試
test('adds', () => {
expect(add(1, 2)).toBe(3);
});
// 從定義拆解單一測試方法中的箭頭函式
test('adds', function () {
expect(add(1, 2)).toBe(3);
});
// 參數化測試(巢狀陣列)
test.each([
[1, 1, 2],
[1, 2, 3],
[2, 1, 3],
])('add(%i, %i) -> %i', (a, b, expected) => {
expect(add(a, b)).toBe(expected);
});
// 結構是
const eachFn = test.each([
[1, 1, 2],
[1, 2, 3],
[2, 1, 3],
]);
eachFn(
'add(%i, %i) -> %i',
(a, b, expected) => {
expect(add(a, b)).toBe(expected);
},
);
// 從定義拆解參數化測試方法中的箭頭函式
// (a, b, expected) => {...} 同語意寫法
function (a, b, expected) {
expect(add(a, b)).toBe(expected);
}
test('測試描述句', ...) : test 是一個函式,第一個參數是描述測試內容的字串,第二個參數是測試內容的函式(在這裡是() => {...} )
() => {...} : 定義一個「不接收任何參數」的函式
參數:() 表示沒有參數
函式內容:{expect(add(1, 2)).toBe(3);} 表示測試步驟
expect():接收實際算出來的值,所以常常會在裡面直接呼叫被測試函式 add(1, 2) 拿回傳值
toBe() :斷言,接收預期的測試函式輸出結果
1.test.each([...])('測試描述句', 這個函式) : 整體語意是「把這個匿名函式交給 Vitest,請 Vitest 依照前面那個資料表,重複呼叫它很多次」。 1. 相當於 eachFn('測試描述句', 這個函式) 這個對照單一測試函式的語法 2. test.each([...]) : 把測試資料表(巢狀陣列)給 Vitest,回傳一個函式,內層陣列每一組代表一組測資 3. (a, b, expected) => {...} : 被 Vitest 多次呼叫的匿名函式
大部分搞混「括號要包到哪裡」的問題,其實是在搞清楚:「這裡是在『定義函式』,還是在『呼叫函式』,還是在『包一坨運算式』」
這次 code review 時,花了一些時間釐清觀念,討論「()」在陣列方法或測試方法語法裡面的箭頭函式的意思,reviewer 分享 () 有兩個意思:
// 1. 用來定義函式接收的參數
function hello(name){
// do something
console.log(`Hello, ${name}!`);
return
}
// 2. 用來表示要執行 () 前的函式
hello();
// 函式表達式和箭頭函式
// 當作一般函式使用時,可以視為同義寫法
const hello = function (name){...};
const hello = (name) => {...};
// 3. 除了上述跟函式相關的用法,還可以用來改變運算優先順序,跟數學算式的用法類似
// 1.、2. 是函式語法的一部分,3. 是群組運算子
2 + 3 * 4; // 先乘除後加減
(2 + 3) * 4; // 括號算完才由左到右運算
// 陣列方法
arr.filter((item) => item.active);
arr.map((item) => item.name);
arr.reduce((sum, item) => sum + item.price, 0);
// 陣列方法的同語意寫法
arr.filter(function (item) { return item.active; });
arr.map(function (item) { return item.name; });
arr.reduce(function (sum, item) { return sum + item.price; }, 0);
// Vitest 測試語法
test('adds', () => {
expect(add(1, 2)).toBe(3);
});
test.each([
[1, 1, 2],
[1, 2, 3],
[2, 1, 3],
])('add(%i, %i) -> %i', (a, b, expected) => {
expect(add(a, b)).toBe(expected);
});
// Vitest 測試語法的同語意寫法
test('adds', function () {
expect(add(1, 2)).toBe(3);
});
test.each([
[1, 1, 2],
[1, 2, 3],
[2, 1, 3],
])('add(%i, %i) -> %i', function (a, b, expected) {
expect(add(a, b)).toBe(expected);
});
在「不使用 this / arguments、也不拿來 new」的情境下,可以把這兩種寫法視為同語意。目前練習還沒碰到。
// 這兩個在「當作一般函式使用」時,語意可以視為相同
const hello = function (name) {
// ...
};
const hello = (name) => {
// ...
};
():定義函式接收的參數
=> 或 function:定義函式的內容
// 箭頭函式
(item) => item.active;
// 從定義拆解箭頭函式
function (item) {
return item.active;
}
// 回到陣列方法中拆解
arr.filter((item) => item.active);
arr.filter(function (item) {
return item.active;
});
arr.filter(...):filter 是 HOF 高階函式,() 要放一個函式當作判斷條件
(item) => item.active:定義一個匿名函式
參數:(item) 表示函式接收自訂名稱為 item 的參數,在這裡會是陣列中的每個元素
函式內容:item.active 表示函式處理運算參數的內容和回傳值
不同陣列方法的參數數量和回傳值內容不同
// Vitest 測試語法中的箭頭函式
// 單一測試
test('adds', () => {
expect(add(1, 2)).toBe(3);
});
// 從定義拆解單一測試方法中的箭頭函式
test('adds', function () {
expect(add(1, 2)).toBe(3);
});
// 參數化測試(巢狀陣列)
test.each([
[1, 1, 2],
[1, 2, 3],
[2, 1, 3],
])('add(%i, %i) -> %i', (a, b, expected) => {
expect(add(a, b)).toBe(expected);
});
// 結構是
const eachFn = test.each([
[1, 1, 2],
[1, 2, 3],
[2, 1, 3],
]);
eachFn(
'add(%i, %i) -> %i',
(a, b, expected) => {
expect(add(a, b)).toBe(expected);
},
);
// 從定義拆解參數化測試方法中的箭頭函式
// (a, b, expected) => {...} 同語意寫法
function (a, b, expected) {
expect(add(a, b)).toBe(expected);
}
test('測試描述句', ...) : test 是一個函式,第一個參數是描述測試內容的字串,第二個參數是測試內容的函式(在這裡是() => {...} )
() => {...} : 定義一個「不接收任何參數」的函式
參數:() 表示沒有參數
函式內容:{expect(add(1, 2)).toBe(3);} 表示測試步驟
expect():接收實際算出來的值,所以常常會在裡面直接呼叫被測試函式 add(1, 2) 拿回傳值
toBe() :斷言,接收預期的測試函式輸出結果
1.test.each([...])('測試描述句', 這個函式) : 整體語意是「把這個匿名函式交給 Vitest,請 Vitest 依照前面那個資料表,重複呼叫它很多次」。 1. 相當於 eachFn('測試描述句', 這個函式) 這個對照單一測試函式的語法 2. test.each([...]) : 把測試資料表(巢狀陣列)給 Vitest,回傳一個函式,內層陣列每一組代表一組測資 3. (a, b, expected) => {...} : 被 Vitest 多次呼叫的匿名函式
大部分搞混「括號要包到哪裡」的問題,其實是在搞清楚:「這裡是在『定義函式』,還是在『呼叫函式』,還是在『包一坨運算式』」
Share Dialog
Share Dialog
No comments yet