Javascript 中你最应该知道的 33 个概念

你觉得自己对JavaScript了解多少?你可能知道如何编写函数，理解简单的算法，甚至可以编写类。但是你知道类型化数组是什么吗?

你现在不需要知道所有这些概念，但你最终会在以后的职业生涯中需要它们。这就是为什么我建议把这个列表收藏起来，因为你可能会遇到其中一个，然后你会需要一个教程来完全理解它。

我们归纳了 33 个前端开发者需要知道的 Javascript 核心概念。希望当你不理解这些概念的时候能去看看它们详细的介绍(我们也在每个概念的末尾给出了详细的介绍地址)。

1. 调用堆栈

调用栈是一种解释器机制(就像网页浏览器中的JavaScript解释器)，用来跟踪它在调用多个函数的脚本中的位置——当前正在运行的函数以及在该函数中调用了哪些函数等等。

详细: https://developer.mozilla.org/zh-CN/docs/Glossary/Call_stack

2. 原始值

除了对象之外，所有类型都定义了不可变值(即不能更改的值)。例如(与C不同)，string是不可变的。我们将这些类型的值称为“基本值”。

详细: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures#原始值

3.值类型和引用类型

赋值为非原始值的变量将被赋予该值的引用。该引用指向对象在内存中的位置。变量实际上并不包含值。

详细：https://juejin.cn/post/6844904198484541454

4. 类型转换

类型强制意味着，当操作符的操作数是不同类型时，其中一个操作数将被转换为另一个操作数类型的“等效”值。

详细： https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript

5. 双等号（==）和三等号(===)

JavaScript有两种看起来相似但又非常不同的方法来测试是否相等。可以用==或===来测试是否相等。

详细：https://segmentfault.com/a/1190000013267129

6. 函数作用域，块作用域和词法作用域

在 ES5 及之前版本，JavaScript 只拥有函数作用域，没有块作用域（with和 try...catch 除外）。在 ES6 中，JS 引入了块作用域，{ }内是单独的一个作用域。采用 let或者 const 声明的变量会挟持所在块的作用域，也就是说，这声明关键字会将变量绑定到所在的任意作用域中（通常是 {...}内部）。

详细：https://segmentfault.com/a/1190000008440514

7. 表达式和语句

进行这种区分很重要，因为表达式可以像语句一样工作，这就是为什么我们也有表达式语句。但是，在另一方面，语句不能像表达式那样工作。

详细：cnblogs.com/1549983239yifeng/p/14598951.html

8. IIFE，模块和命名空间

一种常用的函数编码模式有一个奇特的名字:立即调用函数表达式。或者更广为人知的IIFE，发音为“iffy”。

详细：https://developer.mozilla.org/zh-CN/docs/Glossary/IIFE

9. 消息队列和事件循环

“异步JavaScript和单线程?”答案是JavaScript语言线程和异步行为不是JavaScript语言本身的一部分,而是建立在核心的浏览器中的JavaScript语言(或编程环境)和通过浏览器访问api。

详细：https://www.bbsmax.com/A/kjdwajrGJN/

10. setTimeout, setInterval和requestAnimationFrame

我们可能决定不立即执行某个函数，而是在以后的某个时间执行。这就是所谓的“电话预约”。

详细：https://www.cnblogs.com/ling-nl/p/14245218.html

11. Javascript 引擎

为Web编写代码有时感觉有点神奇，因为开发人员编写了一系列字符，就像魔术一样，这些字符在浏览器中变成了具体的图像、文字和动作。理解这种技术可以帮助开发人员更好地理解Javascript的运行机制。

JavaScript引擎的组成部分有哪些?

1. 编译器。主要工作是将源代码编译成抽象语法树，然后在某些引擎中还包含将抽象语法树转换成字节码。

2. 解释器。在某些引擎中，解释器主要是接受字节码，解释执行这个字节码，然后也依赖来及回收机制等。

3. JIT工具。一个能够JIT的工具，将字节码或者抽象语法树转换成本地代码，当然它也需要依赖牢记垃圾回收器和分析工具(profiler)。它们负责垃圾回收和收集引擎中的信息，帮助改善引擎的性能和功效。

详细：https://www.cnblogs.com/onepixel/p/5090799.html

12. 位操作符，类型数组和数组缓冲区

对于计算机来说，所有的都是1和0。它不操作数字、字符或字符串，它只使用二进制数字(位)。简而言之，一切都是以二进制形式存储的。然后计算机使用诸如UTF-8这样的编码将保存的比特组合映射为字符、数字或不同的符号(ELI5版本)。

详细：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#位运算符

13. DOM 和 渲染树

