簡(jiǎn)介

這個(gè)項(xiàng)目是為了幫助開(kāi)發(fā)者掌握 JavaScript 概念而創(chuàng)立的。它不是必備，但在未來(lái)學(xué)習(xí)（JavaScript）中，可以作為一篇指南。

本篇文章是參照 @leonardomso 創(chuàng)立，英文版項(xiàng)目地址在這里。 由于原版資源都要翻墻，所以本人創(chuàng)立一個(gè)中文版，附上關(guān)于這些概念在國(guó)內(nèi)的一些文章和視頻。 若有覺(jué)得更好的文章或者視頻，可以貢獻(xiàn)出來(lái)，覺(jué)得有誤的，請(qǐng)聯(lián)系我刪除。

若有覺(jué)得更好的文章或者視頻，可以貢獻(xiàn)出來(lái)，覺(jué)得有誤的，請(qǐng)聯(lián)系我刪除。

• 文章的排序優(yōu)化，前面的文章是介紹概念，后面的文章是深入解讀。
• 將原文的 "高階函數(shù)" 和 "map, reduce, filter" 合并為 "map, reduce, filter 等高階函數(shù)"
• 增加 "promise" 概念(替換刪除的 "高階函數(shù)")

1. 調(diào)用堆棧

文章

• Call Stack — MDN
• [譯] JavaScript 如何工作：對(duì)引擎、運(yùn)行時(shí)、調(diào)用堆棧的概述
• [譯]理解 JavaScript 中的執(zhí)行上下文和執(zhí)行棧
• 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制
• 解讀 JavaScript 之引擎、運(yùn)行時(shí)和堆棧調(diào)用 —— 開(kāi)源中國(guó)
• 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 中的變量提升、堆棧內(nèi)存及閉包詳解 —— Acfun
• 事件循環(huán)模型 —— PHP 中文網(wǎng)

2. 原始類(lèi)型

文章

• 原始數(shù)據(jù) —— MDN
• ECMAScript 原始類(lèi)型 —— W3school
• How numbers are encoded in JavaScript —— Dr. Axe
• 每一個(gè) JavaScript 開(kāi)發(fā)者應(yīng)該了解的浮點(diǎn)知識(shí) —— 顏海鏡
• JavaScript 標(biāo)準(zhǔn)參考教程(基本語(yǔ)法之?dāng)?shù)值) —— 阮一峰
• The Secret Life of JavaScript Primitives —— Angus Croll

視頻

• javascript 六種數(shù)據(jù)類(lèi)型
• javascript 視頻教程(數(shù)據(jù)類(lèi)型) —— PHP 中文網(wǎng)

3. 值類(lèi)型和引用類(lèi)型

文章

• ECMAScript 引用類(lèi)型 —— W3school
• js 中的值類(lèi)型和引用類(lèi)型的區(qū)別
• JavaScript 的值傳遞和引用傳遞
• Primitive Types & Reference Types in JavaScript —— Bran van der Meer
• JavaScript: Passing by Value or by Reference —— CSDN
• js 值引用和值復(fù)制 —— SegmentFault
• js- 引用和復(fù)制(傳值和傳址) —— CSDN

4. 隱式, 顯式, 名義和鴨子類(lèi)型

文章

• ECMAScript 類(lèi)型轉(zhuǎn)換 —— W3school
• JavaScript 的怪癖 1：隱式類(lèi)型轉(zhuǎn)換 —— justjavac
• JavaScript 運(yùn)算符規(guī)則與隱式類(lèi)型轉(zhuǎn)換詳解 —— 掘金
• 聊一聊 JS 中的隱式類(lèi)型轉(zhuǎn)換 —— SegmentFault
• 有趣的 JavaScript 隱式類(lèi)型轉(zhuǎn)換 —— 博客園
• JavaScript 顯式類(lèi)型轉(zhuǎn)換與隱式類(lèi)型轉(zhuǎn)換 —— CSDN
• 你不知道的 JavaScript（中卷）強(qiáng)制類(lèi)型轉(zhuǎn)換 —— 簡(jiǎn)書(shū)
• 你懂 JavaScript 嗎？#8 強(qiáng)制轉(zhuǎn)型 —— cythilya
• 動(dòng)態(tài)類(lèi)型語(yǔ)言和鴨子類(lèi)型 —— 曾探
• Nominal & Structural Typing —— flow
• What exactly is Type Coercion in Javascript? —— stackoverflow
• You Don't Know JS: Types & Grammar —— github

