每个 JavaScript 工程师都应懂的33个概念
简介
这个项目是为了帮助开发者掌握JavaScript概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。
本篇文章是参照@leonardomso创立,英文版项目地址在这里。由于原版资源都要翻墙,所以本人创立一个中文版,附上关于这些概念在国内的一些文章和视频。若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除。
若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除。
- 文章的排序优化,前面的文章是介绍概念,后面的文章是深入解读。
- 将原文的"高阶函数"和"map,reduce,filter"合并为"map,reduce,filter等高阶函数"
- 增加"promise"概念(替换删除的"高阶函数")
1.调用堆栈
文章
- CallStack—MDN
- [译]JavaScript如何工作:对引擎、运行时、调用堆栈的概述
- [译]理解JavaScript中的执行上下文和执行栈
- 这一次,彻底弄懂JavaScript执行机制
- 解读JavaScript之引擎、运行时和堆栈调用——开源中国
- Tasks,microtasks,queuesandschedules——JakeArchibald
视频
- Whatistheeventloopanyway?——腾讯视频(英文字幕)
- UnderstandingTheJavaScriptCallStack,EventQueue,EventTable,&EventLoop——Bilibili
- JS中的变量提升、堆栈内存及闭包详解——Acfun
- 事件循环模型——PHP中文网
2.原始类型
文章
- 原始数据——MDN
- ECMAScript原始类型——W3school
- HownumbersareencodedinJavaScript——Dr.Axe
- 每一个JavaScript开发者应该了解的浮点知识——颜海镜
- JavaScript标准参考教程(基本语法之数值)——阮一峰
- TheSecretLifeofJavaScriptPrimitives——AngusCroll
视频
- javascript六种数据类型
- javascript视频教程(数据类型)——PHP中文网
3.值类型和引用类型
文章
- ECMAScript引用类型——W3school
- js中的值类型和引用类型的区别
- JavaScript的值传递和引用传递
- PrimitiveTypes&ReferenceTypesinJavaScript——BranvanderMeer
- JavaScript:PassingbyValueorbyReference——CSDN
- js值引用和值复制——SegmentFault
- js-引用和复制(传值和传址)——CSDN
4.隐式,显式,名义和鸭子类型
文章
- ECMAScript类型转换——W3school
- JavaScript的怪癖1:隐式类型转换——justjavac
- JavaScript运算符规则与隐式类型转换详解——掘金
- 聊一聊JS中的隐式类型转换——SegmentFault
- 有趣的JavaScript隐式类型转换——博客园
- JavaScript显式类型转换与隐式类型转换——CSDN
- 你不知道的JavaScript(中卷)强制类型转换——简书
- 你懂JavaScript嗎?#8強制轉型——cythilya
- 动态类型语言和鸭子类型——曾探
- Nominal&StructuralTyping——flow
- WhatexactlyisTypeCoercioninJavascript?——stackoverflow
- YouDon'tKnowJS:Types&Grammar——github
视频
- javascript隐式转换——慕课网
- Javascript基础加强-类型转换——黑马程序员
5.==vs===,typeofvsinstanceof
文章
- JavaScript中的相等性判断——MDN
- js中==和===的区别——掘金
- ==vs===inJavascript——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深入之词法作用域和动态作用域——掘金
- 深入理解闭包之前置知识→作用域与词法作用域——掘金
- Whatislexicalscope?——stackoverflow
- YouDon'tKnowJS:Scope&Closures——KyleSimpson
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中的ExpressionvsStatement一文——SegmentFault
- ExpressionsversusstatementsinJavaScript——Dr.Axel
11.变量提升
文章
- JavaScript变量提升——菜鸟教程
- ES6变量作用域与提升:变量的生命周期详解——掘金
- [翻译]JavaScriptScopingandHoisting——SegmentFault
- JavaScriptScopingandHoisting——BenCherry
12.Promise
文章
- 使用promises——MDN
- Promise——MDN
- Promie—廖雪峰
- JavaScriptPromise:去而复返——司徒正美
- (上面的原文)JavaScriptPromise:简介——WebFundamentals
- 1分钟读完《10分钟学会JavaScript的Async/Await》——justjavac
- JavaScriptPromise迷你书(中文版)
- 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运行机制详解:再谈EventLoop——阮一峰
- 深入理解JavaScript事件循环——博客园
- 深入浅出Javascript事件循环机制——知乎
- JS事件循环机制(eventloop)之宏任务、微任务——SegmentFault
- JavaScript:彻底理解同步、异步和事件循环——SegmentFault
18.setTimeout,setInterval和requestAnimationFrame
文章
- WindowsetTimeout()方法——菜鸟教程
- WindowsetInterval()方法——菜鸟教程
- 关于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
- JavaScriptArrayBuffer浅析——博客园
21.DOM树和渲染过程
文章
- 如何创建一个DOM树——MDN
- HTMLDOM节点——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
- JavaScriptinstanceof运算符深入剖析——IBM
视频
- 改良版的构造函数——乐视
23.原型继承与原型链
文章
- 继承与原型链——MDN
- 构造函数、原型与原型链——github
- 原型及原型链——github(1269Star)
- 理清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.createvsObject.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
- JavaScriptPatterns中译本——github
视频
- HTML5课程大纲2-11JS设计模式
27.Memoization
文章
- JavaScriptMemoization——司徒正美
- memoization提升递归效率——博客园
- 如何提升JavaScript的递归效率——51CTO
- JavaScript高级技巧Memoization——SegmentFaut
28.纯函数,函数副作用和状态变化
文章
- 纯函数(PureFunction)——React.js小书
- JavaScriptFunctionalProgramming:纯函数——宁皓网
- js函数的副作用分析——毛票票
- 如何使用纯函数式JavaScript处理脏副作用——掘金
- 原生JavaScript实现state状态管理系统——博客园
29.耗性能操作和时间复杂度
文章
- 时间复杂度O(logn)意味着什么?——掘金
- 算法的时间复杂度和空间复杂度——掘金
- 算法(一)时间复杂度——掘金
- BigOSearchAlgorithmsinJavaScript——BradleyBraithwaite
- TimeComplexityAnalysisinJavaScript—JenniferBland
30.JavaScript引擎
文章
- javascript引擎——百度百科
- V8(JavaScript引擎)——百度百科
- 图解搞懂JavaScript引擎EventLoop——掘金3
- V8JavaScript引擎:高性能的ES2015+——justjavac
- 10分钟理解JS引擎的执行机制——SegmentFaut
- V8javascript引擎——博客园
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个让你代码整洁的原则——伯乐在线