JavaScript

深入解析：處理中文數字的自訂排序函數在程式開發中，經常需要處理各種複雜的排序需求。今天，遇到一個需求需要對某個項目的欄位排序，欄位裡面開頭儲存著(一)、(二)等等的中文數字，所以寫下了這個自訂排序函數來處理，這個函數能夠處理帶有中文數字前綴的字串，並按照這些數字的順序進行排序。 函數概述這個自訂排序函數主要用於排序一個物件陣列 scope.datalist。每個物件都有一個 Catacory 屬性，值可能包含像 "(一)"、"(二)"、"(十)"、"(二十)" 這樣的中文數字前綴，可以處理到(九十九)。函數的目標是根據這些前綴的數值大小對陣列進行排序，如果沒有排序的數字，設定為100，達成無順序的項目放到最後面的效果。 程式碼解析讓我們逐步分解這個函數的實現: 12345678910function customSort(a, b) { // ... (getNumber函數的實現) const aNum = getNumber(a.Catacory); const...

JavaScript字串搜索方法比較：indexOf vs includes vs filter在JavaScript中，我們經常需要檢查一個字串是否包含某個特定的字元或子字串。本文將深入比較三種常用的方法：indexOf()， includes()， 和filter()。我們將探討它們的語法、用法、優缺點，以及性能考慮。 1. indexOf() 方法indexOf()是最古老和最廣泛支持的方法之一。 語法1string.indexOf(searchValue[, fromIndex]) 用法123const str = "Hello, World!";const hasO = str.indexOf('o') !== -1; // trueconst hasZ = str.indexOf('z') !== -1; // false 優點 兼容性好，支持舊版瀏覽器 可以指定開始搜索的位置 缺點 返回值不是布爾型，需要與-1比較 代碼可讀性較差 2. includes()...

Promise 和 setTimeout 的深入解析在 JavaScript 中，Promise 和 setTimeout 是處理非同步操作的兩個重要工具。雖然它們都用於處理非同步事件，但它們的工作方式和使用場景有所不同。讓我們深入探討這兩個概念。 PromisePromise 是 JavaScript 中用於處理非同步操作的對象。它代表了一個可能尚未完成的操作，但在未來的某個時間點會完成。Promise 有三種狀態： Pending（進行中）：初始狀態，既未完成也未拒絕。 Fulfilled（已完成）：操作成功完成。 Rejected（已拒絕）：操作失敗。 Promise 的優點包括： 可以將非同步操作以同步操作的流程表達出來，避免了回調地獄。 提供了 .then()、.catch() 和 .finally() 方法，使得處理非同步操作的結果更加直觀。 Promise 的基本用法1234567891011121314const myPromise = new Promise((resolve, reject) => { // 非同步操作 if...

JS防抖與節流教學在Javascript開發過程中，我們經常需要處理一些高頻事件，比如滾動、窗口縮放、鍵盤輸入等。如果這些事件的處理函數直接綁定到事件上，可能會導致瀏覽器的性能問題。為了優化性能和用戶體驗，我們通常會使用兩種技術：防抖（Debouncing）和節流（Throttling）。接下來，我們將深入了解它們的差異、使用時機和實現方法。 防抖 (Debouncing)防抖技術指的是觸發事件後，在指定時間內只執行一次事件處理函數。如果在指定時間內再次觸發了事件，則重新計算等待時間。這樣可以確保事件處理函數在一系列快速的事件觸發中只被執行一次。 使用時機防抖技術適用於那些觸發頻率高，但不需要立即響應每次觸發的場景。例如： 搜索框輸入（用戶停止輸入後再進行搜索）窗口大小調整（調整結束後再計算布局） 範例 12345678910111213function debounce(func, wait) { let timeout; return function(...args) { const context = this; ...

深入理解 JavaScript 的 async/await在我們之前討論的 Promise 和 setTimeout 的基礎上，async/await 是 JavaScript 中處理非同步操作的更高層次抽象。它提供了一種更直觀、更類似同步程式碼的方式來處理非同步操作。 async/await 的基本概念 async 函式 使用 async 關鍵字宣告的函式。 總是返回一個 Promise。 允許在其中使用 await 關鍵字。 await 運算符 只能在 async 函式內部使用。 用於等待一個 Promise 解決（或拒絕）。 暫停 async 函式的執行，直到 Promise 完成。 與 Promise 的關係async/await 本質上是 Promise 的語法糖。它讓我們可以用更簡潔、更易讀的方式編寫基於 Promise 的程式碼。讓我們看一個例子來比較： 使用 Promise： 1234567891011function fetchData() { return...

setTimeout 和 JavaScript 的 Event Loop 運作原理JavaScript 是一種單執行緒語言，但它能夠執行非同步操作，這要歸功於事件循環（Event Loop）機制。在本文中，我們將深入探討 setTimeout 函式的運作原理，以及它如何與 JavaScript 的事件循環相互作用。 JavaScript 的單執行緒特性首先，我們需要理解 JavaScript 是單執行緒的。這意味著它一次只能執行一個操作。但是，如果所有操作都是同步的，那麼長時間運行的任務就會阻塞整個程式，導致糟糕的使用者體驗。這就是非同步程式設計發揮作用的地方。 非同步程式設計和事件循環JavaScript 使用事件循環來處理非同步操作。事件循環負責執行程式碼、收集和處理事件，以及執行排隊的子任務。以下是事件循環的基本組成部分： 呼叫堆疊（Call Stack） Web API 回呼佇列（Callback Queue） 事件循環（Event Loop） setTimeout 的運作原理setTimeout...

JavaScript 深拷貝完整指南：掌握物件複製的關鍵技巧在 JavaScript 開發中，正確處理物件拷貝是一個重要的技能。本文將詳細介紹各種深拷貝的方法，幫助你選擇最適合的實作方式。 深拷貝 vs 淺拷貝：關鍵差異在開始介紹各種方法之前，我們先來理解深拷貝和淺拷貝的差異： 淺拷貝：只複製第一層屬性，內部物件仍然共享參考 深拷貝：遞迴複製所有層級，創建完全獨立的新物件 實作方法 1：使用 JSON 方法最簡單的深拷貝方法是使用 JSON.parse() 和 JSON.stringify()： 123456789101112// 簡單的深拷貝實作function jsonDeepCopy(obj) { // 將物件轉換為 JSON 字串，再解析回物件 return JSON.parse(JSON.stringify(obj));}// 使用範例const original = { name: 'John', info: { age: 25 }};const copy =...