30Days of JS 工具書 1️⃣README.md 型別、值 typeof 運算符 屬性訪問運算符 (key in Object) Object[key] ...展開運算符 解構賦值

將陣列中的每一個元素依序傳入函式中，並返回函式處理結果 使用方法 使用 map 方法將價格轉換成價格標籤 const prices = [19.99, 29.95, 15.99, 49.99, 9.99]; const priceLabels = prices.map(price => `$${price.toFixed(2)}`); console.log(priceLabels); // 輸出: ["$19.99", "$29.95", "$15.99", "$49.99", "$9.99"]

在2023 iThome 鐵人賽，選用分享 LeetCode - 30 Days of Javascript 讀書計畫的解題過程作為參加主題。為了有效率的了解做題時需要的知識點，在閱讀題目前後會把相關知識點筆記起來並且搭配使用ChatGPT，最後再以HackMD整理成這本工具書用以輔助學習。 整理過程中有使用 ChatGPT 進行知識點簡介，工具書內可能參雜繁簡字體與用詞(如布林值/布爾值,陣列/數組這樣的差異)，但因為了解JS知識以及解題思路才是重點，除了勘誤以外不會做文書上的更新，請多多見諒。 如何使用 本工具書沒有閱讀順序，可以僅查看想知道的部分 在 2023 iThome 鐵人賽 的紀錄裡 題目會列出需要了解的知識點 Javascript初學者友善，每個知識點都有簡短程式碼助於有效率的導讀 最後歡迎一起參與

Lodash 是一個廣泛用於 JavaScript 編程的實用工具庫，它提供了豐富的方法來處理陣列、物件、字串、數字、函式等，幫助減少冗長的代碼，提高代碼的可讀性和性能。 Lodash廣泛用於 JavaScript 開發項目中處理常見任務，如數據轉換、篩選、映射、排序、擴展對象、日期操作等，有助於提高開發效率並降低錯誤風險。 以下是Lodash的一些主要特點和用途： 實用的方法： Lodash提供了一個豐富的函式庫，包括陣列處理、物件操作、字串處理、數字處理、函式式編程、集合處理等方面的方法。這些方法包括 map、filter、reduce、forEach、groupBy、debounce、throttle 等等。 跨瀏覽器兼容性： Lodash處理了許多瀏覽器兼容性問題，確保你的代碼在不同的瀏覽器中運行正常。 高性能： Lodash優化了許多操作的性能，並且具有高效的實現方式。這對於處理大量數據或優化性能敏感的應用程序非常有用。 鏈式語法： Lodash方法支持鏈式語法，允許你按順序調用多個方法，以連續處理數據。這種方式可以提高代碼的可讀性。

class 是 JavaScript 中的一種語言結構，它在 ECMAScript 6 (ES6) 中引入，用於更方便地創建和管理物件及其相關的行為。通過 class，JavaScript 的面向對象編程變得更具結構性和可讀性，同時也提供了繼承和多態性等高級面向對象編程特性。 以下是關於 JavaScript class 的一些重要概念和用法： 定義類別：使用 class 關鍵字來定義一個類別。例如：class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() {

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue) 將陣列中的每一個元素依序傳入一個回調函式，將數組中的每個元素組合成一個單一的值。 accumulator 累加器，保存了上一次回調函式返回的值，或是初始值（如果提供了初始值）。 currentValue 當前處理的陣列元素的值。 currentIndex（可選） 當前處理的陣列元素的索引。 array（可選） 原始陣列。 initialValue（可選） 初始值，如果提供了初始值，它將作為第一次調用回調函式時的 accumulator 的初始值。如果未提供初始值，則將使用陣列的最後一個元素作為初始值，並從倒數第二個元素開始遍歷。

Array.flat() 是 JavaScript 中的一個內建函數，用於將多維數組（陣列）轉換成一維數組。這個方法在處理多層嵌套數組時特別有用，它將嵌套的數組內的元素提取出來，並將它們放入一個新的一維數組中。這個函數可以接受一個整數參數，表示要扁平化的嵌套層級。 以下是 Array.prototype.flat() 的基本用法和一些示例： 基本用法： const nestedArray = [1, [2, 3], [4, [5, 6]]]; const flatArray = nestedArray.flat(); console.log(flatArray); // [1, 2, 3, 4, [5, 6]] 在上面的示例中，nestedArray 包含了多層嵌套的數組，但 flat() 方法將它們轉換為一個一維數組 flatArray。

