[{"categories":["Free"],"collections":null,"content":"免費字體 Free Fonts 一些蒐集字體的站台，有免費、可商用的字體檔，有預覽及介紹字體特色，並且提供下載。 Free Font 海量字體資源，有多個 CDN 分流站可使用或下載字體檔。 字集 蒐集了很多字體，但較少更新。 其他 貓啃网 字體資源豐富的站台，有繁體字，不用註冊即可下載網盤資源。 字体天下 也是個字體資源豐富的站台，也有繁體字，不用註冊可下載資源。 ","date":"2025-04-01","heading":"免費字體 Free Fonts","objectID":"/posts/free-fonts/:0:1","tags":["Font"],"title":"免費字體 Free Fonts","uri":"/posts/free-fonts/#免費字體-free-fonts"},{"categories":["Note"],"collections":null,"content":"JS 常見的 for 迴圈 以下由執行速度的快到慢排序 for-loop-cached const listSize = yourList.length; // 精華 for (let index = 0; index \u003c listSize; index++) { // ... } for-loop for (let index = 0; index \u003c yourList.length; index++) { // ... } forEach yourList.forEach((element) =\u003e { // ... }); for-of for (const element of yourList) { // ... } ","date":"2023-11-21","heading":"JS 常見的 for 迴圈","objectID":"/posts/js-foreach/:0:1","tags":["JavaScript"],"title":"JS 迴圈與效能","uri":"/posts/js-foreach/#js-常見的-for-迴圈"},{"categories":["Note"],"collections":null,"content":"參考資料 https://dev.to/siddiqus/which-for-loop-is-the-fastest-in-javascript-4hdf ","date":"2023-11-21","heading":"參考資料","objectID":"/posts/js-foreach/:0:2","tags":["JavaScript"],"title":"JS 迴圈與效能","uri":"/posts/js-foreach/#參考資料"},{"categories":["Note"],"collections":null,"content":"JS 做一個 Todolist 吧 以 todolist 為例，做個有 CRUD 功能的待辦清單 // todolist 資料容器 let todoListData = [] // 編號用隨機亂數 function newId () { return ~~ (Date.now() + (Math.random()*50)) } 新增一筆資料 let newTodoData = { \"id\": newId(), \"title\": \"買早餐\", \"info\": \"要漢堡跟可樂\" } todoListData.push(newTodoData) 刪除所有資料 todoListData.length = 0 刪除指定資料 // 要被刪除的 id const id = 385746993 // 找 id 存在的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 若 id 存在就刪除 if (listIndex \u003e -1) { todoListData.splice(listIndex, 1) } 查詢指定資料 // 要尋找的 id const id = 385746993 // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 顯示資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { return todoListData[listIndex] } 修改指定資料 // 要修改的 id 與內容 const id = 385746993 const newTitle = \"買下午茶\" const newInfo = \"檸檬蛋糕起司塔\" // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 修改資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { todoListData[listIndex].title = newTitle todoListData[listIndex].info = newInfo } ","date":"2023-11-20","heading":"JS 做一個 Todolist 吧","objectID":"/posts/js-todolist-crud/:0:1","tags":["JavaScript"],"title":"JS 常見的陣列操作","uri":"/posts/js-todolist-crud/#js-做一個-todolist-吧"},{"categories":["Note"],"collections":null,"content":"JS 做一個 Todolist 吧 以 todolist 為例，做個有 CRUD 功能的待辦清單 // todolist 資料容器 let todoListData = [] // 編號用隨機亂數 function newId () { return ~~ (Date.now() + (Math.random()*50)) } 新增一筆資料 let newTodoData = { \"id\": newId(), \"title\": \"買早餐\", \"info\": \"要漢堡跟可樂\" } todoListData.push(newTodoData) 刪除所有資料 todoListData.length = 0 刪除指定資料 // 要被刪除的 id const id = 385746993 // 找 id 存在的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 若 id 存在就刪除 if (listIndex \u003e -1) { todoListData.splice(listIndex, 1) } 查詢指定資料 // 要尋找的 id const id = 385746993 // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 顯示資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { return todoListData[listIndex] } 修改指定資料 // 要修改的 id 與內容 const id = 385746993 const newTitle = \"買下午茶\" const newInfo = \"檸檬蛋糕起司塔\" // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 修改資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { todoListData[listIndex].title = newTitle todoListData[listIndex].info = newInfo } ","date":"2023-11-20","heading":"新增一筆資料","objectID":"/posts/js-todolist-crud/:0:1","tags":["JavaScript"],"title":"JS 常見的陣列操作","uri":"/posts/js-todolist-crud/#新增一筆資料"},{"categories":["Note"],"collections":null,"content":"JS 做一個 Todolist 吧 以 todolist 為例，做個有 CRUD 功能的待辦清單 // todolist 資料容器 let todoListData = [] // 編號用隨機亂數 function newId () { return ~~ (Date.now() + (Math.random()*50)) } 新增一筆資料 let newTodoData = { \"id\": newId(), \"title\": \"買早餐\", \"info\": \"要漢堡跟可樂\" } todoListData.push(newTodoData) 刪除所有資料 todoListData.length = 0 刪除指定資料 // 要被刪除的 id const id = 385746993 // 找 id 存在的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 若 id 存在就刪除 if (listIndex \u003e -1) { todoListData.splice(listIndex, 1) } 查詢指定資料 // 要尋找的 id const id = 385746993 // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 顯示資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { return todoListData[listIndex] } 修改指定資料 // 要修改的 id 與內容 const id = 385746993 const newTitle = \"買下午茶\" const newInfo = \"檸檬蛋糕起司塔\" // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 修改資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { todoListData[listIndex].title = newTitle todoListData[listIndex].info = newInfo } ","date":"2023-11-20","heading":"刪除所有資料","objectID":"/posts/js-todolist-crud/:0:1","tags":["JavaScript"],"title":"JS 常見的陣列操作","uri":"/posts/js-todolist-crud/#刪除所有資料"},{"categories":["Note"],"collections":null,"content":"JS 做一個 Todolist 吧 以 todolist 為例，做個有 CRUD 功能的待辦清單 // todolist 資料容器 let todoListData = [] // 編號用隨機亂數 function newId () { return ~~ (Date.now() + (Math.random()*50)) } 新增一筆資料 let newTodoData = { \"id\": newId(), \"title\": \"買早餐\", \"info\": \"要漢堡跟可樂\" } todoListData.push(newTodoData) 刪除所有資料 todoListData.length = 0 刪除指定資料 // 要被刪除的 id const id = 385746993 // 找 id 存在的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 若 id 存在就刪除 if (listIndex \u003e -1) { todoListData.splice(listIndex, 1) } 查詢指定資料 // 要尋找的 id const id = 385746993 // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 顯示資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { return todoListData[listIndex] } 修改指定資料 // 要修改的 id 與內容 const id = 385746993 const newTitle = \"買下午茶\" const newInfo = \"檸檬蛋糕起司塔\" // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 修改資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { todoListData[listIndex].title = newTitle todoListData[listIndex].info = newInfo } ","date":"2023-11-20","heading":"刪除指定資料","objectID":"/posts/js-todolist-crud/:0:1","tags":["JavaScript"],"title":"JS 常見的陣列操作","uri":"/posts/js-todolist-crud/#刪除指定資料"},{"categories":["Note"],"collections":null,"content":"JS 做一個 Todolist 吧 以 todolist 為例，做個有 CRUD 功能的待辦清單 // todolist 資料容器 let todoListData = [] // 編號用隨機亂數 function newId () { return ~~ (Date.now() + (Math.random()*50)) } 新增一筆資料 let newTodoData = { \"id\": newId(), \"title\": \"買早餐\", \"info\": \"要漢堡跟可樂\" } todoListData.push(newTodoData) 刪除所有資料 todoListData.length = 0 刪除指定資料 // 要被刪除的 id const id = 385746993 // 找 id 存在的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 若 id 存在就刪除 if (listIndex \u003e -1) { todoListData.splice(listIndex, 1) } 查詢指定資料 // 要尋找的 id const id = 385746993 // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 顯示資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { return todoListData[listIndex] } 修改指定資料 // 要修改的 id 與內容 const id = 385746993 const newTitle = \"買下午茶\" const newInfo = \"檸檬蛋糕起司塔\" // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 修改資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { todoListData[listIndex].title = newTitle todoListData[listIndex].info = newInfo } ","date":"2023-11-20","heading":"查詢指定資料","objectID":"/posts/js-todolist-crud/:0:1","tags":["JavaScript"],"title":"JS 常見的陣列操作","uri":"/posts/js-todolist-crud/#查詢指定資料"},{"categories":["Note"],"collections":null,"content":"JS 做一個 Todolist 吧 以 todolist 為例，做個有 CRUD 功能的待辦清單 // todolist 資料容器 let todoListData = [] // 編號用隨機亂數 function newId () { return ~~ (Date.now() + (Math.random()*50)) } 新增一筆資料 let newTodoData = { \"id\": newId(), \"title\": \"買早餐\", \"info\": \"要漢堡跟可樂\" } todoListData.push(newTodoData) 刪除所有資料 todoListData.length = 0 刪除指定資料 // 要被刪除的 id const id = 385746993 // 找 id 存在的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 若 id 存在就刪除 if (listIndex \u003e -1) { todoListData.splice(listIndex, 1) } 查詢指定資料 // 要尋找的 id const id = 385746993 // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 顯示資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { return todoListData[listIndex] } 修改指定資料 // 要修改的 id 與內容 const id = 385746993 const newTitle = \"買下午茶\" const newInfo = \"檸檬蛋糕起司塔\" // 找 id 的 index 位置 const listIndex = todoListData.findIndex(element =\u003e element.id == id) // 修改資料及找不到 id 的處理 if (listIndex \u003c 0) { console.log(\"找不到:\" + id) } else { todoListData[listIndex].title = newTitle todoListData[listIndex].info = newInfo } ","date":"2023-11-20","heading":"修改指定資料","objectID":"/posts/js-todolist-crud/:0:1","tags":["JavaScript"],"title":"JS 常見的陣列操作","uri":"/posts/js-todolist-crud/#修改指定資料"},{"categories":["Note"],"collections":null,"content":"使用範例 在 Codepen 玩看看效果吧 See the Pen JS - Todolist by Hank (@tw1720) on CodePen. ","date":"2023-11-20","heading":"使用範例","objectID":"/posts/js-todolist-crud/:0:2","tags":["JavaScript"],"title":"JS 常見的陣列操作","uri":"/posts/js-todolist-crud/#使用範例"},{"categories":["Note"],"collections":null,"content":"補充 Array Methods [3, 4, 5, 6].at(1); // 4 [3, 4, 5, 6].pop(); // [3, 4, 5] [3, 4, 5, 6].push(7); // [3, 4, 5, 6, 7] [3, 4, 5, 6].fill(1); // [1, 1, 1, 1] [3, 4, 5, 6].join(\"-\"); // '3-4-5-6' [3, 4, 5, 6].shift(); // [4, 5, 6] [3, 4, 5, 6].reverse(); // [6, 5, 4, 3] [3, 4, 5, 6].unshift(1); // [1, 3, 4, 5, 6] [3, 4, 5, 6].includes(5); // true [3, 4, 5, 6].map((num) =\u003e num + 6); // [9, 10, 11, 12] [3, 4, 5, 6].find((num) =\u003e num \u003e 4); // 5 [3, 4, 5, 6].filter((num) =\u003e num \u003e 4); // [5, 6] [3, 4, 5, 6].every((num) =\u003e num \u003e 5); // false [3, 4, 5, 6].findIndex((num) =\u003e num \u003e 4); // 2 [3, 4, 5, 6].reduce((acc, num) =\u003e acc + num, 0); // 18 ","date":"2023-11-20","heading":"補充","objectID":"/posts/js-todolist-crud/:0:3","tags":["JavaScript"],"title":"JS 常見的陣列操作","uri":"/posts/js-todolist-crud/#補充"},{"categories":["Free"],"collections":null,"content":"用 Invidious 看 Youtube Invidious 有著簡潔的網站頁面，可以透過\u0026rsquo;播放器偏好設定\u0026rsquo;頁面來做調整，例如\u0026rsquo;不顯示留言\u0026rsquo;、\u0026lsquo;預設影片品質\u0026rsquo; \u0026hellip; 等，在觀看影片時，會少了很多廣告及非必要的資訊，頁面更乾淨。 Invidious 此站台功能比較完整且穩定。 站台列表 內還有很多可以選用。 提示 Android 手機可以在瀏覽器的工具列，選擇\u0026rsquo;加到主畫面\u0026rsquo;，就可以建立捷徑快速開啟，不用安裝 APP 也能在關閉螢幕時，背景聽影片、聽音樂囉！ ","date":"2023-11-16","heading":"用 Invidious 看 Youtube","objectID":"/posts/invidious/:0:1","tags":null,"title":"影音站 Invidious","uri":"/posts/invidious/#用-invidious-看-youtube"},{"categories":["Free"],"collections":null,"content":"站台列表 https://api.invidious.io/ ","date":"2023-11-16","heading":"站台列表","objectID":"/posts/invidious/:0:2","tags":null,"title":"影音站 Invidious","uri":"/posts/invidious/#站台列表"},{"categories":["Note"],"collections":null,"content":"用 ~~ 取得整數值 無條件捨去，取得整數值，效能優於 parseInt console.log(~~ -2.34); // -2 ","date":"2023-11-15","heading":"用 ~~ 取得整數值","objectID":"/posts/js-bitwise-not/:0:1","tags":["JavaScript"],"title":"JS ~~ 取整數","uri":"/posts/js-bitwise-not/#用--取得整數值"},{"categories":["Note"],"collections":null,"content":"用 ~ 判斷陣列的值是否存在 const arr = [1, 2, 3]; if (~arr.indexOf(3)) { console.log(\"find!\"); // find! } ","date":"2023-11-15","heading":"用 ~ 判斷陣列的值是否存在","objectID":"/posts/js-bitwise-not/:0:2","tags":["JavaScript"],"title":"JS ~~ 取整數","uri":"/posts/js-bitwise-not/#用--判斷陣列的值是否存在"},{"categories":["Note"],"collections":null,"content":"參考資料 https://segmentfault.com/a/1190000003731938 https://shunnien.github.io/2017/06/26/JavaScript-Double-bitwise-not/ ","date":"2023-11-15","heading":"參考資料","objectID":"/posts/js-bitwise-not/:0:3","tags":["JavaScript"],"title":"JS ~~ 取整數","uri":"/posts/js-bitwise-not/#參考資料"},{"categories":["Note"],"collections":null,"content":"顯示今天是星期幾的兩種寫法 使用 switch const dayNumber = new Date().getDay() let day = '星期日' switch(dayNumber){ case 1: day = '星期一' break case 2: day = '星期二' break case 3: day = '星期三' break case 4: day = '星期四' break case 5: day = '星期五' break case 6: day = '星期六' break } console.log('今天' + day) 使用 object const dayNumber = new Date().getDay() const days = { 0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三', 4: '星期四', 5: '星期五', 6: '星期六' } const day = days[dayNumber] console.log('今天' + day) ","date":"2023-11-15","heading":"顯示今天是星期幾的兩種寫法","objectID":"/posts/js-today-week/:0:1","tags":["JavaScript"],"title":"JS 今天星期幾","uri":"/posts/js-today-week/#顯示今天是星期幾的兩種寫法"},{"categories":["Note"],"collections":null,"content":"用位元運算子 XOR (^) 特性 function uniqueNumber(nums) { return nums.reduce((a, b) =\u003e a ^ b, 0) } console.log(uniqueNumber([1, 2, 3, 1, 2])) // 3 ","date":"2023-11-14","heading":"用位元運算子 XOR (^) 特性","objectID":"/posts/js-xor-unique-number/:0:1","tags":["JavaScript"],"title":"JS 找出陣列中不重複的值","uri":"/posts/js-xor-unique-number/#用位元運算子-xor--特性"},{"categories":["Note"],"collections":null,"content":"去除重複的值 const origin = [1, 2, 'a', 3, 1, 'b', 'a'] const result = [...(new Set(origin))] console.log(result) // [1, 2, 'a', 3, 'b'] ","date":"2023-11-14","heading":"去除重複的值","objectID":"/posts/js-xor-unique-number/:0:2","tags":["JavaScript"],"title":"JS 找出陣列中不重複的值","uri":"/posts/js-xor-unique-number/#去除重複的值"},{"categories":["Note"],"collections":null,"content":"參考資料 https://pjchender.dev/javascript/js-operator/ https://guahsu.io/2017/06/JavaScript-Duplicates-Array/ ","date":"2023-11-14","heading":"參考資料","objectID":"/posts/js-xor-unique-number/:0:3","tags":["JavaScript"],"title":"JS 找出陣列中不重複的值","uri":"/posts/js-xor-unique-number/#參考資料"},{"categories":["Note"],"collections":null,"content":"日期時間的處理 簡單的日期時間取得以及格式化 // 取當前日期時間(timestamp 時間戳) const timestamp = Date.now(); console.log(timestamp); // 1713251128711 // 取當前日期時間(ISO 8601 的格式) const nowDateTimeISO = new Date().toISOString().split(\".\")[0] + \"Z\"; console.log(nowDateTimeISO); // 2024-04-16T07:17:31Z // 取當前日期時間(補零) const nowDateTime = new Date(Date.now()).toLocaleString(\"sv\"); console.log(nowDateTime); // 2024-04-16 13:51:58 // 取當前日期時間(補零，指定時區) const nowDateTimeNY = new Date(Date.now()).toLocaleString(\"sv\", { timeZone: \"America/New_York\" }); console.log(nowDateTimeNY); // 2024-04-16 03:05:02 // 取當前日期(補零) const nowDate = new Date(Date.now()).toLocaleString(\"sv\").split(\" \")[0]; console.log(nowDate); // 2024-04-16 // 取當前時間(補零) const nowTime = new Date(Date.now()).toLocaleString(\"sv\").split(\" \")[1]; console.log(nowTime); // 13:55:08 ","date":"2023-11-14","heading":"日期時間的處理","objectID":"/posts/js-datetime-format/:0:1","tags":["JavaScript"],"title":"JS 簡單的日期格式化","uri":"/posts/js-datetime-format/#日期時間的處理"},{"categories":["Note"],"collections":null,"content":"數字與金額的處理 也是常用到的格式 // 數字補零(補滿6位數) const sixNum = String(1234).padStart(6, \"0\"); console.log(sixNum); // 001234 // 金額千分位 const money = Intl.NumberFormat().format(1234567890); console.log(money); // 1,234,567,890 ","date":"2023-11-14","heading":"數字與金額的處理","objectID":"/posts/js-datetime-format/:0:2","tags":["JavaScript"],"title":"JS 簡單的日期格式化","uri":"/posts/js-datetime-format/#數字與金額的處理"},{"categories":["Free"],"collections":null,"content":"Free Adblock DNS 記錄一些免費並具有 Adblock 廣告阻擋的DNS服務，配置方式可以參考各站台的圖文說明。 AdGuard 老牌子，除了公眾 DNS 服務，也能用可以客製化的免費方案，有每月免費請求額度上限。 Control D 不只廣告過濾功能，訪客也可以在 FreeDNS 頁面選用各種不同功能或混搭配置使用。 NextDNS 也是有免費的客制服務，超過每月的免費請求額度上限時，將如同一般 DNS 。 Dnsforge 穩定，但延遲較高，且些許服務會被誤判阻擋。 其他 OpenBLD.net DNS Blahdns Ahadns ","date":"2023-11-12","heading":"Free Adblock DNS","objectID":"/posts/adb-dns/:0:1","tags":["AdBlock","DNS"],"title":"免費且具有 Adblock 的 DNS 服務","uri":"/posts/adb-dns/#free-adblock-dns"},{"categories":["Free"],"collections":null,"content":"參考資料 https://github.com/hagezi/dns-blocklists ","date":"2023-11-12","heading":"參考資料","objectID":"/posts/adb-dns/:0:2","tags":["AdBlock","DNS"],"title":"免費且具有 Adblock 的 DNS 服務","uri":"/posts/adb-dns/#參考資料"},{"categories":null,"collections":null,"content":"從 Blogger 搬家囉！ 不再使用 Blogger ，改用 HUGO 寫 Blog ，將會逐一檢查以前文章的內容，陸續轉移過來存放。 已經失效的、過於老舊的文章，不會被收錄過來。 ","date":"2023-11-11","heading":"從 Blogger 搬家囉！","objectID":"/posts/hello-hugo/:0:1","tags":null,"title":"Hello HUGO","uri":"/posts/hello-hugo/#從-blogger-搬家囉"},{"categories":null,"collections":null,"content":"Free is cool 😎 免費很酷 蒐集免費簡單好用的資訊，記錄程式設計與電腦網路相關技術學習資料 沒有盈利，沒有廣告干擾，簡單乾淨的頁面 Blog 使用 Hugo ，主題為 FixIt ，加入了 CMS Decap 部署在 Cloudflare Pages ，使用很酷的網址 is-cool.dev ","date":"0001-01-01","heading":"","objectID":"/about/:0:1","tags":null,"title":"About","uri":"/about/#free-is-cool--免費很酷"},{"categories":null,"collections":null,"content":"Admin 大部分文章來源為網際網路，參考或轉載會註明來源 若發現文章有問題，可來信告知 E-mail：api@mail.ee，感謝幫忙 👍 ","date":"0001-01-01","heading":"Admin","objectID":"/about/:0:2","tags":null,"title":"About","uri":"/about/#admin"}]