33-js-concepts · 33-js-concepts 中文版

<h1 align="center"> <br> <a href=""><img src="33_js_concepts.jpg" alt="每位 JS 開發應該懂的 33 個概念" width=200"></a> <br> <br> JavaScript開發者應懂的33個概念 <br> </h1> ## 簡介這個項目是為了幫助開發者掌握 JavaScript 概念而創立的。它不是必備，但在未來學習（JavaScript）中，可以作為一篇指南。 > 本篇文章是參照 @leonardomso 創立，英文版項目地址在[這里](https://github.com/leonardomso/33-js-concepts)。 > 由于原版資源都要翻墻，所以本人創立一個中文版，附上關于這些概念在國內的一些文章和視頻。 > 若有覺得更好的文章或者視頻，可以貢獻出來，覺得有誤的，請聯系我刪除。 ## 更新若有覺得更好的文章或者視頻，可以貢獻出來，覺得有誤的，請聯系我刪除。 - 文章的排序優化，前面的文章是介紹概念，后面的文章是深入解讀。 - 將原文的 "高階函數" 和 "map, reduce, filter" 合并為 "map, reduce, filter 等高階函數" - 增加 "promise" 概念(替換刪除的 "高階函數") - 2018-10-24 更新：@BuptStEve 貢獻的三篇關于" 函數式編程 "方面的文章 - 2018-12-04 更新：@haner199401 貢獻的 @冴羽 "JavaScript深入之從原型到原型鏈" --- ## 目錄 1. **[調用堆棧](#1-調用堆棧)** 2. **[原始類型](#2-原始類型)** 3. **[值類型和引用類型](#3-值類型和引用類型)** 4. **[隱式, 顯式, 名義和鴨子類型](#4-隱式-顯式-名義和鴨子類型)** 5. **[== 與 ===, typeof 與 instanceof](#5--vs--typeof-vs-instanceof)** 6. **[this, call, apply 和 bind](#6-this-call-apply-和-bind)** 7. **[函數作用域, 塊級作用域和詞法作用域](#7-函數作用域-塊級作用域和詞法作用域)** 8. **[閉包](#8-閉包)** 9. **[map, reduce, filter 等高階函數](#9-map-reduce-filter-等高階函數)** 10. **[表達式和語句](#10-表達式和語句)** 11. **[變量提升](#11-變量提升)** 12. **[Promise](#12-promise)** 13. **[立即執行函數, 模塊化, 命名空間](#13-立即執行函數-模塊化-命名空間)** 14. **[遞歸](#14-遞歸)** 15. **[算法](#15-算法)** 16. **[數據結構](#16-數據結構)** 17. **[消息隊列和事件循環](#17-消息隊列和事件循環)** 18. **[setTimeout, setInterval 和 requestAnimationFrame](#18-settimeout-setinterval-和-requestanimationframe)** 19. **[繼承, 多態和代碼復用](#19-繼承-多態和代碼復用)** 20. **[按位操作符, 類數組對象和類型化數組](#20-按位操作符-類數組對象和類型化數組)** 21. **[DOM 樹和渲染過程](#21-dom-樹和渲染過程)** 22. **[new 與構造函數, instanceof 與實例](#22-new-與構造函數-instanceof-與實例)** 23. **[原型繼承與原型鏈](#23-原型繼承與原型鏈)** 24. **[Object.create 和 Object.assign](#24-objectcreate-和-objectassign)** 25. **[工廠函數和類](#25-工廠函數和類)** 26. **[設計模式](#26-設計模式)** 27. **[Memoization](#27-memoization)** 28. **[純函數, 函數副作用和狀態變化](#28-純函數-函數副作用和狀態變化)** 29. **[耗性能操作和時間復雜度](#29-耗性能操作和時間復雜度)** 30. **[JavaScript 引擎](#30-javascript-引擎)** 31. **[二進制, 十進制, 十六進制, 科學記數法](#31-二進制-十六進制-十進制-科學記數法)** 32. **[偏函數, 柯里化, Compose 和 Pipe](#32-偏函數-柯里化-compose-和-pipe)** 33. **[代碼整潔之道](#33-代碼整潔之道)** --- ## 1. 調用堆棧 ### 文章 - :book: [Call Stack — MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Call_stack) - :book: [[譯] JavaScript 如何工作：對引擎、運行時、調用堆棧的概述 —— 掘金](https://juejin.im/post/5a05b4576fb9a04519690d42) - :book: [[譯] 理解 JavaScript 中的執行上下文和執行棧 —— 掘金](https://juejin.im/post/5ba32171f265da0ab719a6d7) - :book: [這一次，徹底弄懂 JavaScript 執行機制 —— 掘金](https://juejin.im/post/59e85eebf265da430d571f89) - :book: [解讀 JavaScript 之引擎、運行時和堆棧調用 —— 開源中國](https://www.oschina.net/translate/how-does-javascript-actually-work-part-1) - :book: [Tasks, microtasks, queues and schedules —— Jake Archibald](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) ### 視頻 - :tv: [What is the event loop anyway? —— 騰訊視頻(英文字幕)](https://v.qq.com/x/page/h0372bld8re.html?ptag=qqbrowser) - :tv: [Understanding The JavaScript Call Stack, Event Queue, Event Table, & Event Loop —— Bilibili](https://www.bilibili.com/video/av33824933/) - :tv: [JS 中的變量提升、堆棧內存及閉包詳解 —— Acfun](http://www.acfun.cn/v/ac4495641) - :tv: [事件循環模型 —— PHP 中文網](http://www.php.cn/code/21194.html) - :tv: [Javascript: the Call Stack explained — Coding Blocks India](https://www.youtube.com/watch?v=w6QGEiQceOM) - :tv: [The JS Call Stack Explained In 9 Minutes — Colt Steele](https://www.youtube.com/watch?v=W8AeMrVtFLY) - :tv: [JavaScript Execution Stack — Codecademy](https://www.youtube.com/watch?v=jT0USJeNFEA) - :tv: [What is the Call Stack? — Eric Traub](https://www.youtube.com/watch?v=w7QWQlkLY_s) - :tv: [The Call Stack — Kevin Drumm](https://www.youtube.com/watch?v=Q2sFmqvpBe0) - :tv: [Understanding JavaScript Execution — Codesmith](https://www.youtube.com/watch?v=Z6a1cLyq7Ac&list=PLWrQZnG8l0E4kd1T_nyuVoxQUaYEWFgcD) - :tv: [Call Stack & Event Loop — movies com](https://www.youtube.com/watch?v=mk0lu9MKBto) **[:arrow_up: 返回目錄](#目錄)** --- ## 2. 原始類型 ### 文章 - :book: [原始數據 —— MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Primitive) - :book: [ECMAScript 原始類型 —— W3school](http://www.w3school.com.cn/js/pro_js_primitivetypes.asp) - :book: [[譯]JavaScript是怎樣編碼數字的](https://segmentfault.com/a/1190000017090272) - :book: [每一個 JavaScript 開發者應該了解的浮點知識 —— 顏海鏡](https://yanhaijing.com/javascript/2014/03/14/what-every-javascript-developer-should-know-about-floating-points/) - :book: [JavaScript 標準參考教程(基本語法之數值) —— 阮一峰](https://wangdoc.com/javascript/types/number.html) - :book: [The Secret Life of JavaScript Primitives —— Angus Croll](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/) ### 視頻 - :tv: [javascript 六種數據類型 —— 慕課網](https://www.imooc.com/video/5674) - :tv: [javascript 視頻教程(數據類型) —— PHP 中文網](http://www.php.cn/code/5808.html) - :tv: [JavaScript Reference vs Primitive Types — Academind](https://www.youtube.com/watch?v=9ooYYRLdg_g) - :tv: [JavaScript Primitive Types — Simon Sez IT](https://www.youtube.com/watch?v=HsbWQsSCE5Y) - :tv: [Javascript Primitive and Reference Types — Baljeet Singh](https://www.youtube.com/watch?v=F7YbhKbpFic) - :tv: [Value Types and Reference Types in JavaScript — Programming with Mosh](https://www.youtube.com/watch?v=e-_mDyqm2oU) - :tv: [JavaScript Primitive Data Types — Avelx](https://www.youtube.com/watch?v=qw3j0A3DIzQ) - :tv: [Everything you never wanted to know about JavaScript numbers — Bartek Szopka](https://www.youtube.com/watch?v=MqHDDtVYJRI) **[:arrow_up: 返回目錄](#目錄)** --- ## 3. 值類型和引用類型 ### 文章 - :book: [ECMAScript 引用類型 —— W3school](http://www.w3school.com.cn/js/pro_js_referencetypes.asp) - :book: [js 中的值類型和引用類型的區別 —— 博客園](https://www.cnblogs.com/leiting/p/8081413.html) - :book: [JavaScript 的值傳遞和引用傳遞 —— FunDebug](https://blog.fundebug.com/2017/08/09/explain_value_reference_in_js/) - :book: [Primitive Types & Reference Types in JavaScript —— Bran van der Meer](https://docstore.mik.ua/orelly/webprog/jscript/ch04_04.htm) - :book: [JavaScript: Passing by Value or by Reference —— CSDN](https://blog.csdn.net/xiaojia_boke/article/details/54906509) - :book: [js 值引用和值復制 —— SegmentFault](https://segmentfault.com/a/1190000015411195) - :book: [js- 引用和復制(傳值和傳址) —— CSDN](https://blog.csdn.net/zzzaquarius/article/details/4902235) ### 視頻 - :tv: [Javascript Pass by Value vs Pass by Reference — techsith](https://www.youtube.com/watch?v=E-dAnFdq8k8) - :tv: [JavaScript Value vs Reference Types — Programming with Mosh](https://www.youtube.com/watch?v=fD0t_DKREbE) **[:arrow_up: 返回目錄](#目錄)** --- ## 4. 隱式, 顯式, 名義和鴨子類型 ### 文章 - :book: [ECMAScript 類型轉換 —— W3school](http://www.w3school.com.cn/js/pro_js_typeconversion.asp) - :book: [JavaScript 的怪癖 1：隱式類型轉換 —— justjavac](http://justjavac.com/javascript/2013/04/08/javascript-quirk-1-implicit-conversion-of-values.html) - :book: [JavaScript 運算符規則與隱式類型轉換詳解 —— 掘金](https://juejin.im/post/59ad2585f265da246a20e026) - :book: [聊一聊 JS 中的隱式類型轉換 —— SegmentFault](https://segmentfault.com/a/1190000004482388) - :book: [有趣的 JavaScript 隱式類型轉換 —— 博客園](https://www.cnblogs.com/yugege/p/5277883.html) - :book: [JavaScript 顯式類型轉換與隱式類型轉換 —— CSDN](https://blog.csdn.net/yangjvn/article/details/48284163) - :book: [你不知道的 JavaScript（中卷）強制類型轉換 —— 簡書](https://www.jianshu.com/p/777a89b4ed9a) - :book: [你懂 JavaScript 嗎？#8 強制轉型 —— cythilya](https://ithelp.ithome.com.tw/articles/10201512) - :book: [動態類型語言和鴨子類型 —— 曾探](http://book.51cto.com/art/201505/475153.htm) - :book: [Nominal & Structural Typing —— flow](https://flow.org/en/docs/lang/nominal-structural/) - :book: [What exactly is Type Coercion in Javascript? —— stackoverflow](https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript) - :book: [You Don't Know JS: Types & Grammar —— github](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&%20grammar/ch4.md) ### 視頻 - :tv: [javascript 隱式轉換 —— 慕課網](https://www.imooc.com/video/5675) - :tv: [Javascript 基礎加強-類型轉換 —— 黑馬程序員](http://www.le.com/ptv/vplay/27767009.html) **[:arrow_up: 返回目錄](#目錄)** --- <div id="5--vs--typeof-vs-instanceof"></div> ## 5. == vs ===, typeof vs instanceof ### 文章 - :book: [JavaScript 中的相等性判斷 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness) - :book: [js 中 == 和 === 的區別 —— 掘金](https://juejin.im/entry/584918612f301e005716add6) - :book: [== vs === in Javascript —— CSDN](https://blog.csdn.net/w97531/article/details/82255225) - :book: [深入理解 javascript 之 typeof 和 instanceof —— CSDN](https://blog.csdn.net/mevicky/article/details/50353881) - :book: [JavaScript 的 typeof 的用途 —— justjavac](http://justjavac.com/javascript/2012/12/23/what-is-javascripts-typeof-operator-used-for.html) - :book: [一張圖看懂 Function 和 Object 的關系及簡述 instanceof 運算符 —— 掘金](https://juejin.im/post/58358606570c35005e4142bd) - :book: [淺談 instanceof 和 typeof 的實現原理 —— 掘金](https://juejin.im/post/5b0b9b9051882515773ae714) - :book: [typeof 和 instanceOf的區別](https://segmentfault.com/a/1190000000730982) **[:arrow_up: 返回目錄](#目錄)** --- ## 6. this, call, apply 和 bind ### 文章 - :book: [Javascript 的 this 用法 —— 阮一峰](http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html) - :book: [學會 JS 的 this 這一篇就夠了，根本不用記 —— 簡書](https://www.jianshu.com/p/6b4333e78bf5) - :book: [[譯] this（他喵的）到底是什么 — 理解 JavaScript 中的 this、call、apply 和 bind —— 掘金](https://juejin.im/post/5b9f176b6fb9a05d3827d03f) - :book: [this、apply、call、bind —— 掘金](https://juejin.im/post/59bfe84351882531b730bac2) - :book: [使用 call、apply 和 bind 解決 js 中煩人的 this，事件綁定時的 this 和傳參問題 —— 博客園](https://www.cnblogs.com/tingyu-blog/p/6212392.html) - :book: [call、apply 和 bind 的原生實現 —— github](https://github.com/Abiel1024/blog/issues/16) ### 視頻 - :tv: [JavaScript 關于 this 關鍵字解釋 —— 愛奇藝](https://www.iqiyi.com/w_19rr1augsd.html) - :tv: [JS 關于作用域閉包和 this 的綜合面試題 —— 百度視頻](http://baidu.iqiyi.com/watch/845335533383874688.html?page=videoMultiNeed) - :tv: [js 面向對象閉包數組 12.函數中的 this —— 樂視視頻](http://www.le.com/ptv/vplay/27478413.html?ch=baidu_s) - :tv: [1.3.10-this 指向及 this 應用 —— 樂視視頻](http://www.le.com/ptv/vplay/24835911.html?ch=baidu_s) - :tv: [珠峰培訓 JavaScript 開發課程：關于 this 關鍵字、閉包作用域 —— 網易云課堂](https://study.163.com/course/introduction/590005.htm) **[:arrow_up: 返回目錄](#目錄)** --- ## 7. 函數作用域, 塊級作用域和詞法作用域 ### 文章 - :book: [變量作用域與解構賦值 —— 廖雪峰](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344993159773a464f34e1724700a6d5dd9e235ceb7c000) - :book: [學習 Javascript 閉包（Closure） —— 阮一峰](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html) - :book: [JavaScript 中詞法作用域、閉包與跳出閉包 —— SegmentFault](https://segmentfault.com/a/1190000006671020) - :book: [JavaScript 深入之詞法作用域和動態作用域 —— 掘金](https://juejin.im/entry/58e70077b123db15eb88dc7e) - :book: [深入理解閉包之前置知識 → 作用域與詞法作用域 —— 掘金](https://juejin.im/post/5afb0ae56fb9a07aa2138425) - :book: [What is lexical scope? —— stackoverflow](https://stackoverflow.com/questions/1047454/what-is-lexical-scope) - :book: [You Don't Know JS: Scope & Closures —— Kyle Simpson](https://github.com/fishenal/You-Dont-Know-JS/blob/master/scope%20&%20closures/ch2.md) **[:arrow_up: 返回目錄](#目錄)** --- ## 8. 閉包 ### 文章 - :book: [閉包 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures) - :book: [ECMAScript 閉包（closure）—— w3school](http://www.w3school.com.cn/js/pro_js_functions_closures.asp) - :book: [學習 Javascript 閉包（Closure） —— 阮一峰](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html) - :book: [閉包 —— 廖雪峰](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449934543461c9d5dfeeb848f5b72bd012e1113d15000) - :book: [一次性搞懂 JavaScript 閉包 —— 簡書](https://www.jianshu.com/p/796e903754f1) - :book: [JavaScript 閉包 —— SegmentFault](https://segmentfault.com/a/1190000006875662) - :book: [js 匿名自執行函數中閉包的高級使用 —— 掘金](https://juejin.im/entry/5800eb7da22b9d005b36156e) - :book: [高效使用 JavaScript 閉包 —— 掘金](https://juejin.im/entry/59df405251882551bf7e58c6#comment) ### 視頻 - :tv: [JavaScript 閉包和閉包面試題 —— 愛奇藝](http://www.iqiyi.com/w_19rr1amael.html) - :tv: [js 面向對象閉包數組 11.閉包 —— 樂視](http://www.le.com/ptv/vplay/27478410.html) - :tv: [白賀翔\_函數(閉包) —— 樂視](http://www.le.com/ptv/vplay/30505852.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 9. map, reduce, filter 等高階函數 ### 文章 - :book: [高階函數 —— 廖雪峰](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499355829ead974e550644e2ebd9fd8bb1b0dd721000) - :book: [ES5 中新增的 Array 方法詳細說明 —— 張鑫旭](https://www.zhangxinxu.com/wordpress/2013/04/es5%e6%96%b0%e5%a2%9e%e6%95%b0%e7%bb%84%e6%96%b9%e6%b3%95/) - :book: [一張圖看懂 JavaScript 中數組的迭代方法：forEach、map、filter、reduce、every、some —— 掘金](https://juejin.im/post/5835808067f3560065ed4ab2) - :book: [Transducing（上）－《JavaScript 輕量級函數式編程》 —— SegmentFault](https://segmentfault.com/a/1190000012127329) - :book: [JavaScript 函數式編程（三） —— @BuptStEve](https://github.com/BuptStEve/blog/issues/15) **[:arrow_up: 返回目錄](#目錄)** --- ## 10. 表達式和語句 ### 文章 - :book: [js 表達式與語句 —— 博客園](https://www.cnblogs.com/xianshenglu/p/8386918.html) - :book: [JS 表達式和語句的區別 —— SegmentFault](https://segmentfault.com/q/1010000004102804) - :book: [JavaScript 中的表達式（expression）和語句/聲明（statement） —— CSDN](https://blog.csdn.net/mett_smith/article/details/78761247) - :book: [重讀 Axel 的 Javascript 中的 Expression vs Statement 一文 —— SegmentFault](https://segmentfault.com/a/1190000004565693) - :book: [Expressions versus statements in JavaScript —— Dr. Axel](http://2ality.com/2012/09/expressions-vs-statements.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 11. 變量提升 ### 文章 - :book: [JavaScript 變量提升 —— 菜鳥教程](http://www.runoob.com/js/js-hoisting.html) - :book: [ES6 變量作用域與提升：變量的生命周期詳解 —— 掘金](https://juejin.im/post/59905bea6fb9a03c34192c51) - :book: [[翻譯] JavaScript Scoping and Hoisting —— SegmentFault](https://segmentfault.com/a/1190000004345355#articleHeader5) - :book: [JavaScript Scoping and Hoisting —— Ben Cherry](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 12. Promise ### 文章 - :book: [使用 promises —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises) - :book: [Promise —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) - :book: [Promise — 廖雪峰](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000) - :book: [JavaScript Promise：去而復返 —— 司徒正美](https://www.cnblogs.com/rubylouvre/p/3495286.html) - :book: [(上面的原文)JavaScript Promise：簡介 —— Web Fundamentals](https://developers.google.com/web/fundamentals/primers/promises#_1) - :book: [1 分鐘讀完《10 分鐘學會 JavaScript 的 Async/Await》 —— justjavac](https://segmentfault.com/a/1190000011813934) - :book: [JavaScript Promise 迷你書（中文版）](https://juejin.im/entry/56499ae160b2d1404c4f8834) - :book: [JavaScript 進階之路——認識和使用 Promise，重構你的 Js 代碼 —— 博客園](https://www.cnblogs.com/yunfeifei/p/4453690.html) ### 視頻 - :tv: [Promise 入門 —— 慕課網](https://www.imooc.com/learn/949) **[:arrow_up: 返回目錄](#目錄)** --- ## 13. 立即執行函數, 模塊化, 命名空間 ### 文章 - :book: [Javascript 模塊化編程（一）：模塊的寫法 —— 阮一峰](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html) - :book: [javascript 模塊化編程-詳解立即執行函數表達式 —— 簡書](https://www.jianshu.com/p/4dbf4a4c8ebb) - :book: [Javascript 的匿名函數與自執行 —— 掘金](https://juejin.im/entry/57fee360a22b9d005b1d9ae3) - :book: [前端模塊化——技術選型 —— SegmentFault](https://segmentfault.com/a/1190000006966358) - :book: [談談 Js 前端模塊化規范 —— SegmentFault](https://segmentfault.com/a/1190000015991869#articleHeader8) **[:arrow_up: 返回目錄](#目錄)** --- ## 14. 遞歸 ### 文章 - :book: [求解釋 js 遞歸 —— SegmentFault](https://segmentfault.com/q/1010000003942347) - :book: [JavaScript 中的遞歸 —— 掘金](https://juejin.im/post/5948c0d8fe88c2006a939e2a) - :book: [遞歸（上）－《JavaScript 輕量級函數式編程》 —— 掘金](https://juejin.im/post/59c1d91d6fb9a00a53275f79) - :book: [遞歸（下）－《JavaScript 輕量級函數式編程》 —— 掘金](https://juejin.im/post/59c87fb46fb9a00a437b1a2e) - :book: [尾調用和尾遞歸 —— 掘金](https://juejin.im/post/5acdd7486fb9a028ca53547c) - :book: [幾個經典遞歸問題用 js 實現 —— CSDN](https://blog.csdn.net/qianqianstd/article/details/75807462) - :book: [遞歸函數的幾個例子 —— CSDN](https://blog.csdn.net/x_i_xw/article/details/72026868) **[:arrow_up: 返回目錄](#目錄)** --- ## 15. 算法 ### 文章 - :book: [十大經典排序算法總結（JavaScript 描述） —— 掘金](https://juejin.im/post/57dcd394a22b9d00610c5ec8) - :book: [在 JavaScript 中學習數據結構與算法 —— 掘金](https://juejin.im/post/594dfe795188250d725a220a#comment) - :book: [JS 中可能用得到的全部的排序算法 —— 掘金](https://juejin.im/post/58c9d5fb1b69e6006b686bce) - :book: [JS 家的排序算法 —— 簡書](https://www.jianshu.com/p/1b4068ccd505) - :book: [前端常見算法的 JS 實現 —— SegmentFault](https://segmentfault.com/a/1190000008593715) - :book: [前端面試中的常見的算法問題 ——蒲小花的博客](https://www.jackpu.com/qian-duan-mian-shi-zhong-de-chang-jian-de-suan-fa-wen-ti/) ### 視頻 - :tv: [Javascript 實現二叉樹算法 —— 慕課網](https://www.imooc.com/learn/888) **[:arrow_up: 返回目錄](#目錄)** --- ## 16. 數據結構 ### 文章 - :book: [來我們淺談一下 js 的數據結構 —— 簡書](https://www.jianshu.com/p/5e0e8d183102) - :book: [JavaScript 中的算法與數據結構 —— 簡書](https://www.jianshu.com/nb/16835496) - :book: [學 JS 必看-JavaScript 數據結構深度剖析 —— 大道至簡的博客](http://blog.sina.com.cn/s/blog_7b9c5e4101017mjt.html) - :book: [js 中基礎數據結構數組去重問題 —— 掘金](https://juejin.im/entry/586effe0da2f600053d85a9a) ### 視頻 - :tv: :tv: [JavaScript 數據結構-運算符 —— 樂視](http://www.le.com/ptv/vplay/27606964.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 17. 消息隊列和事件循環 ### 文章 - :book: [并發模型與事件循環 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop) - :book: [JavaScript 運行機制詳解：再談 Event Loop —— 阮一峰](http://www.ruanyifeng.com/blog/2014/10/event-loop.html) - :book: [深入理解 JavaScript 事件循環 —— 博客園](https://www.cnblogs.com/dong-xu/p/7000163.html) - :book: [深入淺出 Javascript 事件循環機制 —— 知乎](https://zhuanlan.zhihu.com/p/26229293) - :book: [JS 事件循環機制（event loop）之宏任務、微任務 —— SegmentFault](https://segmentfault.com/a/1190000014940904#articleHeader7) - :book: [JavaScript：徹底理解同步、異步和事件循環 —— SegmentFault](https://segmentfault.com/a/1190000004322358) - :book: [從瀏覽器多進程到 JS 單線程，JS 運行機制最全面的一次梳理 —— 掘金](https://juejin.im/post/5a6547d0f265da3e283a1df7) **[:arrow_up: 返回目錄](#目錄)** --- ## 18. setTimeout, setInterval 和 requestAnimationFrame ### 文章 - :book: [Window setTimeout() 方法 —— 菜鳥教程](http://www.runoob.com/jsref/met-win-settimeout.html) - :book: [Window setInterval() 方法 —— 菜鳥教程](http://www.runoob.com/jsref/met-win-setinterval.html) - :book: [關于 setTimeout —— 掘金](https://juejin.im/post/5aa4c47af265da239866e236) - :book: [你不知道的 Javascript：有趣的 setTimeout —— 掘金](https://juejin.im/post/5a77f8ce5188257a6d635d76) - :book: [原來你是這樣的 setTimeout —— 掘金](https://juejin.im/entry/5861ebf01b69e6006ce61d38) - :book: [setTimeout() 和 setInterval() 本質區別在哪里？ —— SegmentFault](https://segmentfault.com/q/1010000005989491) - book: [window.requestAnimationFrame —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame) - :book: [requestAnimationFrame 知多少？ —— 博客園](http://www.cnblogs.com/onepixel/p/7078617.html) - :book: [CSS3 動畫那么強，requestAnimationFrame 還有毛線用？ —— 張鑫旭](https://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%e5%8a%a8%e7%94%bb%e7%ae%97%e6%b3%95/) - :book: [「JavaScript 定時器」setInterval、setTimeout 和 requestAnimationFrame 淺析 —— SegmentFault](https://segmentfault.com/a/1190000014661035) - :book: [翻譯：setInterval 與 requestAnimationFrame 的時間間隔測試 —— SegmentFault](https://segmentfault.com/a/1190000000386368) - :book: [阿里前端面試題：requestAnimationFrame 實現類似 setInterval 的計時器 —— SegmentFault](https://segmentfault.com/q/1010000013909430) ### 視頻 - :tv: [setTimeout 和 setInterval —— 優酷](http://v.youku.com/v_show/id_XNTA4OTQ0NzA0.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 19. 繼承, 多態和代碼復用 ### 文章 - :book: [JS 面向對象編程之：封裝、繼承、多態 —— 博客園](https://www.cnblogs.com/Leo_wl/p/5734794.html) - :book: [Javascript 的繼承與多態 —— 簡書](https://www.jianshu.com/p/5cb692658704) - :book: [js:面向對象編程，帶你認識封裝、繼承和多態 —— 掘金](https://juejin.im/post/59396c96fe88c2006afc2707) - :book: [JavaScript 中的“多繼承” —— 掘金](https://zhuanlan.zhihu.com/p/34693209) - :book: [代碼復用模式 —— github](https://github.com/TooBug/javascript.patterns/blob/master/chapter6.markdown) - :book: [深入理解 JavaScript：代碼復用模式(推薦篇) —— 湯姆大叔](http://www.cnblogs.com/TomXu/archive/2012/04/24/2438050.html) - :book: [深入理解 JavaScript：代碼復用模式(避免篇) —— 湯姆大叔](https://www.cnblogs.com/TomXu/archive/2012/04/23/2438005.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 20. 按位操作符, 類數組對象和類型化數組 ### 文章 - :book: [按位操作符 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) - :book: [類數組對象 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays) - :book: [類型化數組 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) - :book: [JavaScript ArrayBuffer 淺析 —— 博客園](https://www.cnblogs.com/gradolabs/p/4762134.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 21. DOM 樹和渲染過程 ### 文章 - :book: [如何創建一個 DOM 樹 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree) - :book: [HTML DOM 節點 —— W3school](http://www.w3school.com.cn/htmldom/dom_nodes.asp) - :book: [DOM 概述 —— 阮一峰](http://javascript.ruanyifeng.com/dom/node.html) - :book: [《JavaScript 闖關記》之 DOM（上）—— 掘金](https://juejin.im/post/583cbbfa61ff4b006ccc41fe) - :book: [《JavaScript 闖關記》之 DOM（下）—— 掘金](https://juejin.im/post/583cbc4961ff4b006ccc44fb) - :book: [掌握 DOM 操作 —— 掘金](https://juejin.im/entry/58314efd8ac2470061bb30fd) - :book: [操作 DOM —— 廖雪峰](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434500494451273e6b3dec9d411d9ba841dee8caec45000) - :book: [原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的 —— 掘金](https://juejin.im/post/59c60691518825396f4f71a1) ### 視頻 - :tv: [DOM 探索之基礎詳解篇 —— 慕課網](https://www.imooc.com/learn/488) - :tv: [DOM 事件探秘 —— 慕課網](https://www.imooc.com/learn/138) - :tv: [jQuery 基礎(二)DOM 篇 —— 慕課網](https://www.imooc.com/learn/530) - :tv: [JS 操作 DOM 對象屬性和方法 —— 愛奇藝](http://www.iqiyi.com/w_19rr19s08l.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 22. new 與構造函數, instanceof 與實例 ### 文章 - :book: [構造函數與 new 命令 —— 阮一峰](http://javascript.ruanyifeng.com/oop/basic.html) - :book: [Javascript 面向對象編程（二）：構造函數的繼承 —— 阮一峰](http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html) - :book: [完整原型鏈詳細圖解(構造函數、原型、實例化對象) —— CSDN](https://blog.csdn.net/SpicyBoiledFish/article/details/71123162) - :book: [JavaScript 中構造函數與 new 操作符的實例詳解 —— PHP 中文網](http://www.php.cn/js-tutorial-376246.html) - :book: [構造函數、實例、原型、原型鏈之間的關系 —— CSDN](https://blog.csdn.net/yin_991/article/details/80954453) - :book: [深入理解 JS—instanceof 和原型鏈 —— CSDN](https://blog.csdn.net/cecilia620/article/details/71158048) - :book: [前端基礎進階（九）：詳解面向對象、構造函數、原型與原型鏈 —— 簡書](https://www.jianshu.com/p/15ac7393bc1f) - :book: [js 用 new 實例化對象與直接調用的 this 的區別 —— 簡書](https://www.jianshu.com/p/60ffc4831bff) - :book: [JavaScript 并非所有的東西都是對象 —— justjavac](http://justjavac.com/javascript/2012/12/22/javascript-values-not-everything-is-an-object.html) - :book: [JavaScript instanceof 運算符深入剖析 —— IBM](https://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/) ### 視頻 - :tv: [改良版的構造函數 —— 樂視](http://www.le.com/ptv/vplay/27766889.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 23. 原型繼承與原型鏈 ### 文章 - :book: [繼承與原型鏈 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) - :book: [構造函數、原型與原型鏈 —— github](https://github.com/bigdots/blog/issues/1) - :book: [原型及原型鏈 —— github(1269 Star)](https://github.com/stone0090/javascript-lessons/tree/master/2.5-Prototype) - :book: [理清 javascript 中的面向對象(一) 原型繼承 —— SegmentFault](https://segmentfault.com/a/1190000004282206) - :book: [JavaScript：繼承和原型鏈(譯) —— justjavac](http://justjavac.com/2015/12/09/inheritance-and-the-prototype-chain.html) - :book: [三張圖搞懂 JavaScript 的原型對象與原型鏈 —— 博客園](http://www.cnblogs.com/shuiyi/p/5305435.html) - :book: [一張圖讓你搞懂 JavaScript 的繼承與原型鏈 —— CSDN](https://blog.csdn.net/the__apollo/article/details/76774698) - :book: [JS 高級--原型鏈(一看就懂，但 18 歲以下請繞道) —— CSDN](https://blog.csdn.net/xiaotao_css/article/details/72782416) - :book: [原型繼承 —— 廖雪峰](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000) - :book: [JS 原型鏈與繼承別再被問倒了 —— 掘金](https://juejin.im/post/58f94c9bb123db411953691b) - :book: [征服 JavaScript 面試系列：類繼承和原型繼承的區別 —— 掘金](https://juejin.im/entry/5885db221b69e600592253e7) - :book: [JavaScript深入之從原型到原型鏈 —— 冴羽](https://github.com/mqyqingfeng/Blog/issues/2) ### 視頻 - :tv: [JS 高級-07-原型鏈繼承 —— 樂視](http://www.le.com/ptv/vplay/27552753.html) - :tv: [JS 原型對象和原型鏈簡介 —— 騰訊視頻](https://v.qq.com/x/page/b0511nwa7d3.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 24. Object.create 和 Object.assign ### 文章 - :book: [Object.create —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create) - :book: [Object.assign —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) - :book: [Object.create vs Object.assign —— 慕課網手記](https://www.imooc.com/article/17591) - :book: [JS 中的 Object.assign()、Object.create()、Object.defineProperty() —— CSDN](https://blog.csdn.net/DeepLies/article/details/52915143) - :book: [es6 中 object.create()和 object.assign() —— 風信子博客](http://www.onlyfordream.cn/2018/03/19/es6%E4%B8%ADobject-create%E5%92%8Cobject-assign/) - :book: [Object-Assign-Deep —— github](https://github.com/saikojosh/Object-Assign-Deep) **[:arrow_up: 返回目錄](#目錄)** --- ## 25. 工廠函數和類 ### 文章 - :book: [類 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes) - :book: [類和實例 —— 廖雪峰](https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138682004077376d2d7f8cc8a4e2c9982f92788588322000) - :book: [Javascript 定義類（class）的三種方法 —— 阮一峰](http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html) - :book: [【譯】ES6 的工廠函數 —— 掘金](https://juejin.im/post/59c8c8756fb9a00a681ae5bd) - :book: [JavaScript 創建對象之單例、工廠、構造函數模式 —— 掘金](https://juejin.im/entry/587992c961ff4b0065edf1ff) **[:arrow_up: 返回目錄](#目錄)** --- ## 26. 設計模式 ### 文章 - :book: [設計模式 —— 阮一峰](http://javascript.ruanyifeng.com/library/designpattern.html) - :book: [JavaScript 設計模式 —— 掘金](https://juejin.im/post/59df4f74f265da430f311909) - :book: [學用 JavaScript 設計模式 —— 極客學院](http://wiki.jikexueyuan.com/project/javascript-design-patterns/) - :book: [[面試專題]JS 設計模式 —— SegmentFault](https://segmentfault.com/a/1190000010914032) - :book: [JavaScript Patterns 中譯本 —— github](https://github.com/lxj/javascript.patterns) ### 視頻 - :tv: [HTML5 課程大綱 2-11JS 設計模式](https://tv.sohu.com/v/dXMvMjQwNzYwNzQ4Lzg5NzM2MDA3LnNodG1s.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 27. Memoization ### 文章 - :book: [JavaScript Memoization —— 司徒正美](https://www.cnblogs.com/rubylouvre/archive/2009/08/06/1540678.html) - :book: [memoization 提升遞歸效率 —— 博客園](https://www.cnblogs.com/yingshuizy/p/4517102.html) - :book: [如何提升 JavaScript 的遞歸效率 —— 51CTO](http://developer.51cto.com/art/201010/231513.htm) - :book: [JavaScript 高級技巧 Memoization —— SegmentFaut](https://segmentfault.com/a/1190000016703106) **[:arrow_up: 返回目錄](#目錄)** --- ## 28. 純函數, 函數副作用和狀態變化 ### 文章 - :book: [純函數(Pure Function) —— React.js 小書](http://huziketang.mangojuice.top/books/react/lesson32) - :book: [JavaScript Functional Programming：純函數 —— 寧皓網](https://ninghao.net/blog/4634) - :book: [js 函數的副作用分析 —— 腳本之家](https://www.jb51.net/article/28079.htm) - :book: [如何使用純函數式 JavaScript 處理臟副作用 —— 掘金](https://juejin.im/post/5b82bdb351882542e241ed32?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com) - :book: [原生 JavaScript 實現 state 狀態管理系統 —— 博客園](http://www.cnblogs.com/zhangycun/p/9403335.html) - :book: [JavaScript 函數式編程 —— @BuptStEve](https://github.com/BuptStEve/blog/issues/10) **[:arrow_up: 返回目錄](#目錄)** --- ## 29. 耗性能操作和時間復雜度 ### 文章 - :book: [時間復雜度 O(log n) 意味著什么？ —— 掘金](https://juejin.im/entry/593f56528d6d810058a355f4) - :book: [算法的時間復雜度和空間復雜度 —— 掘金](https://juejin.im/entry/5a49f7d36fb9a0450a67b269) - :book: [算法（一）時間復雜度 —— 掘金](https://juejin.im/post/58d15f1044d90400691834d4) - :book: [Big O Search Algorithms in JavaScript —— Bradley Braithwaite](http://www.bradoncode.com/blog/2012/04/big-o-algorithm-examples-in-javascript.html) - :book: [Time Complexity Analysis in JavaScript — Jennifer Bland](https://www.jenniferbland.com/time-complexity-analysis-in-javascript/) - **[:arrow_up: 返回目錄](#目錄)** --- ## 30. JavaScript 引擎 ### 文章 - :book: [javascript 引擎 —— 百度百科](https://baike.baidu.com/item/javascript引擎/5356108) - :book: [V8(JavaScript 引擎) —— 百度百科](https://baike.baidu.com/item/V8/6178125) - :book: [圖解搞懂 JavaScript 引擎 Event Loop —— 掘金](https://juejin.im/post/5a6309f76fb9a01cab2858b1)3 - :book: [V8 JavaScript 引擎：高性能的 ES2015+ —— justjavac](https://segmentfault.com/a/1190000010819020) - :book: [10 分鐘理解 JS 引擎的執行機制 —— SegmentFaut](https://segmentfault.com/a/1190000012806637) - :book: [V8 javascript 引擎 —— 博客園](https://www.cnblogs.com/weirdoQi/p/6609811.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 31. 二進制, 十六進制, 十進制, 科學記數法 ### 文章 - :book: [二、八、十、十六進制轉換(圖解篇) —— 博客園](http://www.cnblogs.com/gaizai/p/4233780.html) - :book: [JavaScript 讀寫二進制數據 —— 掘金](https://juejin.im/post/5b93dadaf265da0a857a58a3) ### 視頻 - :tv: [二進制、十進制、十六進制互相轉化很難嗎？ —— 百度視頻](http://baishi.baidu.com/watch/7873060963471478456.html) **[:arrow_up: 返回目錄](#目錄)** --- ## 32. 偏函數, 柯里化, Compose 和 Pipe ### 文章. - :book: [Javascript 函數式編程之偏函數 —— CSDN](https://blog.csdn.net/qq_42129063/article/details/81874314) - :book: [JavaScript 專題之偏函數 —— SegmentFault](https://segmentfault.com/a/1190000010686144) - :book: [柯里化和偏函數有什么區別？ —— SegmentFault](https://segmentfault.com/q/1010000008626058) - :book: [Javascript 偏函數與柯里化 —— CSDN](https://blog.csdn.net/neweastsun/article/details/75947785) - :book: [柯里化(curry) —— JS 函數式編程指南](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch4.html) - :book: [代碼組合(compose) —— JS 函數式編程指南](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch5.html) - :book: [關于 javascript 函數式編程中 compose 的實現 —— SegmentFault](https://segmentfault.com/a/1190000008394749) - :book: [實現 compose 的五種思路 —— SegmentFault](https://segmentfault.com/a/1190000011447164) - :book: [JavaScript 函數式編程之函數組合函數 compose 和 pipe 的實現 —— SegmentFault](https://segmentfault.com/a/1190000015102804) - :book: [JavaScript 輕量級函數式編程-第 4 章:組合函數 ——掘金](https://juejin.im/post/59a62f3d6fb9a0248363fd9d#comment) - :book: [JavaScript 函數式編程（二） —— @BuptStEve](https://github.com/BuptStEve/blog/issues/11) **[:arrow_up: 返回目錄](#目錄)** --- ## 33. 代碼整潔之道 ### 文章 - :book: [[譯] JavaScript 代碼整潔之道 —— 邊城](https://www.zcfy.cc/article/clean-code-javascript-readme-md-at-master-ryanmcdermott-clean-code-javascript-github-2273.html) - :book: [Javascript 編程風格 —— 阮一峰](http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html) - :book: [重構 - 代碼整潔之道 —— 掘金](https://juejin.im/post/5a5b2a5c6fb9a01cbc6e59f9) - :book: [讓你的代碼更簡短，更整潔，更易讀的 ES6 小技巧 —— 掘金](https://juejin.im/post/5a7d71836fb9a063435ecf51) - :book: [Web 前端：11 個讓你代碼整潔的原則 —— 伯樂在線](http://blog.jobbole.com/23617/) - :book: [Clean Code concepts adapted for JavaScript —— ryanmcdermott](https://github.com/ryanmcdermott/clean-code-javascript) <br> **[:arrow_up: 返回目錄](#目錄)** ---