JavaScript 中的 typeof 是一個一元運算符，用於確定給定值的數據類型（類型）。它不是一個函數，而是一個操作符，因此你可以直接將其與值一起使用，而不需要使用括號。 typeof 運算符返回一個表示值數據類型的字符串。 基本用法 下面是一些示例，演示了 typeof 運算符的基本用法： typeof 42; // 返回 "number" typeof "Hello, world!"; // 返回 "string" typeof true; // 返回 "boolean" typeof null; // 返回 "object"（這是一個歷史遺留問題） typeof undefined; // 返回 "undefined"

... 展開運算符（Spread Operator）是 JavaScript 中的一個特性，它允許你將一個陣列或物件拆分成獨立的元素或鍵值對。展開運算符可以應用在多種情況下，使得代碼更加簡潔且易於理解。 以下是 ... 展開運算符的一些常見用法： 展開陣列（Spread Array）：你可以使用展開運算符來將一個陣列中的元素展開成獨立的值，例如：const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5, 6]; console.log(arr2); // [1, 2, 3, 4, 5, 6] 合併陣列：展開運算符還可用於合併多個陣列，例如：const arr1 = [1, 2];

增刪組合 push(): 向陣列的末尾添加一個或多個元素，並返回新的長度。 pop(): 刪除並返回陣列的最後一個元素。 shift(): 刪除並返回陣列的第一個元素。 unshift(): 向陣列的開頭添加一個或多個元素，並返回新的長度。 concat(): 合併兩個或多個陣列，並返回一個新的陣列。 join(): 將陣列中的所有元素連接為一個字符串。 slice(): 提取陣列的一個片段，並返回一個新的陣列。 splice(): 改變陣列的內容，刪除、插入或替換元素。

object[key] 訪問屬性 這種方式是通過使用方括號 [] 來訪問對象的屬性。 如果 object 中存在名為 key 的屬性，則這個表達式將返回該屬性的值。 如果 object 中不存在 key 屬性，則這個表達式將返回 undefined。 這種方式用於訪問對象的屬性值，而不是檢查屬性是否存在。 const person = { firstName: 'John', lastName: 'Doe', age: 30

比較函數是 JavaScript 中用於控制排序順序的重要工具，通常與數組的 .sort() 方法結合使用。 比較函數是一個函數，接受兩個參數（通常命名為 a 和 b），並返回一個數字，該數字決定了這兩個參數的相對順序。 以下是關於比較函數的重要概念： 返回值規則：比較函數必須返回一個數字，該數字可正可負可零，具體表示如下：如果返回負數，意味著 a 應該在 b 之前，即 a 排在 b 的前面。 如果返回零，意味著 a 和 b 位置相對不變，它們相等。 如果返回正數，意味著 b 應該在 a 之前，即 b 排在 a 的前面。

slice() 是 JavaScript 數組方法之一，用於從數組中創建一個新數組，包含原數組中的一部分元素，而不修改原始數組。它的語法如下： array.slice([begin[, end]]) begin（可選）：表示從原數組中開始提取元素的位置的索引。如果未指定 begin，則從索引 0 處開始提取。如果 begin 是負數，它表示從數組末尾開始計數，例如 -1 表示數組的最後一個元素。 end（可選）：表示在原數組的哪個索引處結束提取元素（但不包括該索引處的元素）。如果未指定 end，slice() 會提取到數組的末尾。如果 end 是負數，它表示在數組末尾的索引位置。 slice() 方法返回一個新數組，包含從原數組中提取的元素。原數組不會被修改。 使用方式 const fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];