視頻

• javascript 隱式轉(zhuǎn)換 —— 慕課網(wǎng)
• Javascript 基礎(chǔ)加強(qiáng)-類(lèi)型轉(zhuǎn)換 —— 黑馬程序員

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

文章

• JavaScript 中的相等性判斷 —— MDN
• js 中 == 和 === 的區(qū)別 —— 掘金
• == vs === in Javascript —— CSDN
• 深入理解 javascript 之 typeof 和 instanceof —— CSDN
• JavaScript 的 typeof 的用途 —— justjavac
• 一張圖看懂 Function 和 Object 的關(guān)系及簡(jiǎn)述 instanceof 運(yùn)算符 —— 掘金
• 淺談 instanceof 和 typeof 的實(shí)現(xiàn)原理 —— 掘金
• js 中 typeof 與 instanceof 用法

6. this, call, apply 和 bind

文章

• Javascript 的 this 用法 —— 阮一峰
• 學(xué)會(huì) JS 的 this 這一篇就夠了，根本不用記 —— 簡(jiǎn)書(shū)
• [譯] this（他喵的）到底是什么 — 理解 JavaScript 中的 this、call、apply 和 bind —— 掘金
• this、apply、call、bind —— 掘金
• 使用 call、apply 和 bind 解決 js 中煩人的 this，事件綁定時(shí)的 this 和傳參問(wèn)題 —— 博客園
• call、apply 和 bind 的原生實(shí)現(xiàn) —— github
• 詳解 JS 中的 this、apply、call、bind(經(jīng)典面試題) —— 腳本之家

視頻

• JavaScript 關(guān)于 this 關(guān)鍵字解釋 —— 愛(ài)奇藝
• JS 關(guān)于作用域閉包和 this 的綜合面試題 —— 百度視頻
• js 面向?qū)ο箝]包數(shù)組 12.函數(shù)中的 this —— 樂(lè)視視頻
• 1.3.10-this 指向及 this 應(yīng)用 —— 樂(lè)視視頻
• 珠峰培訓(xùn) JavaScript 開(kāi)發(fā)課程：關(guān)于 this 關(guān)鍵字、閉包作用域 —— 網(wǎng)易云課堂

7. 函數(shù)作用域, 塊級(jí)作用域和詞法作用域

文章

• 變量作用域與解構(gòu)賦值 —— 廖雪峰
• 學(xué)習(xí) Javascript 閉包（Closure） —— 阮一峰
• JavaScript 中詞法作用域、閉包與跳出閉包 —— SegmentFault
• JavaScript 深入之詞法作用域和動(dòng)態(tài)作用域 —— 掘金
• 深入理解閉包之前置知識(shí) → 作用域與詞法作用域 —— 掘金
• What is lexical scope? —— stackoverflow
• You Don't Know JS: Scope & Closures —— Kyle Simpson

8. 閉包

文章

• 閉包 —— MDN
• ECMAScript 閉包（closure）—— w3school
• 學(xué)習(xí) Javascript 閉包（Closure） —— 阮一峰
• 閉包 —— 廖雪峰
• 一次性搞懂 JavaScript 閉包 —— 簡(jiǎn)書(shū)
• JavaScript 閉包 —— SegmentFault
• js 匿名自執(zhí)行函數(shù)中閉包的高級(jí)使用 —— 掘金
• 高效使用 JavaScript 閉包 —— 掘金

視頻

• JavaScript 閉包和閉包面試題 —— 愛(ài)奇藝
• js 面向?qū)ο箝]包數(shù)組 11.閉包 —— 樂(lè)視
• 白賀翔_函數(shù)(閉包) —— 樂(lè)視

9. map, reduce, filter 等高階函數(shù)

文章

• 高階函數(shù) —— 廖雪峰
• ES5 中新增的 Array 方法詳細(xì)說(shuō)明 —— 張?chǎng)涡?/a>
• 一張圖看懂 JavaScript 中數(shù)組的迭代方法：forEach、map、filter、reduce、every、some —— 掘金
• Transducing（上）－《JavaScript 輕量級(jí)函數(shù)式編程》 —— SegmentFault

10. 表達(dá)式和語(yǔ)句

文章

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

11. 變量提升

文章

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

12. Promise

文章

