每位 JavaScript 開發者應理解的 33 個概念

簡介

這個專案是為了幫助開發者掌握 JavaScript 概念而建立的。它不是必備，但在未來學習 JavaScript 的過程中，可以作為一篇指南。本篇文章是基於 Stephen Curtis 的文章寫成，你可以從這裡閱讀。

原文地址: https://github.com/leonardomso/33-js-concepts

目錄

1. Call Stack
2. 原始型別 (Primitive Types)
3. 值類型和引用類型
4. 隱式, 顯式, 名義和鴨子類型
5. == 與 ===, typeof 與 instanceof
6. this, call, apply 和 bind
7. 函數作用域, 塊級作用域和詞法作用域
8. 閉包
9. map, reduce, filter 等高階函數
10. 表達式和語句
11. 變量提升
12. Promise
13. 立即執行函數, 模塊化, 命名空間
14. 遞歸
15. 算法
16. 數據結構
17. 消息隊列和事件循環
18. setTimeout, setInterval 和 requestAnimationFrame
19. 繼承, 多態和代碼復用
20. 按位操作符, 類數組對像和類型化數組
21. DOM 樹和渲染過程
22. new 與構造函數, instanceof 與實例
23. 原型繼承與原型鏈
24. Object.create 和 Object.assign
25. 工廠函數和類
26. 設計模式
27. Memoization
28. 純函數, 函數副作用和狀態變化
29. 耗性能操作和時間複雜度
30. JavaScript 引擎
31. 二進制, 十進制, 十六進制, 科學記數法
32. 偏函數, 柯裡化, Compose 和 Pipe
33. 代碼整潔之道

1. Call Stack

相關文章

• 📜 Call Stack — MDN
• 📜 [譯] JavaScript 如何工作：對引擎、運行時、調用堆棧的概述 —— 掘金
• 📜 [譯] 理解 JavaScript 中的執行上下文和執行棧 —— 掘金
• 📜 這一次，徹底弄懂 JavaScript 執行機制 —— 掘金
• 📜 解讀 JavaScript 之引擎、運行時和堆棧調用 —— 開源中國
• 📜 Tasks, microtasks, queues and schedules —— Jake Archibald

相關影片

• 🎥 What is the event loop anyway? —— 騰訊視頻(英文字幕)
• 🎥 Understanding The JavaScript Call Stack, Event Queue, Event Table, & Event Loop —— Bilibili
• 🎥 JS 中的變量提升、堆棧內存及閉包詳解 —— Acfun
• 🎥 事件循環模型 —— PHP 中文網

⬆ 返回目錄

2. 原始型別 (Primitive Types)

相關文章

• 📜 原始數據 —— MDN
• 📜 ECMAScript 原始類型 —— W3school
• 📜 How numbers are encoded in JavaScript —— Dr. Axe
• 📜 每一個 JavaScript 開發者應該瞭解的浮點知識 —— 顏海鏡
• 📜 JavaScript 標準參考教程(基本語法之數值) —— 阮一峰
• 📜 The Secret Life of JavaScript Primitives —— Angus Croll

相關影片

• 🎥 javascript 六種數據類型 —— 慕課網
• 🎥 javascript 視頻教程(數據類型) —— PHP 中文網

⬆ 返回目錄

3. 值類型和引用類型

相關文章

• 📜 ECMAScript 引用類型 —— W3school
• 📜 js 中的值類型和引用類型的區別 —— 博客園
• 📜 JavaScript 的值傳遞和引用傳遞 —— FunDebug
• 📜 Primitive Types & Reference Types in JavaScript —— Bran van der Meer
• 📜 JavaScript: Passing by Value or by Reference —— CSDN
• 📜 js 值引用和值複製 —— SegmentFault
• 📜 js- 引用和複製(傳值和傳址) —— CSDN

⬆ 返回目錄

4. 隱式, 顯式, 名義和鴨子類型

相關文章

• 📜 ECMAScript 類型轉換 —— W3school
• 📜 JavaScript 的怪癖 1：隱式類型轉換 —— justjavac
• 📜 JavaScript 運算符規則與隱式類型轉換詳解 —— 掘金
• 📜 聊一聊 JS 中的隱式類型轉換 —— SegmentFault
• 📜 有趣的 JavaScript 隱式類型轉換 —— 博客園
• 📜 JavaScript 顯式類型轉換與隱式類型轉換 —— CSDN
• 📜 你不知道的 JavaScript（中卷）強制類型轉換 —— 簡書
• 📜 你懂 JavaScript 嗎？#8 強制轉型 —— cythilya
• 📜 動態類型語言和鴨子類型 —— 曾探
• 📜 Nominal & Structural Typing —— flow
• 📜 What exactly is Type Coercion in Javascript? —— stackoverflow
• 📜 You Don’t Know JS: Types & Grammar —— github

