正文

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

前端修罗场  2022-04-25  803

关键词：

你觉得自己对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#%E5%8E%9F%E5%A7%8B%E5%80%BC

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引擎的组成部分有哪些?

编译器。主要工作是将源代码编译成抽象语法树，然后在某些引擎中还包含将抽象语法树转换成字节码。
解释器。在某些引擎中，解释器主要是接受字节码，解释执行这个字节码，然后也依赖来及回收机制等。
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#%E4%BD%8D%E8%BF%90%E7%AE%97%E7%AC%A6

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#%E5%8E%9F%E5%9E%8B%E5%BC%8F%E7%9A%84%E7%BB%A7%E6%89%BF

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成为非常适合函数式编程的编程语言之一。

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

接收一个或多个函数作为参数。比如filter函数
返回一个函数。比如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

javascript开发者都应该知道的十个概念

...块级作用域之间的区别。了解变量在哪里是可用的，了解JavaScript引擎如何执行变量查找。 3.提升(Hoisting)认识到变量和函数的声明会被提升到声明所在的查看详情

node.js新手必须知道的4个javascript概念(代码片段)

...法成为现实，创造了node.js。Node.js是建立在Chrome强劲的V8JavaScript引擎上的服务器端框架。虽然最初是用C++编写的，但是应用程序通过JavaScript运行。这样一来，问题就解决了。一种语言就可以统治一切。而且，在整个应用程序中你... 查看详情

并发编程并发编程中你需要知道的基础概念(代码片段)

本博客系列是学习并发编程过程中的记录总结。由于文章比较多，写的时间也比较散，所以我整理了个目录贴（传送门），方便查阅。并发编程系列博客传送门多线程是Java编程中一块非常重要的内容，其中涉及到很多概念。这... 查看详情

javascript中你不知道的5个json-使用技巧(代码片段)

开发中，经常使用 JSON.stringify(object) 来序列化对象，但除了第一个参数外，还有其它参数可用...格式化//默认的JSON.stringify(object)出来数据是一行字符串constuser=name:'JackieDYH',age:30,isAdmin:true,friends:['小可爱... 查看详情

intellijidea中你应该知道的快捷键

IDEA官方所有快捷键：参考：https://resources.jetbrains.com/storage/products/intellij-idea/docs/IntelliJIDEA_ReferenceCard.pdf*常用的是灰色底标志。下面是常用的快捷键：Ctrl+Shift+Space代码快速补充DoubleShift全局搜索Alt+Enter快速修正，类似于Eclips 查看详情

网络安全你应该知道的几个网络安全概念

我们大家都知道网络安全的重要性，但对于网络安全相关知识了解的少之又少。今天我们小编就告诉你几个网络安全概念，以便大家了解。一、安全Web网关安全Web网关已经从其过去优化互联网带宽的目的演变为保护用户... 查看详情

js中你不知道的一些概念知识(代码片段)

DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系e.getAttribute()，是标准DOM操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性e.propName通常是在HTML文档中访问特定元素的... 查看详情

go2中你最期待什么功能？(代码片段)

我仍然把Go模板中的范围子句的顺序弄得一团糟，因为它有时与Go本身的顺序是相反的。对于两个参数，模板引擎与标准库相匹配。正如许多人所指出的那样，这个特性将出现在开发人员已经很多年了，我真的很喜欢建立漂亮的... 查看详情

测试人应该知道的几个基本测试概念(代码片段)

实现代码注册器模式非常容易理解和实现。一般会有一个属性用来存放多个对象实例，以及set及get方法。set方法用来将对象实例保存在属性数组中，get方法用来或取想要的对象实例。classRegistry//保存实例对象privatestatic$objs=[];//get... 查看详情

一张图告诉你最流行的7个javascript框架特点

欢迎大家持续关注葡萄城控件技术团队博客，更多更好的原创文章尽在这里~~?AngularJ.js 由go 查看详情

js大道至简---来看看js中你最熟悉的变量和数值的知识吧

1变量1.1什么是变量？变量就是一个装东西的盒子。变量是用于存放数据的容器。我们通过变量名获取数据，数据可以被更改。1.2声明变量1.2.1定义单个变量js通过var来声明变量，var是一个JS关键字，用来声明变量（Variable变量的意... 查看详情