文档对象模型(Document Object Model)，通常称为DOM，是使网站具有交互性的重要组成部分。它是一个界面，允许编程语言操作网站的内容、结构和风格。JavaScript是在internet浏览器中连接到DOM的客户端脚本语言。

详细：https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work

14. 原型继承

JavaScript是一种基于原型的语言，这意味着对象属性和方法可以通过具有克隆和扩展能力的通用对象来共享。这被称为原型继承，与类继承不同。

详细：https://developer.mozilla.org/zh-CN/docs/learn/javascript/objects/classes_in_javascript#原型式的继承

15. this, call, apply and bind

这些函数对每个JavaScript开发人员都非常重要，几乎在每个JavaScript库或框架中都使用。

详细：

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

16. new、Constructor、instanceof和Instances

每个JavaScript对象都有一个原型。JavaScript中的所有对象都从原型中继承了它们的方法和属性。

详细：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes

17. 原型继承和原型链

对于使用基于类的语言(如Java或c++)的开发人员来说，JavaScript有点令人困惑，因为它是动态的，本身不提供类实现(class关键字是在ES2015中引入的，但它是语法上的糖，JavaScript仍然是基于原型的)。

详细：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

18. Object.create 和 Object.assign

对象。create方法是JavaScript中创建新对象的方法之一。

详细：

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

19. map, reduce 和 filter

即使你不知道函数式编程是什么，你也可能使用过map、filter和reduce，因为它们非常有用，可以让你编写更清晰的逻辑，从而让你的代码不那么糟糕。

20. 纯函数，副作用，状态突变和事件冒泡

我们的很多bug都是源于IO相关的，数据突变，副作用。这些代码遍布我们的代码库——比如接受用户输入，通过http调用接收意外响应，或者写入文件系统。不幸的是，这是一个残酷的现实，我们应该习惯处理这些bug。

详细：https://segmentfault.com/a/1190000018524543

21. 闭包

闭包是将一个函数捆绑在一起(封装在一起)，并引用其周围的状态(词法环境)的组合。换句话说，闭包使您能够从内部函数访问外部函数的作用域。在JavaScript中，闭包是在每次创建函数时创建的。

详细：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

22. 高阶函数

JavaScript可以接受高阶函数。处理高阶函数的能力以及其他特性使JavaScript成为非常适合函数式编程的编程语言之一。

高阶函数是至少满足下面一个条件的函数：

1. 接收一个或多个函数作为参数。比如filter函数
2. 返回一个函数。 比如bind函数

详细：https://segmentfault.com/a/1190000018528025

23. 递归

一种函数调用自身的操作。递归被用于处理包含有更小的子问题的一类问题。一个递归函数可以接受两个输入参数：一个最终状态（终止递归）或一个递归状态（继续递归）。

24. 集合和Generator

Generator对象由Generator函数返回，它符合可迭代对象协议和迭代器协议。

详细：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator

25. Promises

Promise对象表示异步操作的最终完成(或失败)及其结果值。

详细：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

26. async/await

有一种特殊的语法以一种更舒适的方式处理承诺，称为“async/await”。它非常容易理解和使用。

await 操作符用于等待一个Promise 对象。它只能在异步函数 async function中使用。

详细：

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/async_function

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

27. 数据结构

Javascript每天都在发展。随着React、Angular、Vue、NodeJS、Electron、React Native等框架和平台的快速发展，在大型应用中使用javascript已经变得非常普遍。

JavaScript 语言中内建的数据结构及其属性，它们可以用来构建其他的数据结构。

详细：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

28. 时间复杂度

这是一个非常常见的面试问题。简而言之，它是算法运行时间的数学表达式取决于输入时间的长短，通常谈论的是最坏的情况。

29. 算法

在数学和计算机科学中，算法是定义明确的指令的有限序列，通常用于解决一类特定的问题或执行计算。

详细：https://www.cnblogs.com/xinkuiwu/category/1594426.html

30. 继承、多态和重用

类继承是一个类扩展另一个类的一种方式，因此我们可以在现有功能的基础上创建新的功能。

31. 设计模式

每个开发人员都努力编写可维护、可读和可重用的代码。随着应用程序变得越来越大，代码结构变得越来越重要。设计模式被证明是解决这一挑战的关键——为特定环境中的常见问题提供组织结构。

32. 柯里化

函数组合是将多个简单函数组合成一个更复杂函数的机制。

详细：https://zhuanlan.zhihu.com/p/74585560

33. Clean Code

编写干净、可理解和可维护的代码是每个开发人员都必须掌握的关键技能。

详细：https://zhuanlan.zhihu.com/p/102367865