相關影片

• 🎥 javascript 隱式轉換 —— 慕課網
• 🎥 Javascript 基礎加強-類型轉換 —— 黑馬程序員

⬆ 返回目錄

5. == vs ===, typeof vs instanceof

相關文章

• 📜 JavaScript 中的相等性判斷 —— MDN
• 📜 js 中 == 和 === 的區別 —— 掘金
• 📜 == vs === in Javascript —— CSDN
• 📜 深入理解 javascript 之 typeof 和 instanceof —— CSDN
• 📜 JavaScript 的 typeof 的用途 —— justjavac
• 📜 一張圖看懂 Function 和 Object 的關係及簡述 instanceof 運算符 —— 掘金
• 📜 淺談 instanceof 和 typeof 的實現原理 —— 掘金
• 📜 js 中 typeof 與 instanceof 用法 —— 博客園

⬆ 返回目錄

6. this, call, apply 和 bind

相關文章

• 📜 Javascript 的 this 用法 —— 阮一峰
• 📜 學會 JS 的 this 這一篇就夠了，根本不用記 —— 簡書
• 📜 [譯] this（他喵的）到底是什麼 — 理解 JavaScript 中的 this、call、apply 和 bind —— 掘金
• 📜 this、apply、call、bind —— 掘金
• 📜 使用 call、apply 和 bind 解決 js 中煩人的 this，事件綁定時的 this 和傳參問題 —— 博客園
• 📜 call、apply 和 bind 的原生實現 —— github
• 📜 詳解 JS 中的 this、apply、call、bind(經典面試題) —— 腳本之家

相關影片

• 🎥 JavaScript 關於 this 關鍵字解釋 —— 愛奇藝
• 🎥 JS 關於作用域閉包和 this 的綜合面試題 —— 百度視頻
• 🎥 js 面向對像閉包數組 12.函數中的 this —— 樂視視頻
• 🎥 1.3.10-this 指向及 this 應用 —— 樂視視頻
• 🎥 珠峰培訓 JavaScript 開發課程：關於 this 關鍵字、閉包作用域 —— 網易雲課堂

⬆ 返回目錄

7. 函數作用域, 塊級作用域和詞法作用域

相關文章

• 📜 變量作用域與解構賦值 —— 廖雪峰
• 📜 學習 Javascript 閉包（Closure） —— 阮一峰
• 📜 JavaScript 中詞法作用域、閉包與跳出閉包 —— SegmentFault
• 📜 JavaScript 深入之詞法作用域和動態作用域 —— 掘金
• 📜 深入理解閉包之前置知識 → 作用域與詞法作用域 —— 掘金
• 📜 What is lexical scope? —— stackoverflow
• 📜 You Don’t Know JS: Scope & Closures —— Kyle Simpson

⬆ 返回目錄

8. 閉包

相關文章

• 📜 閉包 —— MDN
• 📜 ECMAScript 閉包（closure）—— w3school
• 📜 學習 Javascript 閉包（Closure） —— 阮一峰
• 📜 閉包 —— 廖雪峰
• 📜 一次性搞懂 JavaScript 閉包 —— 簡書
• 📜 JavaScript 閉包 —— SegmentFault
• 📜 js 匿名自執行函數中閉包的高級使用 —— 掘金
• 📜 高效使用 JavaScript 閉包 —— 掘金

相關影片

• 🎥 JavaScript 閉包和閉包面試題 —— 愛奇藝
• 🎥 js 面向對像閉包數組 11.閉包 —— 樂視
• 🎥 白賀翔_函數(閉包) —— 樂視

⬆ 返回目錄

9. map, reduce, filter 等高階函數

相關文章

• 📜 高階函數 —— 廖雪峰
• 📜 ES5 中新增的 Array 方法詳細說明 —— 張鑫旭
• 📜 一張圖看懂 JavaScript 中數組的迭代方法：forEach、map、filter、reduce、every、some —— 掘金
• 📜 Transducing（上）－《JavaScript 輕量級函數式編程》 —— SegmentFault

⬆ 返回目錄

10. 表達式和語句

相關文章

• 📜 js 表達式與語句 —— 博客園
• 📜 JS 表達式和語句的區別 —— SegmentFault
• 📜 JavaScript 中的表達式（expression）和語句/聲明（statement） —— CSDN
• 📜 重讀 Axel 的 Javascript 中的 Expression vs Statement 一文 —— SegmentFault
• 📜 Expressions versus statements in JavaScript —— Dr. Axel

