這個 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 可以自由使用嵌套函數將幫助函數隱藏在代碼的其餘部分中。...

運算子使您能夠獲取一個或多個簡單表達式，並將它們組合成更複雜的表達式。 運算子使您能夠獲取一個或多個簡單表達式，並將它們組合成更複雜的表達式。 根據它們操作的運算元，我們可以將運算子分類。 大多數運算子使用 2 個運算元： 加法 (+) 減法 (-) 除法 (/) 取餘數 (%) 乘法 (*) 指數 (**) 賦值 (=) 比較運算子 (<, <= 等) 等於檢查 (==, !== 等) 邏輯 and 和 or instanceof in 某些運算子使用 1 個運算元： 遞增 (++) 遞減 (--) 一元求反 (-) 一元求正 (+) 邏輯非 (!) new delete typeof await 展開運算子 只有一個運算子使用 3 個運算元：三元運算子。

學習 JavaScript 運算子的優先順序規則基礎知識 每個複雜的敘述都會引入優先順序的問題。 以這個為例： const a = 1 \* 2 + 5 / 2 % 2 結果為 2.5，但為什麼呢？哪個運算會先執行，哪個需要等待呢？ 某些運算符的優先順序高於其他的。以下是優先順序規則的列表： 運算符 描述 - + ++ -- 一元運算符，遞增和遞減 * / % 乘法/除法 + - 加法/減法 = += -= *= /= %= **= 賦值 同級別的運算（例如 + 和 -）按照它們出現的順序執行。 按照這個表格，我們可以解決這個計算： const a = 1 \* 2 + 5 / 2 % 2 const a = 2 + 5 / 2 % 2 const a = 2 + 2....

