每个 JavaScript 工程师都应懂的33个概念
简介
这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备，但在未来学习（JavaScript）中，可以作为一篇指南。
本篇文章是参照 @leonardomso 创立，英文版项目地址在这里。 由于原版资源都要翻墙，所以本人创立一个中文版，附上关于这些概念在国内的一些文章和视频。 若有觉得更好的文章或者视频，可以贡献出来，觉得有误的，请联系我删除。
若有觉得更好的文章或者视频，可以贡献出来，觉得有误的，请联系我删除。
- 文章的排序优化，前面的文章是介绍概念，后面的文章是深入解读。
- 将原文的 "高阶函数" 和 "map, reduce, filter" 合并为 "map, reduce, filter 等高阶函数"
- 增加 "promise" 概念(替换删除的 "高阶函数")
1. 调用堆栈
文章
- 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. 原始类型
文章
- 原始数据 —— 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 的值传递和引用传递
- 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
视频
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 闭包 —— 掘金
视频
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 代码 —— 博客园
视频
13. 立即执行函数, 模块化, 命名空间
文章
- Javascript 模块化编程（一）：模块的写法 —— 阮一峰
- javascript 模块化编程-详解立即执行函数表达式 —— 简书
- Javascript 的匿名函数与自执行 —— 掘金
- 前端模块化——技术选型 —— SegmentFault
- 谈谈 Js 前端模块化规范 —— SegmentFault
14. 递归
文章
- 求解释 js 递归 —— SegmentFault
- JavaScript 中的递归 —— 掘金
- 递归（上）－《JavaScript 轻量级函数式编程》 —— 掘金
- 递归（下）－《JavaScript 轻量级函数式编程》 —— 掘金
- 尾调用和尾递归 —— 掘金
- 几个经典递归问题用 js 实现 —— CSDN
- 递归函数的几个例子 —— CSDN
15. 算法
文章
- 十大经典排序算法总结（JavaScript 描述） —— 掘金
- 在 JavaScript 中学习数据结构与算法 —— 掘金
- JS 中可能用得到的全部的排序算法 —— 掘金
- JS 家的排序算法 —— 简书
- 前端常见算法的 JS 实现 —— SegmentFault
- 前端面试中的常见的算法问题 ——蒲小花的博客
视频
16. 数据结构
文章
- 来我们浅谈一下 js 的数据结构 —— 简书
- JavaScript 中的算法与数据结构 —— 简书
- 学 JS 必看-JavaScript 数据结构深度剖析 —— 大道至简的博客
- js 中基础数据结构数组去重问题 —— 掘金
视频
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
视频
19. 继承, 多态和代码复用
文章
- JS 面向对象编程之：封装、继承、多态 —— 博客园
- Javascript 的继承与多态 —— 简书
- js:面向对象编程，带你认识封装、继承和多态 —— 掘金
- JavaScript 中的“多继承” —— 掘金
- 代码复用模式 —— github
- 深入理解 JavaScript：代码复用模式(推荐篇) —— 汤姆大叔
- 深入理解 JavaScript：代码复用模式(避免篇) —— 汤姆大叔
20. 按位操作符, 类数组对象和类型化数组
文章
21. DOM 树和渲染过程
文章
- 如何创建一个 DOM 树 —— MDN
- HTML DOM 节点 —— W3school
- DOM 概述 —— 阮一峰
- 《JavaScript 闯关记》之 DOM（上）—— 掘金
- 《JavaScript 闯关记》之 DOM（下）—— 掘金
- 掌握 DOM 操作 —— 掘金
- 操作 DOM —— 廖雪峰
- 原来 CSS 与 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 面试系列：类继承和原型继承的区别 —— 掘金
视频
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
视频
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. 二进制, 十六进制, 十进制, 科学记数法
文章
视频
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 个让你代码整洁的原则 —— 伯乐在线
相关推荐
-
每个 JavaScript 工程师都应懂的33个概念
简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的.它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南. 本篇文章是参照 @leonardomso 创立,英文版项目地址在这里. 由于原版资源都要翻墙,所以本人创立一个中文版,附上关于这些概念在国内的一些文章和视频. 若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除. 若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除. 文章的排序优化,前面的文章是介绍概念,后面的文章是深入解
-
【经验总结】编写JavaScript代码时应遵循的14条规律
本文讲述了编写JavaScript代码时应遵循的14条规律.分享给大家供大家参考,具体如下: 1. 总是使用 'var' 在javascript中,变量不是全局范围的就是函数范围的,使用"var"关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置"var"关键词,下面的例子将强调不这样做潜在的问题. 不使用 Var 造成的问题 var i=0; // This is good - creates a
-
WEB前端开发都应知道的jquery小技巧及jquery三个简写
一个简单技巧的集合,帮你提升 jQuery 技能.目前小编给大家整理了14个jquery小技巧. 目录结构 1回到顶部按钮 2预加载图片 3检查图片是否加载完毕 4自动修复损坏的图片 5Hover 上的 Class 开关 6禁用 input 字段 7停止链接加载 8淡入淡出/滑动开关 9简单的折叠效果 10将两个 Div 设为相同高度 11在新窗口打开外部链接 12找到文本元素 13切换可视与隐藏的触发器 下面给大家介绍每个小技巧的具体含义. 1.回到顶部按钮 通过使用 jQuery 中的 an
-
javascript 正则表达式相关应介绍
string 对象 1.str.match(RegExp) 在str中搜索匹配RegExp的字符串并保存在一个数组内返回, 如果RegExp不是全局设置(/g),仅匹配一次 复制代码 代码如下: ("abc112dwfwabcwef2abc3wfwabcasqf453abcqwf24j234h").match(/abc\d*/g); //结果 ["abc112", "abc", "abc3", "abc",
-
JavaScript中对循环语句的优化技巧深入探讨
循环是所有编程语言中最为重要的机制之一,几乎任何拥有实际意义的计算机程序(排序.查询等)都里不开循环. 而循环也正是程序优化中非常让人头疼的一环,我们往往需要不断去优化程序的复杂度,却因循环而纠结在时间复杂度和空间复杂度之间的抉择. 在 javascript 中,有3种原生循环,for () {}, while () {}和do {} while (),其中最为常用的要数for () {}. 然而for正是 javascript 工程师们在优化程序时最容易忽略的一种循环. 我们先来回顾一下for
-
有关JavaScript的10个怪癖和秘密分享
原文作者:Andy Croxall原文链接:Ten Oddities And Secrets About JavaScript翻译编辑:张鑫旭 数据类型和定义 1. Null是个对象 JavaScript众多类型中有个Null类型,它有个唯一的值null, 即它的字面量,定义为完全没有任何意义的值.其表现得像个对象,如下检测代码: 复制代码 代码如下: alert(typeof null); //弹出 'object' 如下截图: 尽管typeof值显示是"object",但null并
-
聊聊Javascript中try catch的2个作用
程序是从上到下顺序执行的,同时可以通过一些控制语句来改变执行的路线,受控制语句影响下,程序最终的执行路线就是控制流. js 里面的控制语句有 if.for.while.try catch 等,它们都会改变程序的走向. 程序是操作数据的,随着程序的运行,也就是控制流的前进而改变的数据叫做数据流. 很明显,数据流是依赖控制流的,程序分析里面的数据流分析也是要先做控制流分析. 比如这样一段代码: const a = 1; let b; if (a === 1) { b = '1111'; } else
-
每个程序员都需要学习 JavaScript 的7个理由小结
最近在和招聘经理交流现在找一个好的程序员有多难的时候,我渐渐意识到了现在编程语言越来越倾重于JavaScript.Web开发人员尤其如此.所以,如果你是一个程序员,那么你应该去学习JavaScript. 需求 我之所以这样说的主要原因是,随着JavaScript的日渐成熟,以及Node.js方案变得越来越可行,我们对JavaScript程序员的需求正在持续增长. JavaScript在需求比例上已经超过了C#,仅屈居于Java之下.如果你看看GitHub上可行的项目,你会发现JavaScript
-
彻底弄懂 JavaScript 执行机制
不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可以得出结论: javascript是按照语句出现的顺序执行的 看到这里读者要打人了:我难道不知道js是一行一行执行的?还用你说?稍安勿躁,正因为js是一行一行执行的,所以我们以为js都是这样的: let a = '1'; console.log(a); let b = '2'; console.lo
-
JavaScript prototype对象的属性说明
一.什么是JavaScript中对象的prototype属性 JavaScript中对象的prototype属性,是用来返回对象类型原型的引用的.我们使用prototype属性提供对象的类的一组基本功能.并且对象的新实例会"继承"赋予该对象原型的操作.但是这个prototype到底是怎么实现和被管理的呢?对于对象的prototype属性的说明,JavaScript手册上如是说:所有 JavaScript内部对象都有只读的 prototype 属性.可以向其原型中动态添加功能(属性和方法