JavaScript 表達式

表達式是可以被評估並解析為值的代碼單位。JavaScript 中的表達式可以分為各種類別。 算術表達式 字串表達式 基本表達式 陣列和物件初始化表達式 邏輯表達式 左邊表達式 屬性存取表達式 物件創建表達式 函數定義表達式 調用表達式 算術表達式 屬於這個類別的表達式都會計算為一個數字: 1 / 2 i++ i -= 2 i * 2 字串表達式 計算為字串的表達式: 'A ' + 'string' 基本表達式 這個類別包括變數引用、字面量和常數: 2 0.02 'something' true false this // 當前物件 undefined i // i 為變數或常數 還有一些語言中的關鍵字: function class function* // 產生器函數 yield // 產生器暫停/恢復運行 yield* // 委派給另一個產生器或迭代器 async function* // 异步函數表達式 await // 異步函數暫停/恢復/等待完成 /pattern/i // 正則表達式 () // 分組 陣列和物件初始化表達式 [] // 陣列字面量 {} // 物件字面量 [1,2,3] {a: 1, b: 2} {a: {b: 1}} 邏輯表達式 邏輯表達式使用邏輯運算符並產生布林值:...

JavaScript 展開運算子

學習 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 迴圈

JavaScript 提供了許多迴圈的方法。本教程將解釋現代 JavaScript 中各種迴圈的可能性。 介紹 for forEach do...while while for...in for...of for...in vs for...of 介紹 JavaScript 提供了許多迴圈的方法。本教程將以一個小例子和主要屬性來解釋每一種方法。 for const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) { console.log(list[i]) // 值 console.log(i) // 索引 } 你可以使用 break 中斷一個 for 迴圈。 你可以使用 continue 快速跳到下一個迭代。 forEach 在 ES5 中引入了 forEach。給定一個陣列,你可以使用 list.forEach() 來迭代其屬性。 const list = ['a', 'b', 'c'] list.forEach((item, index) => { console.log(item) // 值 console.log(index) // 索引 }) // 索引是可選的 list....

JavaScript 動態匯入

了解 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 參考: Number

關於 JavaScript 中的 Number 屬性和方法的一切 本文介紹了如何使用內建的 Number 物件,並列出了它的屬性和方法。 可以使用數字字面值語法來生成 number 值: const age = 36 typeof age //number 或使用 Number 全域函式: const age = Number(36) typeof age //number 如果使用 new 關鍵字,則會返回一個 Number 物件: const age = new Number(36) typeof age //object 它與 number 類型具有非常不同的行為。您可以使用 valueOf() 方法獲取原始的 number 值: const age = new Number(36) typeof age //object age.valueOf() //36 屬性 EPSILON - 兩個數字之間的最小間隔 MAX_SAFE_INTEGER - JavaScript 可以表示的最大整數值 MAX_VALUE - JavaScript 可以表示的最大正數值 MIN_SAFE_INTEGER - JavaScript 可以表示的最小整數值 MIN_VALUE - JavaScript 可以表示的最小正數值 NaN - 表示 “不是數字” 的特殊值 NEGATIVE_INFINITY - 表示負無窮大的特殊值 POSITIVE_INFINITY - 表示正無窮大的特殊值 這些屬性的值如下所示:...

JavaScript 參考:String

了解 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 參考:物件

關於 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: () => { // 說話 } }) 這些方式基本上是等價的,因為它們都可以讓您訪問我下面將列出的方法。...

JavaScript 符號

一個易於理解 JavaScript 符號的教程 符號是 JavaScript 的原始資料類型之一,同樣還有 字符串、數字、布林值、空值和未定義值。 它在 ECMAScript 2015中被引入,所以只有幾年的歷史。 這是一種非常奇特的資料類型。一旦您創建了一個符號,它的值就會保持為私有且供內部使用。 創建後,只剩下符號參考。 通過調用Symbol()全局工廠函數來創建符號: const mySymbol = Symbol() 每次調用Symbol()我們都會獲得一個新的唯一符號,確保與其他所有符號不同: Symbol() === Symbol() //false 您可以向Symbol()傳遞一個參數,用作符號的描述,僅用於調試目的: console.log(Symbol()) //Symbol() console.log(Symbol('Some Test')) //Symbol(Some Test) 符號通常用於識別對象的屬性。 經常用於避免屬性之間的名稱衝突,因為沒有一個符號等於另一個符號。 或者用於添加不能被用戶有意或無意地覆蓋的屬性。 例如: const NAME = Symbol() const person = { [NAME]: 'Flavio' } person[NAME] //'Flavio' const RUN = Symbol() person[RUN] = () => 'Person is running' console.log(person[RUN]()) //'Person is running' 符號不會被枚舉,這意味著它們不會在運行在對象上的 for..of 或 for..in 循環中被包括。 符號不是 Object.keys() 或 Object.getOwnPropertyNames() 的一部分。...

JavaScript 循環與作用域

JavaScript 有一個特性可能會給開發者帶來一些困擾,那就是與循環和作用域相關的問題。 讓我們來看一個例子: const operations = [] for (var i = 0; i < 5; i++) { operations.push(() => { console.log(i) }) } for (const operation of operations) { operation() } 這段代碼遍歷了 5 次,每次將一個函數添加到名為 operations 的數組中。這個函數會將循環索引變量 i 輸出到控制台。 之後這些函數會被執行。 預期結果應該是: 0 1 2 3 4 但實際上卻是這樣的: 5 5 5 5 5 為什麼會這樣呢?這是因為使用了 var。 由於 var 声明是提升的,上面的代碼等價於: var i; const operations = [] for (i = 0; i < 5; i++) { operations....

JavaScript 程式語言介紹

JavaScript 是全球最受歡迎的程式語言之一,現在也廣泛應用於瀏覽器以外的領域。近年來,Node.js 的崛起使得後端開發不再只局限於 Java、Ruby、Python、PHP 等傳統的服務器端語言。現在就一起來了解 JavaScript 吧! 介紹 JavaScript 的基本定義 JavaScript 的版本 介紹 JavaScript 是全球最受歡迎的程式語言之一。 它於 1995 年創建,從其不起眼的開始發展了很長的路程。 作為唯一直接由瀏覽器本地支持的腳本語言,JavaScript 就一直廣泛使用下去。 在開始時,它並不像現在這樣功能強大,主要用於瀏覽器的動畫效果和當時被稱為 DHTML 的奇技淫巧。 隨著 Web 平台需求的不斷增長,JavaScript 不得不隨之發展,以滿足全球最廣泛使用的生態系統的需求。 平台引入了許多功能,瀏覽器 API 也有所增加,而程式語言本身也有了很大的發展。 如今,JavaScript 也廣泛應用於瀏覽器以外的領域。近年來,Node.js 的崛起使得後端開發也得以解鎖,不再只局限於 Java、Ruby、Python、PHP等傳統的服務器端語言。 現在 JavaScript 同時也是許多數據庫和其他應用程式的開發語言,甚至可以開發嵌入式應用程式、移動應用程式、電視應用程式等等。從最初只是瀏覽器中的一門小語言,JavaScript 現在成為了世界上最受歡迎的語言。 JavaScript 的基本定義 JavaScript 是一種具有以下特點的程式語言: 高級語言:它提供抽象層,讓你無需關心程式在運行時的細節。JavaScript 使用垃圾回收機制自動管理記憶體,讓你能夠專注於程式碼本身,而不是管理記憶體位置。它還提供了很多功能,可以處理強大的變數和物件。 動態語言:與靜態程式語言相對,動態語言在運行時執行許多靜態語言編譯時執行的操作。這帶來了一些優點和缺點,也為我們提供了一些強大的功能,比如動態類型、遲綁定、反射、函數式編程、對象的運行時修改、閉包等等。 動態類型:變數不強制要求指定類型。你可以重新將任何類型賦值給一個變數,例如將整數賦值給一個保存字符串的變數。 弱類型:與強類型相對,弱(或鬆散)類型的語言不強制物件類型,這樣更加靈活,但也失去了型別安全和型別檢查的優勢(這正是 TypeScript 和 Flow 試圖改進的地方)。 解釋型語言:它通常被稱為解釋型語言,這意味著在程式運行之前不需要編譯步驟,與 C、Java 或 Go 等語言相對。實際上,瀏覽器在執行 JavaScript 之前會對其進行編譯,以提高性能,但這對你來說是透明的,不需要額外的步驟。 多範式:語言不強制使用特定的編程範式,不像 Java 強制使用物件導向編程,或者 C 強制使用命令式編程。你可以用面向對象的模式編寫 JavaScript,使用原型和 ES6 引入的類語法。你可以使用函數式編程風格來編寫 JavaScript,利用其一級函數的特性,甚至可以使用命令式的編程風格(類似於 C)。 如果你在想,JavaScript 與 Java 沒有任何關聯,這只是個名字選擇上的失誤,但我們不得不接受這個事實。...