合併排序是一種使用「分治法」概念的排序算法。 給定一個數組，我們首先將其分為兩個數組。 然後我們遞歸執行此操作，直到獲得只有一個元素的數組。 然後，我們從頭開始構建有序數組，通過對獲得的個別元素進行排序。 假設我們的數組是： [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 語句的基礎知識 如果表達式是 JavaScript 中可以評估的單個單位，那麼語句可以包含一個或多個不同的表達式，並由引擎執行以執行操作。 程序由多個語句組成。語句可以跨越多行。 就像表達式一樣，JavaScript 有一整套不同的語句： 表達式語句 声明語句 控制流語句 循环語句 雜項語句 讓我們深入瞭解細節。 分隔語句 語句可以以可選的分號 ; 結束。使用分號，您可以在單個行中有多個語句。我通常不使用分號，但您可以在語句結束時使用。 表達式語句 單獨的表達式也是一個語句： 2 0.02 'something' true false this //當前作用域 undefined i //其中 i 是變量或常量 1 / 2 i++ i -= 2 i * 2 'A ' + 'string' [] //數組字面量 {} //對象字面量 [1,2,3] {a: 1, b: 2} {a: {b: 1}} a && b a || b !a object.property //引用對象的屬性（或方法） object[property] object['property'] new object() new a(1) new MyRectangle('name', 2, {a: 4}) function() {} function(a, b) { return a * b } (a, b) => a * b a => a * 2 () => { return 2 } a....

學習 JavaScript 中的遞迴基礎 函式可以自己呼叫自己。 這就是遞迴的意思，它能夠以一個整潔的方式解決問題。 要達到這一點，您需要一個命名的函式表達式，換句話說，就是這樣： function doSomething() { } 所以我們可以在 doSomething() 內部呼叫 doSomething()。 我們可以用計算數字的階乘來做最簡單的例子。這是我們通過將數字乘以 (數字 - 1)，(數字 - 2) 等等，直到達到數字 1 而得到的數字。 數字 4 的階乘是 (4 * (4 - 1) * (4 - 2) * (4 - 3)) = 4 * 3 * 2 * 1，等於 24。 我們可以創建一個遞迴函式來自動計算： function factorial(n) { return n >= 1 ? n \* factorial(n - 1) : 1 } factorial(1) //1 factorial(2) //2 factorial(3) //6 factorial(4) //24 我們也可以使用箭頭函式：...

在 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 的方法 調試是程序設計師必備的核心技能之一。 有時候即使我們盡了最大的努力，但程序還是不能正確運行，比如說它崩潰了、運行緩慢或打印了錯誤信息。 當你編寫的程序不能按照期望的方式運行時，你該怎麼辦呢？ 你需要開始調試。 找出問題可能出在哪裡 第一步總是觀察發生了什麼，並試圖確定問題的根源所在。這是環境問題？是你給程序提供的輸入有問題？它是由於內存使用過多而導致一次性崩潰？還是每次運行都出現這個問題？ 在確定問題出自何處之後，你可以開始檢查具體的代碼部分。 閱讀代碼 在調試方面，最簡單的方法之一就是閱讀你自己編寫的代碼。用聲音朗讀。我們自己的聲音有一種神奇的作用，但無法在靜音時產生。 很多時候我都是通過這種方式找出問題所在的。 使用控制台 如果閱讀代碼沒有給你任何提示，下一個合理的步驟就是在你的代碼中添加一些可以提供一些線索的行。 在 JavaScript 前端代碼中，你通常會使用 alert() 和 console.log （和它的其他應用）。 考慮以下代碼： const a = calculateA() const b = calculateB() const result = a + b 結果不正確計算，所以你可以在計算結果之前添加 alert(a) 和 alert(b)，當代碼執行時瀏覽器將彈出兩個警告窗口。 const a = calculateA() const b = calculateB() alert(a) alert(b) const result = a + b 如果傳給 alert() 的是一個字符串或一個數字，這樣操作是沒有問題的。但一旦涉及到數組或對象等較復雜的數據類型，使用 alert() 就會變得很困難了，這時候你需要使用控制台 API。我們可以先從 console.log() 開始： const a = calculateA() const b = calculateB() console....

了解 JavaScript 的基本賦值運算符。 使用賦值運算符 = 將一個值賦給變數： const a = 2 let b = 2 var c = 2 該運算符對於所有算術運算符都有多個快捷方式，它們使您能夠將第二個操作數的計算結果賦給第一個操作數。 它們分別是： +=：加法賦值運算符 -=：減法賦值運算符 *=：乘法賦值運算符 /=：除法賦值運算符 %=：求餘賦值運算符 **=：指數賦值運算符 舉例來說： let a = 0 a += 5 // a 等於 5 a -= 2 // a 等於 3 a *= 2 // a 等於 6 a /= 2 // a 等於 3 a %= 2 // a 等於 1 為了清楚起見，上面的操作是依次執行的，所以最終 a 的值為 1，而不是 0

JavaScript是一個令人驚嘆的語言！它最初只是一種在瀏覽器中操作文檔的簡單方式，多年來，它成為了全球最流行的編程語言，現在它在各個領域都有應用。通過遵循我的學習路線圖，來學習JavaScript編程語言吧！ JavaScript是一個令人驚嘆的語言！ 它最初只是一種在瀏覽器中操作文檔的簡單方式，多年來，它成為了全球最流行的編程語言，現在它在各個領域都有應用。 這裡是學習JavaScript的一個路線圖的初步嘗試。 注：我將所有內容都放在一個方便的PDF / ePub中，現在就立即下載吧！ 初學者指南 首先，深入研究語言的介紹指南，並了解語言的“最新和最大”的新增功能。在過去的3年中，我們所有人使用語言的方式都發生了很大變化，所以學習“舊方法”已經沒有意義了。 JavaScript介紹 ECMAScript 2015-2017 指南 JavaScript詞彙表 現代JavaScript語法快速參考 語言基礎 接下來，我們將深入研究JavaScript的基石。 JavaScript詞彙結構 JavaScript表達式 JavaScript類型 JavaScript變量 JavaScript數學運算符 JavaScript函數 JavaScript立即調用的函數表達式（IIFE） this關鍵字 JavaScript箭頭函數 JavaScript循環 JavaScript循環和作用域 JavaScript數組 JavaScript模板字面量 JavaScript分號 嚴格模式 JavaScript內置對象 JavaScript日期 Math對象 異步編程 JavaScript在異步編程方面非常強大。了解所有基礎知識！ 異步編程和回調函數 JavaScript定時器 JavaScript Promises Async和Await 事件 JavaScript事件循環 JavaScript事件 高級主題 在學習新知識之前，先了解一些更高級的主題。 JavaScript函數式編程 使用defer和async高效加載JavaScript CORS JavaScript閉包 JavaScript正則表達式 JavaScript中的Unicode 數據結構 JavaScript映射數據結構 JavaScript集合數據結構 網絡平台 Cookie，localStorage，History API，Fetch，Cache，Service Workers，所有的這些都可以在網絡平台API指南中找到解釋。其中包含了很多內容！ 如何做 以下是一些小技巧，可以幫助你處理一些JavaScript任務，同時更好地理解JavaScript能做什么以及它的工作原理。 JavaScript中生成隨機且唯一字符串 如何檢查JavaScript對象 如何去掉數字開頭的零 如何替換所有出現的字符串 如何檢查對象屬性是否為undefined 如何向數組添加項目 如何從對象中刪除屬性 如何獲取當前時間戳 如何將字符串轉換為數字 如何將數字格式化為貨幣 如何將字符串的第一個字母大寫 如何深度克隆對象 如何從數組中刪除項目 如何檢查字符串是否包含子字符串 下一步是什么？ 如果你準備好進一步深入研究了，可以查看React和使用Node....