JavaScript

在 ES2015（也稱為 ES6）中引入的樣板文字提供了一種新的聲明字符串的方式，同時還提供了一些新的有趣的構造方法，並且已經被廣泛地使用。 樣板文字介紹 多行字符串 插值 樣板標籤 樣板文字介紹 樣板文字是 ES2015 / ES6 中的一個新功能，與 ES5 及其以下版本相比，它以一種新穎的方式處理字符串。 從外觀上看，語法非常簡單，只需使用反引號（`）而不是單引號或雙引號即可： const a_string = `something` 它們之所以獨一無二，是因為它們提供了很多普通字符串所不具備的功能，尤其是： 它們提供了一種很好的語法來定義多行字符串 它們提供了一種簡單的方式將變量和表達式插入字符串中 它們允許您使用樣板標籤創建特定領域的語言（DSL，即“domain specific language”），例如 React 中的 Styled Components 用於為組件定義 CSS 讓我們逐一詳細介紹這些功能。 多行字符串 在 ES6 之前，要創建跨兩行的字符串，您必須在行末使用反斜線字符（\）： const string = 'first part \ second part' 這允許在兩行上創建字符串，但實際呈現在只有一行上： first part second part 要將字符串呈現為多行，您需要在每行末尾明確添加 \n，如下所示： const string = 'first line\n \ second line' 或者 const string = 'first line\n' + 'second line' 樣板文字使多行字符串變得更簡單。...

JavaScript 中 filter() 函式的詳細資訊 filter() 是陣列中非常重要的一個方法。 以下是一個例子，它遍歷陣列 a，並根據每個 a 元素在執行函式 f() 時返回的 true 值，構建一個新的陣列 b。 const b = a.filter(f) 使用 filter() 的一個好例子是當你想從陣列中刪除一個項目時： const items = ['a', 'b', 'c', 'd', 'e', 'f'] const valueToRemove = 'c' const filteredItems = items.filter(item => item !== valueToRemove) // ["a", "b", "d", "e", "f"] 下面是如何同時刪除多個項目的方法： const items = ['a', 'b', 'c', 'd', 'e', 'f'] const valuesToRemove = ['c', 'd'] const filteredItems = items.filter(item => !valuesToRemove.includes(item)) // ["a", "b", "e", "f"]

JavaScript 中 reduce() 函式的詳細說明 reduce() 是陣列中另一個重要的方法。 reduce() 在陣列的每個項目上執行回呼函式，並允許逐步計算結果。如果指定了 initialValue，那麼在第一次迭代中，accumulator 將等於該值。 a.reduce((accumulator, currentValue, currentIndex, array) => { //... }, initialValue) 範例： [1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { return accumulator * currentValue }, 1) // 迭代 1：1 * 1 => 回傳 1 // 迭代 2：1 * 2 => 回傳 2 // 迭代 3：2 * 3 => 回傳 6 // 迭代 4：6 * 4 => 回傳 24 // 回傳值為 24

介紹如何在 JavaScript 中使用私有類別欄位的程式碼範例。 在引入私有類別欄位之前，我們無法真正強制將屬性設為私有。我們只能使用慣例，例如使用 _ 作為提示該欄位為私有的方式，就像這樣： class Counter { _count = 0; increment() { this._count++; } } 但我們仍然可以通過以下方式存取此計數器： const counter = new Counter(); counter._count; 現在，我們可以使用私有類別欄位來強制將欄位設為私有： class Counter { #count = 0; increment() { this.#count++; } } 現在，我們無法從外部存取這個值。嘗試存取將引發語法錯誤。 這是新的類別欄位提案的一部分，你可以在 Chrome 72 和 Node 12 中使用它。

這個 JavaScript 程式碼風格是我在使用 JavaScript 時每天都遵循的一套規範。這是一份不斷更新的文件，我遵循的主要規則。 每種語言都有一套語法規則。 剛開始時，有些人可能會按照不破壞語言規則的方式將代碼添加到文件中，但卻不關心和注意編程風格。 這並不是因為他們不關心風格，而是因為他們還沒有足夠的經驗來認識其重要性。 我真的相信編程是一門藝術。就像繪畫、木工或任何涉及創造力的事情一樣，我們的程序可以做很多事情，但它們應該以一種有風格的方式進行。 我們有一些適用於所有編程語言的規則。 編程風格是與您自己和團隊達成的一種共識，以保持項目的一致性。 如果您沒有團隊，則這是一份與自己的共識，始終保持您的代碼達到您的標準。 在代碼編寫格式上設定固定規則有助於使代碼更易讀且易於管理。 常用的風格指南 這裡有幾個常用的風格指南，以下是 JavaScript 領域中最常見的兩個： Google JavaScript Style Guide AirBnb JavaScript Style Guide 您可以選擇遵循其中之一，或者創建自己的風格指南。 始終與您所工作的項目保持一致 即使您偏好一套風格，但在項目中工作時，應該使用該項目的風格。 GitHub 上的開源項目可能遵循一套規則，您在團隊中的另一個項目可能遵循完全不同的規則。 Prettier 是一個很棒的工具，可以強制執行代碼格式，請使用它。 我的個人偏好 我對 JavaScript 風格的看法是： 始終使用最新的 ES 版本。如果需要支持舊瀏覽器，使用 Babel。 縮進：使用空格而不是制表符，縮進使用 2 個空格。 分號：不使用分號。 行長：盡量將行長限制在 80 個字符，如果可能的話。 行內注釋：在代碼中使用行內注釋。僅使用塊注釋進行文檔化。 無用代碼：不要註釋掉舊代碼，以防萬一將來會用到。僅保留您現在需要的代碼，版本控制/您的筆記應用程序是為此而設的。 僅在需要時進行注釋：不要添加不幫助理解代碼的注釋。如果代碼通過良好的變量和函數命名以及 JSDoc 函數注釋能夠自我解釋，則不需要添加注釋。 變量聲明：始終聲明變量以避免污染全局對象。不要使用 var。默認使用 const，僅在需要重新賦值變量時使用 let。 函數：除非有特殊原因需要使用常規函數（例如對象方法或構造函數），否則使用箭頭函數。將它們聲明為 const，如果可能的話使用隱式返回。 const test = (a, b) => a + b const another = a => a + 2 可以自由使用嵌套函數將幫助函數隱藏在代碼的其餘部分中。...

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 沒有任何關聯，這只是個名字選擇上的失誤，但我們不得不接受這個事實。...

JavaScript中一個強大的運算子是 空值合併 運算子: ??。 您是否曾經使用 || 來在變數為空或未定義時設置默認值？ 例如，像這樣： const myColor = color || 'red' 而現在，空值合併將取代其中的 ||： const myColor = color ?? 'red' 這個運算子有什麼用處呢？ 當使用 || 提供回退值時，實際上存在著一系列隱藏的錯誤。 簡單來說，|| 將值處理為假值，而 ?? 則將值處理為空值（因此得名）。 這意味著使用 ||，如果第一個操作數為 undefined、null、false、0、NaN 或 ''，則會對第二個操作數進行評估。 而??則只將此列表限制為undefined和 null。

一個易於理解 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() 的一部分。...

合併排序是一種使用「分治法」概念的排序算法。 給定一個數組，我們首先將其分為兩個數組。 然後我們遞歸執行此操作，直到獲得只有一個元素的數組。 然後，我們從頭開始構建有序數組，通過對獲得的個別元素進行排序。 假設我們的數組是： [4, 3, 1, 2] 我們首先將數組分成兩個： [4, 3] [1, 2] 然後我們遞歸地分割這些數組： [4] [3] 和 [1] [2] 然後，通過首先對這些元素對進行排序，我們開始構建結果： [3, 4] [1, 2] 然後我們將這兩個數組合併： [1, 2, 3, 4] 讓我們再舉一個具有更多項的數組的例子，這次使用字母： ['e', 'g', 'a', 'd', 'f', 'c', 'b'] 我們將數組分成兩部分： ['e', 'g', 'a'] ['d', 'f', 'c', 'b'] 然後我們將第一個數組再分成兩部分： ['e'] ['g', 'a'] 然後分割第二個結果： ['g'] ['a'] 我們現在取原始數組的第二部分，再分成兩個： ['d', 'f'] ['c', 'b'] 我們分割兩個項目： ['d'] ['f'] ['c'] ['b'] 現在，我們有一系列只有一個元素的數組： ['e'] ['g'] ['a'] ['d'] ['f'] ['c'] ['b'] 現在，我們將它們按成對排序：...

表達式是可以被評估並解析為值的代碼單位。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}} 邏輯表達式 邏輯表達式使用邏輯運算符並產生布林值：...