• 使用 promises —— MDN
• Promise —— MDN
• Promie — 廖雪峰
• JavaScript Promise：去而復(fù)返 —— 司徒正美
• (上面的原文)JavaScript Promise：簡(jiǎn)介 —— Web Fundamentals
• 1 分鐘讀完《10 分鐘學(xué)會(huì) JavaScript 的 Async/Await》 —— justjavac
• JavaScript Promise 迷你書(shū)（中文版）
• JavaScript 進(jìn)階之路——認(rèn)識(shí)和使用 Promise，重構(gòu)你的 Js 代碼 —— 博客園

視頻

• Promise 入門(mén) —— 慕課網(wǎng)

13. 立即執(zhí)行函數(shù), 模塊化, 命名空間

文章

• Javascript 模塊化編程（一）：模塊的寫(xiě)法 —— 阮一峰
• javascript 模塊化編程-詳解立即執(zhí)行函數(shù)表達(dá)式 —— 簡(jiǎn)書(shū)
• Javascript 的匿名函數(shù)與自執(zhí)行 —— 掘金
• 前端模塊化——技術(shù)選型 —— SegmentFault
• 談?wù)?Js 前端模塊化規(guī)范 —— SegmentFault

14. 遞歸

文章

• 求解釋 js 遞歸 —— SegmentFault
• JavaScript 中的遞歸 —— 掘金
• 遞歸（上）－《JavaScript 輕量級(jí)函數(shù)式編程》 —— 掘金
• 遞歸（下）－《JavaScript 輕量級(jí)函數(shù)式編程》 —— 掘金
• 尾調(diào)用和尾遞歸 —— 掘金
• 幾個(gè)經(jīng)典遞歸問(wèn)題用 js 實(shí)現(xiàn) —— CSDN
• 遞歸函數(shù)的幾個(gè)例子 —— CSDN

15. 算法

文章

• 十大經(jīng)典排序算法總結(jié)（JavaScript 描述） —— 掘金
• 在 JavaScript 中學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法 —— 掘金
• JS 中可能用得到的全部的排序算法 —— 掘金
• JS 家的排序算法 —— 簡(jiǎn)書(shū)
• 前端常見(jiàn)算法的 JS 實(shí)現(xiàn) —— SegmentFault
• 前端面試中的常見(jiàn)的算法問(wèn)題 ——蒲小花的博客

視頻

• Javascript 實(shí)現(xiàn)二叉樹(shù)算法 —— 慕課網(wǎng)

16. 數(shù)據(jù)結(jié)構(gòu)

文章

• 來(lái)我們淺談一下 js 的數(shù)據(jù)結(jié)構(gòu) —— 簡(jiǎn)書(shū)
• JavaScript 中的算法與數(shù)據(jù)結(jié)構(gòu) —— 簡(jiǎn)書(shū)
• 學(xué) JS 必看-JavaScript 數(shù)據(jù)結(jié)構(gòu)深度剖析 —— 大道至簡(jiǎn)的博客
• js 中基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)數(shù)組去重問(wèn)題 —— 掘金

視頻

• JavaScript 數(shù)據(jù)結(jié)構(gòu)-運(yùn)算符 —— 樂(lè)視

17. 消息隊(duì)列和事件循環(huán)

文章

• 并發(fā)模型與事件循環(huán) —— MDN
• JavaScript 運(yùn)行機(jī)制詳解：再談 Event Loop —— 阮一峰
• 深入理解 JavaScript 事件循環(huán) —— 博客園
• 深入淺出 Javascript 事件循環(huán)機(jī)制 —— 知乎
• JS 事件循環(huán)機(jī)制（event loop）之宏任務(wù)、微任務(wù) —— SegmentFault
• JavaScript：徹底理解同步、異步和事件循環(huán) —— SegmentFault

18. setTimeout, setInterval 和 requestAnimationFrame

文章

• Window setTimeout() 方法 —— 菜鳥(niǎo)教程
• Window setInterval() 方法 —— 菜鳥(niǎo)教程
• 關(guān)于 setTimeout —— 掘金
• 你不知道的 Javascript：有趣的 setTimeout —— 掘金
• 原來(lái)你是這樣的 setTimeout —— 掘金
• setTimeout() 和 setInterval() 本質(zhì)區(qū)別在哪里？ —— SegmentFault
• book: window.requestAnimationFrame —— MDN
• requestAnimationFrame 知多少？ —— 博客園
• CSS3 動(dòng)畫(huà)那么強(qiáng)，requestAnimationFrame 還有毛線(xiàn)用？ —— 張?chǎng)涡?/a>
• 「JavaScript 定時(shí)器」setInterval、setTimeout 和 requestAnimationFrame 淺析 —— SegmentFault
• 翻譯：setInterval 與 requestAnimationFrame 的時(shí)間間隔測(cè)試 —— SegmentFault
• 阿里前端面試題：requestAnimationFrame 實(shí)現(xiàn)類(lèi)似 setInterval 的計(jì)時(shí)器 —— SegmentFault

