JavaScript

学习 JavaScript 函数参数的基础知识。 函数可以接受一个或多个参数。 const dosomething = () => { //做些事情 } const dosomethingElse = foo => { //做些事情 } const dosomethingElseAgain = (foo, bar) => { //做些事情 } 从 ES6/ES2015 开始，函数的参数可以有默认值： const dosomething = (foo = 1, bar = 'hey') => { //做些事情 } 这样你就可以在调用函数时不填充所有参数： dosomething(3) dosomething() ES2018 引入了参数的尾随逗号，这个特性有助于减少由于移动参数导致的缺少逗号而引起的 bug（例如，将最后一个参数移动到中间时）： const dosomething = (foo = 1, bar = 'hey',) => { //做些事情 } dosomething(2, 'ho!') 在最后一个参数后面加上逗号来调用函数也是可以的： dosomething(2, 'ho!',) 你可以将所有参数包装在数组中，并在调用函数时使用 扩展运算符：...

了解 JavaScript 的這個新功能 直到最近，我才有幸使用動態匯入，當時我在一個 Next.js 應用程式中使用它們來分割程式碼，並且我必須進行一些研究，因為它們與靜態匯入有些不同。 一個 ES 模組的靜態匯入（預設匯出）的寫法如下： import moment from 'moment' 你可以使用物件解構的方式來取得命名匯出： import { format } from 'date-fns' 靜態匯入有一些限制： 它們限制在檔案的頂層 它們不能在條件判斷（if）內被載入 套件名稱無法在執行時決定 動態匯入可以做到所有這些事情！ 它們的語法略有不同。 並且它們可以在模組內使用。 使用方式如下： const module = await import('module') 而要使用預設匯出，則必須先呼叫 .default()。 以 moment 為例的範例： const moment = (await import('moment')).default() 相反地，命名匯入的使用方式與預期相同： const { format } = await import('date-fns') 你能夠立即使用它們嗎？可以！瀏覽器支援已經相當不錯，並且還有一個Babel 插件可用。

了解 JavaScript 字串的屬性和方法 String 物件有一個靜態方法 String.fromCharCode()，可以用來從一系列的 Unicode 字元建立字串表示。以下是使用 ASCII 碼建立簡單字串的範例： String.fromCodePoint(70, 108, 97, 118, 105, 111) //'Flavio' 你也可以使用八進制或十六進制數字： String.fromCodePoint(0x46, 0154, parseInt(141, 8), 118, 105, 111) //'Flavio' 接下來介紹的所有方法都是實例方法：指的是要針對字串類型運行的方法。 實例方法 字串提供了一些獨特的方法可供使用： charAt(i) charCodeAt(i) codePointAt(i) concat(str) endsWith(str) includes(str) indexOf(str) lastIndexOf(str) localeCompare() match(regex) normalize() padEnd() padStart() repeat() replace(str1, str2) search(str) slice(begin, end) split(separator) startsWith(str) substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() trimEnd() trimStart() valueOf()

關於 JavaScript 物件屬性和方法的一切 本篇文件記錄了所有 Object 內建物件的屬性和方法。 除了原始類型（字串、數字、布林值、符號、null 或 undefined）之外的任何值都是一個物件。即使是陣列或函式，在底層也都是物件。 可以使用物件字面語法來生成一個物件值： const person = {} typeof person // "object" 可以使用 Object 全局函式來生成物件值： const person = Object() typeof person // "object" 也可以使用 Object 建構函式來生成物件值： const person = new Object() typeof person // "object" 另一種語法是使用 Object.create()： const car = Object.create() 可以使用以下語法來初始化物件的屬性： const person = { age: 36, name: 'Flavio', speak: () => { // 說話 } } const person = Object({ age: 36, name: 'Flavio', speak: () => { // 說話 } }) const person = new Object({ age: 36, name: 'Flavio', speak: () => { // 說話 } }) 這些方式基本上是等價的，因為它們都可以讓您訪問我下面將列出的方法。...

可選鏈接運算符 (optional chaining operator) 是一個非常有用的運算符，我們可以用它來操作對象及其屬性或方法。 以前，你是否曾使用過 && 運算符作為備用方案呢？這是我最喜歡的 JavaScript 特性之一。 在 JavaScript 中，我們可以先檢查對象是否存在，然後嘗試獲取其屬性，就像這樣： const car = null const color = car && car.color 即使 car 為 null，也不會出現錯誤，color 將被賦予 null 的值。 你可以深入多層級： const car = {} const colorName = car && car.color && car.color.name 在其他一些語言中，使用 && 可能會返回 true 或 false，因為通常它是一個邏輯運算符。 但在 JavaScript 中不是這樣，這讓我們可以做一些很酷的事情。 現在這個新的可選鏈接運算符讓我們更加靈活： const color = car?.color const colorName = car?.color?.name 如果 car 為 null 或 undefined，結果將為 undefined。 不會出現錯誤（而使用 && 運算符時，如果 car 為 undefined，將出現 ReferenceError: car is not defined 錯誤）。

學習 JavaScript 的回傳值基礎知識 每個函式都會回傳一個值，預設情況下為 undefined。 當函式的程式碼執行到結束或遇到 return 關鍵字時，函式即被終止。 當 JavaScript 遇到 return 關鍵字時，它會終止函式的執行並將控制權返回給呼叫者。 如果你傳入一個值，在函式中這個值會作為函式的結果返回： const dosomething = () => { return 'test' } const result = dosomething() // result === 'test' 你只能返回一個值。 為了模擬返回多個值，你可以返回一個物件文字或一個陣列，並在呼叫函式時使用解構賦值。 使用陣列： 使用物件：

在 JavaScript 中，使用地圖資料結構可以將資料與鍵值關聯起來。在 ES6 引入地圖資料結構之前，人們通常將物件用作地圖，將某個物件或值與特定的鍵值關聯起來。 什麼是地圖 ES6 之前 進入地圖 將項目添加到地圖中 按鍵從地圖中獲取項目 按鍵從地圖中刪除項目 從地圖中刪除所有項目 檢查地圖中是否包含特定鍵的項目 查找地圖中項目的數量 初始化具有值的地圖 地圖的鍵 你幾乎永遠不會在真實生活中遇到的奇怪情況 遍歷地圖 遍歷地圖的鍵 遍歷地圖的值 遍歷地圖的鍵和值對 轉換為陣列 將地圖的鍵轉換為陣列 將地圖的值轉換為陣列 WeakMap 什麼是地圖 地圖資料結構允許將資料與鍵值關聯起來。 ES6 之前 ECMAScript 6（也稱為 ES2015）引入了地圖資料結構到 JavaScript 世界中，以及集合。 在 ES6 之前，人們通常使用物件作為地圖，通過將某個物件或值與特定的鍵值關聯起來： const car = {} car['color'] = 'red' car.owner = 'Flavio' console.log(car['color']) // red console.log(car.color) // red console.log(car.owner) // Flavio console.log(car['owner']) // Flavio 進入地圖 ES6 引入了地圖資料結構，為我們提供了一個適當的工具來處理這種類型的資料組織。 可以通過調用以下方法來初始化地圖： const m = new Map() 將項目添加到地圖中 可以使用 set 方法將項目添加到地圖中：...

如何在 JavaScript 函數的中間快速結束退出？ 你可以使用 return 關鍵字來實現。 當 JavaScript 遇到 return 關鍵字時，它立即退出函數，並將你在 return 之後傳遞的任何變量（或值）作為結果返回。 這是我經常使用的方法，以確保如果某個條件不符合預期，我可以立即退出函數。 也許我期望有一個參數，但它不存在： function calculateSomething(param) { if (!param) { return; } // 繼續執行函數 } 如果存在 param 值，函數將按預期繼續執行，否則它將立即停止。 在這個例子中，我返回了一個描述錯誤的對象： function calculateSomething(param) { if (!param) { return { error: true, message: '需要參數' }; } // 繼續執行函數 } 你返回的內容取決於調用函數的代碼對它的期望。 也許你可以在一切正常時返回 true，在出現問題時返回 false。或者像上面的例子中展示的那樣，返回一個具有 error 布爾標記的對象，以便你可以檢查結果是否包含該屬性（或在成功的情況下，返回一個具有 success: true 屬性的對象）。

學習 JavaScript 的展開運算子基礎知識 你可以使用展開運算子 ... 來擴展陣列、物件或字串。 首先從陣列的例子開始。給定 const a = [1, 2, 3] 你可以使用以下方式來建立一個新陣列 const b = [...a, 4, 5, 6] 你也可以使用以下方式來複製一個陣列 const c = [...a] 這對物件也同樣適用。你可以使用以下方式來克隆一個物件 const newObj = { ...oldObj } 使用字串時，展開運算子會將字串中的每個字元創建一個陣列 const hey = 'hey' const arrayized = [...hey] // ['h', 'e', 'y'] 這個運算子有一些非常有用的應用。其中最重要的應用之一是能夠非常簡單地將陣列作為函式參數使用 const f = (foo, bar) => {} const a = [1, 2] f(...a) 在處理陣列解構賦值時，rest 元素非常有用 const numbers = [1, 2, 3, 4, 5] const [first, second, ....

解釋了屬性描述符以及它們的用途 在 JavaScript 中，任何物件都有一組屬性，而每個屬性都有一個 描述符。 這個描述符是一個物件，它定義了屬性的行為和自身屬性。 許多 Object 靜態方法與之相互作用。這些方法包括： Object.create() Object.defineProperties() Object.defineProperty() Object.getOwnPropertyDescriptor() Object.getOwnPropertyDescriptors() 以下是一個屬性描述符物件的例子： { value: 'Something' } 這是最簡單的描述符物件。value 是屬性的值，在鍵值定義中使用。這個 key 是在物件中定義此屬性時所使用的鍵： { breed: { value: 'Siberian Husky' } } 示例： const animal = {} const dog = Object.create(animal, { breed: { value: 'Siberian Husky' } }); console.log(dog.breed) //'Siberian Husky' 您可以為每個不同的物件屬性傳遞其他屬性： value：屬性的值 writable：若為 true，則該屬性可以被更改 configurable：若為 false，則該屬性無法被移除，也無法更改任何屬性，除非它的值 enumerable：若為 true，則該屬性是可枚舉的 get：屬性的 getter 函式，在讀取屬性時呼叫 set：屬性的 setter 函式，在變更屬性值時呼叫 writable、configurable 和 enumerable 設定該屬性的行為。它們的值是布林值，默認情況下都是 false。...