Array.sort() 是 JavaScript 數組對象的方法，用於對數組中的元素進行排序。它可以根據默認的排序規則或自定義排序函數來排序數組的元素。 Array.sort() 在原地排序數組，也就是說它會直接修改原始數組，而不會創建新的數組。 使用方式 array.sort([compareFunction]) const numbers = [3, 1, 5, 2, 4]; numbers.sort(); // 默認排序，按字符的 Unicode 順序排序 console.log(numbers); // 輸出 [1, 2, 3, 4, 5] const fruits = ['apple', 'banana', 'cherry', 'date']; fruits.sort(); // 默認排序，按字符的 Unicode 順序排序

"Chunk Array" 是一個用於將一個大的數組（或列表）拆分成多個較小的數組的常見操作(如:將大數據集分成更小的塊)，以便更容易處理或顯示。 拆分成多個較小的數組有助於： 批處理數據：當你需要處理大量數據時，拆分成較小的塊可以幫助你進行批處理，以防止內存問題或提高性能。 分頁顯示數據：在網頁應用程序中，如果你有大量的數據要顯示給用戶，你可以將數據拆分成多個頁面或分頁，以實現更好的用戶體驗。 并行處理：在多線程或多進程環境中，拆分數據可以幫助實現並行處理，提高處理速度。 壓縮或存儲數據：某些數據存儲或壓縮算法可能需要將數據分成較小的塊，以實現更好的壓縮率或管理。 實現 "Chunk Array" 操作通常涉及遍歷原始數組，然後將數據分成指定大小的塊。

Debounced function（防抖函式）是一種用於控制函式執行頻率的技術，特別適用於處理連續觸發的事件，如用戶輸入或瀏覽器窗口大小變化。其主要目的是確保函式在事件連續觸發時不會立即執行，而只會在事件停止觸發一段時間後執行一次。這有助於減少不必要的計算和提高性能。 Debounced function 的實現方法通常是使用計時器（例如 setTimeout）來延遲函式的執行，並在每次事件觸發時重設計時器。這意味著如果事件連續觸發，計時器將被不斷重設，直到事件停止觸發一段時間，然後才執行函式。 Debounced function 的應用場景包括： 防止過於頻繁的網頁事件，例如滾動事件或鍵盤事件，導致性能問題。 處理用戶輸入時的實時搜索，以減少多次請求伺服器的數量。 處理窗口大小變化事件，以確保只有在用戶停止調整窗口大小後才重新計算佈局。

async/await 是 JavaScript 中用於處理異步操作的一種現代語言特性，它使開發者能夠以同步的方式編寫異步代碼，使異步代碼更容易編寫和理解，並提供了更好的錯誤處理機制。 它通常與 Promise 結合使用，以便執行異步操作並等待它們的結果。 async 異步函數 async 關鍵字用於定義一個異步函數。異步函數返回一個 Promise 對象，它包裝了函數的執行結果（無論是成功還是失敗）。 異步函數內部可以包含異步操作，例如異步請求、定時器等。 async function myAsyncFunction() { // 異步操作

解構賦值（Destructuring Assignment）是 JavaScript 中一種強大且方便的特性，它允許你從陣列或物件中提取值並將它們賦給變數。這樣可以讓你更容易地訪問和操作這些值，並以更簡潔的方式進行賦值。 解構賦值有兩種主要形式：陣列解構和物件解構。 陣列解構 陣列解構允許你按照陣列中的位置順序來提取值，並將它們賦給變數。以下是一個簡單的示例： const numbers = [1, 2, 3, 4, 5]; const [first, second, third] = numbers;

閉包是一種在計算機科學和程式設計中的概念，通常與函數相關。 它捕獲了函數定義時所在的作用域內的變數，並允許這些變數在函數執行時仍然可用， 即使它們的作用域已經結束。 形成方式 函數內部定義函數 當在一個函數內部定義另一個函數時，內部函數可以捕獲外部函數作用域內變數， 只要內部函數實際上使用了外部函數的變數，內部函數及其捕獲的變數就形成了一個閉包。 如果內部函數不使用外部函數的變數，則不會形成閉包。 函數作為參數傳遞或返回值

將陣列中的每一個元素依序傳入一個回調函式，並返回處理結果 使用方法 使用 Array.filter() 過濾偶數 let numbers = [1, 2, 3, 4, 5, 6]; let evenNumbers = numbers.filter(function(num) { return num % 2 === 0; });