⬆ 返回目錄

11. 變量提升

相關文章

• 📜 JavaScript 變量提升 —— 菜鳥教程
• 📜 ES6 變量作用域與提升：變量的生命週期詳解 —— 掘金
• 📜 [翻譯] JavaScript Scoping and Hoisting —— SegmentFault
• 📜 JavaScript Scoping and Hoisting —— Ben Cherry

⬆ 返回目錄

12. Promise

相關文章

• 📜 使用 promises —— MDN
• 📜 Promise —— MDN
• 📜 Promie — 廖雪峰
• 📜 JavaScript Promise：去而復返 —— 司徒正美
• 📜 (上面的原文)JavaScript Promise：簡介 —— Web Fundamentals
• 📜 1 分鐘讀完《10 分鐘學會 JavaScript 的 Async/Await》 —— justjavac
• 📜 JavaScript Promise 迷你書（中文版）
• 📜 JavaScript 進階之路——認識和使用 Promise，重構你的 Js 代碼 —— 博客園

相關影片

• 🎥 Promise 入門 —— 慕課網

⬆ 返回目錄

13. 立即執行函數, 模塊化, 命名空間

相關文章

• 📜 Javascript 模塊化編程（一）：模塊的寫法 —— 阮一峰
• 📜 javascript 模塊化編程-詳解立即執行函數表達式 —— 簡書
• 📜 Javascript 的匿名函數與自執行 —— 掘金
• 📜 前端模塊化——技術選型 —— SegmentFault
• 📜 談談 Js 前端模塊化規範 —— SegmentFault

⬆ 返回目錄

14. 遞歸

相關文章

• 📜 求解釋 js 遞歸 —— SegmentFault
• 📜 JavaScript 中的遞歸 —— 掘金
• 📜 遞歸（上）－《JavaScript 輕量級函數式編程》 —— 掘金
• 📜 遞歸（下）－《JavaScript 輕量級函數式編程》 —— 掘金
• 📜 尾調用和尾遞歸 —— 掘金
• 📜 幾個經典遞歸問題用 js 實現 —— CSDN
• 📜 遞歸函數的幾個例子 —— CSDN

⬆ 返回目錄

15. 算法

相關文章

• 📜 十大經典排序算法總結（JavaScript 描述） —— 掘金
• 📜 在 JavaScript 中學習數據結構與算法 —— 掘金
• 📜 JS 中可能用得到的全部的排序算法 —— 掘金
• 📜 JS 家的排序算法 —— 簡書
• 📜 前端常見算法的 JS 實現 —— SegmentFault
• 📜 前端面試中的常見的算法問題 ——蒲小花的博客

相關影片

• 🎥 Javascript 實現二叉樹算法 —— 慕課網

⬆ 返回目錄

16. 數據結構

相關文章

• 📜 來我們淺談一下 js 的數據結構 —— 簡書
• 📜 JavaScript 中的算法與數據結構 —— 簡書
• 📜 學 JS 必看-JavaScript 數據結構深度剖析 —— 大道至簡的博客
• 📜 js 中基礎數據結構數組去重問題 —— 掘金

相關影片

• 🎥 🎥 JavaScript 數據結構-運算符 —— 樂視

⬆ 返回目錄

17. 消息隊列和事件循環

相關文章

• 📜 並發模型與事件循環 —— MDN
• 📜 JavaScript 運行機制詳解：再談 Event Loop —— 阮一峰
• 📜 深入理解 JavaScript 事件循環 —— 博客園
• 📜 深入淺出 Javascript 事件循環機制 —— 知乎
• 📜 JS 事件循環機制（event loop）之宏任務、微任務 —— SegmentFault
• 📜 JavaScript：徹底理解同步、異步和事件循環 —— SegmentFault

⬆ 返回目錄

18. setTimeout, setInterval 和 requestAnimationFrame

相關文章

• 📜 Window setTimeout() 方法 —— 菜鳥教程
• 📜 Window setInterval() 方法 —— 菜鳥教程
• 📜 關於 setTimeout —— 掘金
• 📜 你不知道的 Javascript：有趣的 setTimeout —— 掘金
• 📜 原來你是這樣的 setTimeout —— 掘金
• 📜 setTimeout() 和 setInterval() 本質區別在哪裡？ —— SegmentFault
• book: window.requestAnimationFrame —— MDN
• 📜 requestAnimationFrame 知多少？ —— 博客園
• 📜 CSS3 動畫那麼強，requestAnimationFrame 還有毛線用？ —— 張鑫旭
• 📜 「JavaScript 定時器」setInterval、setTimeout 和 requestAnimationFrame 淺析 —— SegmentFault
• 📜 翻譯：setInterval 與 requestAnimationFrame 的時間間隔測試 —— SegmentFault
• 📜 阿里前端面試題：requestAnimationFrame 實現類似 setInterval 的計時器 —— SegmentFault