你最该知道的事（职场）

以ITer的角度看，以下是个典型的基类声明：class职场人{publicconststring观念="...";publicvirtualvoid方法();}1.观念树立財富来自于朋友的思想。在家靠父母，在外靠朋友。我是个微不足道的小人。我的一切都要靠朋友；结识朋友靠交往。... 查看详情

玩转可视化图表篇，推荐10个你最应该知道的可视化图表项目，yyds！

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫~今天继续推荐前端必备项目！平时如何发现好的开源项目，可以看看这篇文章：GitHub上能挖矿的神仙技巧-如何发现优秀开源项目1.three.jsJavaScri... 查看详情

java8中你可能不知道的一些地方之接口默认方法实战(代码片段)

Java8已经发布很久，是自java5（2004年发布）之后Oracle发布的最重要的一个版本。其中包括语言、编译器、库、工具和JVM等诸多方面的新特性，对于国内外互联网公司来说，Java8是以后技术开发的趋势。这里主要讲解在开发中几个... 查看详情

你应该知道的es2020中的10个javascript新特性(代码片段)

...们现在对ES2020中发生的变化有了完整的了解，ES2020是JavaScript的新的和改进的规范。因此，让我们看看这些变化是什么。1.BigIntBigInt是JavaScript中最令人期待的功能之一，终于来了。实际上，它允许开发人员在其JS代... 查看详情

玩转可视化图表篇，推荐10个你最应该知道的可视化图表项目，yyds！

...;GitHub上能挖矿的神仙技巧-如何发现优秀开源项目1.three.jsJavaScript3DLibrary.这个项目，做为前端开发都应该知道的哈！该项目的目的是创建一个易于使用、轻量级、跨浏览器的通用3D库。当前的构建仅包含WebGL渲染器，但... 查看详情

java初学者入门应该掌握的30个概念

1.OOP中唯一关系的是对象的接口是什么，就像计算机的销售商她不管电源内部结构是怎样的，他只关系能否给你提供电就行了，也就是只要知道canornot而不是howandwhy。所有的程序是由一定的属性和行为... 查看详情

java初学者入门应该掌握的30个概念

1.OOP中唯一关系的是对象的接口是什么，就像计算机的销售商她不管电源内部结构是怎样的，他只关系能否给你提供电就行了，也就是只要知道canornot而不是howandwhy。所有的程序是由一定的属性和行为对象组成的，不同的对象的... 查看详情

正文

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

1. 调用堆栈

2. 原始值

3.值类型和引用类型

4. 类型转换

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

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

7. 表达式和语句

8. IIFE，模块和命名空间

9. 消息队列和事件循环

10. setTimeout, setInterval和requestAnimationFrame

11. Javascript 引擎

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

13. DOM 和 渲染树

14. 原型继承

15. this, call, apply and bind

16. new、Constructor、instanceof和Instances

17. 原型继承和原型链

18. Object.create 和 Object.assign

19. map, reduce 和 filter

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

21. 闭包

22. 高阶函数

23. 递归

24. 集合和Generator

25. Promises

26. async/await

27. 数据结构

28. 时间复杂度

29. 算法

30. 继承、多态和重用

31. 设计模式

32. 柯里化

33. Clean Code

javascript开发者都应该知道的十个概念

node.js新手必须知道的4个javascript概念(代码片段)

并发编程并发编程中你需要知道的基础概念(代码片段)

javascript中你不知道的5个json-使用技巧(代码片段)

intellijidea中你应该知道的快捷键

网络安全你应该知道的几个网络安全概念

js中你不知道的一些概念知识(代码片段)

go2中你最期待什么功能？(代码片段)

测试人应该知道的几个基本测试概念(代码片段)

一张图告诉你最流行的7个javascript框架特点

js大道至简---来看看js中你最熟悉的变量和数值的知识吧

你最该知道的事（职场）

玩转可视化图表篇，推荐10个你最应该知道的可视化图表项目，yyds！

java8中你可能不知道的一些地方之接口默认方法实战(代码片段)

你应该知道的es2020中的10个javascript新特性(代码片段)

玩转可视化图表篇，推荐10个你最应该知道的可视化图表项目，yyds！

java初学者入门应该掌握的30个概念

java初学者入门应该掌握的30个概念

13. DOM 和渲染树