視頻

• setTimeout 和 setInterval —— 優(yōu)酷

19. 繼承, 多態(tài)和代碼復(fù)用

文章

• JS 面向?qū)ο缶幊讨悍庋b、繼承、多態(tài) —— 博客園
• Javascript 的繼承與多態(tài) —— 簡(jiǎn)書(shū)
• js:面向?qū)ο缶幊?，帶你認(rèn)識(shí)封裝、繼承和多態(tài) —— 掘金
• JavaScript 中的“多繼承” —— 掘金
• 代碼復(fù)用模式 —— github
• 深入理解 JavaScript：代碼復(fù)用模式(推薦篇) —— 湯姆大叔
• 深入理解 JavaScript：代碼復(fù)用模式(避免篇) —— 湯姆大叔

20. 按位操作符, 類(lèi)數(shù)組對(duì)象和類(lèi)型化數(shù)組

文章

• 按位操作符 —— MDN
• 類(lèi)數(shù)組對(duì)象 —— MDN
• 類(lèi)型化數(shù)組 —— MDN
• JavaScript ArrayBuffer 淺析 —— 博客園

21. DOM 樹(shù)和渲染過(guò)程

文章

• 如何創(chuàng)建一個(gè) DOM 樹(shù) —— MDN
• HTML DOM 節(jié)點(diǎn) —— W3school
• DOM 概述 —— 阮一峰
• 《JavaScript 闖關(guān)記》之 DOM（上）—— 掘金
• 《JavaScript 闖關(guān)記》之 DOM（下）—— 掘金
• 掌握 DOM 操作 —— 掘金
• 操作 DOM —— 廖雪峰
• 原來(lái) CSS 與 JS 是這樣阻塞 DOM 解析和渲染的 —— 掘金

視頻

• DOM 探索之基礎(chǔ)詳解篇 —— 慕課網(wǎng)
• DOM 事件探秘 —— 慕課網(wǎng)
• jQuery 基礎(chǔ)(二)DOM 篇 —— 慕課網(wǎng)
• JS 操作 DOM 對(duì)象屬性和方法 —— 愛(ài)奇藝

22. new 與構(gòu)造函數(shù), instanceof 與實(shí)例

文章

• 構(gòu)造函數(shù)與 new 命令 —— 阮一峰
• Javascript 面向?qū)ο缶幊蹋ǘ簶?gòu)造函數(shù)的繼承 —— 阮一峰
• 完整原型鏈詳細(xì)圖解(構(gòu)造函數(shù)、原型、實(shí)例化對(duì)象) —— CSDN
• JavaScript 中構(gòu)造函數(shù)與 new 操作符的實(shí)例詳解 —— PHP 中文網(wǎng)
• 構(gòu)造函數(shù)、實(shí)例、原型、原型鏈之間的關(guān)系 —— CSDN
• 深入理解 JS—instanceof 和原型鏈 —— CSDN
• 前端基礎(chǔ)進(jìn)階（九）：詳解面向?qū)ο蟆?gòu)造函數(shù)、原型與原型鏈 —— 簡(jiǎn)書(shū)
• js 用 new 實(shí)例化對(duì)象與直接調(diào)用的 this 的區(qū)別 —— 簡(jiǎn)書(shū)
• JavaScript 并非所有的東西都是對(duì)象 —— justjavac
• JavaScript instanceof 運(yùn)算符深入剖析 —— IBM

視頻

• 改良版的構(gòu)造函數(shù) —— 樂(lè)視

23. 原型繼承與原型鏈

文章

• 繼承與原型鏈 —— MDN
• 構(gòu)造函數(shù)、原型與原型鏈 —— github
• 原型及原型鏈 —— github(1269 Star)
• 理清 javascript 中的面向?qū)ο?一) 原型繼承 —— SegmentFault
• JavaScript：繼承和原型鏈(譯) —— justjavac
• 三張圖搞懂 JavaScript 的原型對(duì)象與原型鏈 —— 博客園
• 一張圖讓你搞懂 JavaScript 的繼承與原型鏈 —— CSDN
• JS 高級(jí)--原型鏈(一看就懂，但 18 歲以下請(qǐng)繞道) —— CSDN
• 原型繼承 —— 廖雪峰
• JS 原型鏈與繼承別再被問(wèn)倒了 —— 掘金
• 征服 JavaScript 面試系列：類(lèi)繼承和原型繼承的區(qū)別 —— 掘金