相關影片

• 🎥 setTimeout 和 setInterval —— 優酷

⬆ 返回目錄

19. 繼承, 多態和代碼復用

相關文章

• 📜 JS 面向對像編程之：封裝、繼承、多態 —— 博客園
• 📜 Javascript 的繼承與多態 —— 簡書
• 📜 js:面向對像編程，帶你認識封裝、繼承和多態 —— 掘金
• 📜 JavaScript 中的「多繼承」 —— 掘金
• 📜 代碼復用模式 —— github
• 📜 深入理解 JavaScript：代碼復用模式(推薦篇) —— 湯姆大叔
• 📜 深入理解 JavaScript：代碼復用模式(避免篇) —— 湯姆大叔

⬆ 返回目錄

20. 按位操作符, 類數組對像和類型化數組

相關文章

• 📜 按位操作符 —— MDN
• 📜 類數組對像 —— MDN
• 📜 類型化數組 —— MDN
• 📜 JavaScript ArrayBuffer 淺析 —— 博客園

⬆ 返回目錄

21. DOM 樹和渲染過程

相關文章

• 📜 如何創建一個 DOM 樹 —— MDN
• 📜 HTML DOM 節點 —— W3school
• 📜 DOM 概述 —— 阮一峰
• 📜 《JavaScript 闖關記》之 DOM（上）—— 掘金
• 📜 《JavaScript 闖關記》之 DOM（下）—— 掘金
• 📜 掌握 DOM 操作 —— 掘金
• 📜 操作 DOM —— 廖雪峰
• 📜 原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的 —— 掘金

相關影片

• 🎥 DOM 探索之基礎詳解篇 —— 慕課網
• 🎥 DOM 事件探秘 —— 慕課網
• 🎥 jQuery 基礎(二)DOM 篇 —— 慕課網
• 🎥 JS 操作 DOM 對像屬性和方法 —— 愛奇藝

⬆ 返回目錄

22. new 與構造函數, instanceof 與實例

相關文章

• 📜 構造函數與 new 命令 —— 阮一峰
• 📜 Javascript 面向對像編程（二）：構造函數的繼承 —— 阮一峰
• 📜 完整原型鏈詳細圖解(構造函數、原型、實例化對像) —— CSDN
• 📜 JavaScript 中構造函數與 new 操作符的實例詳解 —— PHP 中文網
• 📜 構造函數、實例、原型、原型鏈之間的關係 —— CSDN
• 📜 深入理解 JS—instanceof 和原型鏈 —— CSDN
• 📜 前端基礎進階（九）：詳解面向對像、構造函數、原型與原型鏈 —— 簡書
• 📜 js 用 new 實例化對象與直接調用的 this 的區別 —— 簡書
• 📜 JavaScript 並非所有的東西都是對像 —— justjavac
• 📜 JavaScript instanceof 運算符深入剖析 —— IBM

相關影片

• 🎥 改良版的構造函數 —— 樂視

⬆ 返回目錄

23. 原型繼承與原型鏈

相關文章

• 📜 繼承與原型鏈 —— MDN
• 📜 構造函數、原型與原型鏈 —— github
• 📜 原型及原型鏈 —— github(1269 Star)
• 📜 理清 javascript 中的面向對像(一) 原型繼承 —— SegmentFault
• 📜 JavaScript：繼承和原型鏈(譯) —— justjavac
• 📜 三張圖搞懂 JavaScript 的原型對象與原型鏈 —— 博客園
• 📜 一張圖讓你搞懂 JavaScript 的繼承與原型鏈 —— CSDN
• 📜 JS 高級–原型鏈(一看就懂，但 18 歲以下請繞道) —— CSDN
• 📜 原型繼承 —— 廖雪峰
• 📜 JS 原型鏈與繼承別再被問倒了 —— 掘金
• 📜 征服 JavaScript 面試系列：類繼承和原型繼承的區別 —— 掘金

相關影片

• 🎥 JS 高級-07-原型鏈繼承 —— 樂視
• 🎥 JS 原型對像和原型鏈簡介 —— 騰訊視頻

⬆ 返回目錄

24. Object.create 和 Object.assign

相關文章

• 📜 Object.create —— MDN
• 📜 Object.assign —— MDN
• 📜 Object.create vs Object.assign —— 慕課網手記
• 📜 JS 中的 Object.assign()、Object.create()、Object.defineProperty() —— CSDN
• 📜 es6 中 object.create()和 object.assign() —— 風信子博客
• 📜 Object-Assign-Deep —— github

⬆ 返回目錄

25. 工廠函數和類

相關文章

• 📜 類 —— MDN
• 📜 類和實例 —— 廖雪峰
• 📜 Javascript 定義類（class）的三種方法 —— 阮一峰
• 📜 【譯】ES6 的工廠函數 —— 掘金
• 📜 JavaScript 創建對像之單例、工廠、構造函數模式 —— 掘金

⬆ 返回目錄

26. 設計模式

相關文章

• 📜 設計模式 —— 阮一峰
• 📜 JavaScript 設計模式 —— 掘金
• 📜 學用 JavaScript 設計模式 —— 極客學院
• 📜 [面試專題]JS 設計模式 —— SegmentFault
• 📜 JavaScript Patterns 中譯本 —— github

相關影片

• 🎥 HTML5 課程大綱 2-11JS 設計模式

⬆ 返回目錄

27. Memoization

相關文章

• 📜 JavaScript Memoization —— 司徒正美
• 📜 memoization 提升遞歸效率 —— 博客園
• 📜 如何提升 JavaScript 的遞歸效率 —— 51CTO
• 📜 JavaScript 高級技巧 Memoization —— SegmentFaut

⬆ 返回目錄

28. 純函數, 函數副作用和狀態變化

相關文章

• 📜 純函數(Pure Function) —— React.js 小書
• 📜 JavaScript Functional Programming：純函數 —— 寧皓網
• 📜 js 函數的副作用分析 —— 腳本之家
• 📜 如何使用純函數式 JavaScript 處理髒副作用 —— 掘金
• 📜 原生 JavaScript 實現 state 狀態管理系統 —— 博客園

⬆ 返回目錄

29. 耗性能操作和時間複雜度

相關文章

• 📜 時間複雜度 O(log n) 意味著什麼？ —— 掘金
• 📜 算法的時間複雜度和空間複雜度 —— 掘金
• 📜 算法（一）時間複雜度 —— 掘金
• 📜 Big O Search Algorithms in JavaScript —— Bradley Braithwaite
• 📜 Time Complexity Analysis in JavaScript — Jennifer Bland

⬆ 返回目錄

30. JavaScript 引擎

相關文章

• 📜 javascript 引擎 —— 百度百科
• 📜 V8(JavaScript 引擎) —— 百度百科
• 📜 圖解搞懂 JavaScript 引擎 Event Loop —— 掘金3
• 📜 V8 JavaScript 引擎：高性能的 ES2015+ —— justjavac
• 📜 10 分鐘理解 JS 引擎的執行機制 —— SegmentFaut
• 📜 V8 javascript 引擎 —— 博客園

⬆ 返回目錄

31. 二進制, 十六進制, 十進制, 科學記數法

相關文章

• 📜 二、八、十、十六進制轉換(圖解篇) —— 博客園
• 📜 JavaScript 讀寫二進制數據 —— 掘金

相關影片

• 🎥 二進制、十進制、十六進制互相轉化很難嗎？ —— 百度視頻

⬆ 返回目錄

32. 偏函數, 柯裡化, Compose 和 Pipe

相關文章.

• 📜 Javascript 函數式編程之偏函數 —— CSDN
• 📜 JavaScript 專題之偏函數 —— SegmentFault
• 📜 柯裡化和偏函數有什麼區別？ —— SegmentFault
• 📜 Javascript 偏函數與柯裡化 —— CSDN
• 📜 柯裡化(curry) —— JS 函數式編程指南
• 📜 代碼組合(compose) —— JS 函數式編程指南
• 📜 關於 javascript 函數式編程中 compose 的實現 —— SegmentFault
• 📜 實現 compose 的五種思路 —— SegmentFault
• 📜 JavaScript 函數式編程之函數組合函數 compose 和 pipe 的實現 —— SegmentFault
• 📜 JavaScript 輕量級函數式編程-第 4 章:組合函數 ——掘金

⬆ 返回目錄

33. 代碼整潔之道

相關文章

• 📜 [譯] JavaScript 代碼整潔之道 —— 邊城
• 📜 Javascript 編程風格 —— 阮一峰
• 📜 重構 - 代碼整潔之道 —— 掘金
• 📜 讓你的代碼更簡短，更整潔，更易讀的 ES6 小技巧 —— 掘金
• 📜 Web 前端：11 個讓你代碼整潔的原則 —— 伯樂在線

⬆ 返回目錄