視頻

• JS 高級(jí)-07-原型鏈繼承 —— 樂(lè)視
• JS 原型對(duì)象和原型鏈簡(jiǎn)介 —— 騰訊視頻

24. Object.create 和 Object.assign

文章

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

25. 工廠(chǎng)函數(shù)和類(lèi)

文章

• 類(lèi) —— MDN
• 類(lèi)和實(shí)例 —— 廖雪峰
• Javascript 定義類(lèi)（class）的三種方法 —— 阮一峰
• 【譯】ES6 的工廠(chǎng)函數(shù) —— 掘金
• JavaScript 創(chuàng)建對(duì)象之單例、工廠(chǎng)、構(gòu)造函數(shù)模式 —— 掘金

26. 設(shè)計(jì)模式

文章

• 設(shè)計(jì)模式 —— 阮一峰
• JavaScript 設(shè)計(jì)模式 —— 掘金
• 學(xué)用 JavaScript 設(shè)計(jì)模式 —— 極客學(xué)院
• [面試專(zhuān)題]JS 設(shè)計(jì)模式 —— SegmentFault
• JavaScript Patterns 中譯本 —— github

視頻

• HTML5 課程大綱 2-11JS 設(shè)計(jì)模式

27. Memoization

文章

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

28. 純函數(shù), 函數(shù)副作用和狀態(tài)變化

文章

• 純函數(shù)(Pure Function) —— React.js 小書(shū)
• JavaScript Functional Programming：純函數(shù) —— 寧皓網(wǎng)
• js 函數(shù)的副作用分析 —— 腳本之家
• 如何使用純函數(shù)式 JavaScript 處理臟副作用 —— 掘金
• 原生 JavaScript 實(shí)現(xiàn) state 狀態(tài)管理系統(tǒng) —— 博客園

29. 耗性能操作和時(shí)間復(fù)雜度

文章

• 時(shí)間復(fù)雜度 O(log n) 意味著什么？ —— 掘金
• 算法的時(shí)間復(fù)雜度和空間復(fù)雜度 —— 掘金
• 算法（一）時(shí)間復(fù)雜度 —— 掘金
• 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 引擎的執(zhí)行機(jī)制 —— SegmentFaut
• V8 javascript 引擎 —— 博客園

31. 二進(jìn)制, 十六進(jìn)制, 十進(jìn)制, 科學(xué)記數(shù)法

文章

• 二、八、十、十六進(jìn)制轉(zhuǎn)換(圖解篇) —— 博客園
• JavaScript 讀寫(xiě)二進(jìn)制數(shù)據(jù) —— 掘金

視頻

• 二進(jìn)制、十進(jìn)制、十六進(jìn)制互相轉(zhuǎn)化很難嗎？ —— 百度視頻

32. 偏函數(shù), 柯里化, Compose 和 Pipe

文章.

• Javascript 函數(shù)式編程之偏函數(shù) —— CSDN
• JavaScript 專(zhuān)題之偏函數(shù) —— SegmentFault
• 柯里化和偏函數(shù)有什么區(qū)別？ —— SegmentFault
• Javascript 偏函數(shù)與柯里化 —— CSDN
• 柯里化(curry) —— JS 函數(shù)式編程指南
• 代碼組合(compose) —— JS 函數(shù)式編程指南
• 關(guān)于 javascript 函數(shù)式編程中 compose 的實(shí)現(xiàn) —— SegmentFault
• 實(shí)現(xiàn) compose 的五種思路 —— SegmentFault
• JavaScript 函數(shù)式編程之函數(shù)組合函數(shù) compose 和 pipe 的實(shí)現(xiàn) —— SegmentFault
• JavaScript 輕量級(jí)函數(shù)式編程-第 4 章:組合函數(shù) ——掘金

33. 代碼整潔之道

文章

• [譯] JavaScript 代碼整潔之道 —— 邊城
• Javascript 編程風(fēng)格 —— 阮一峰
• 重構(gòu) - 代碼整潔之道
• 讓你的代碼更簡(jiǎn)短，更整潔，更易讀的 ES6 小技巧 
• Web 前端：11 個(gè)讓你代碼整潔的原則 —— 伯樂(lè)在線(xiàn)

最新評(píng)論