每个开发人员都应该知道的 33 个 JavaScript 概念

每个 JavaScript 开发人员都应该知道的 33 个概念

AWS GenAI 直播！

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

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

值得注意的是，此列表的灵感来自以下存储库：

请给予33 个 JS 概念库的作者和贡献者一些关爱，感谢他们收集了这份精彩的资源列表！❤️

事不宜迟，让我们开始吧！

目录

1. 调用堆栈
2. 原始类型
3. 值类型和引用类型
4. 隐式、显式、名义式、结构化和鸭子类型
5. == 与 === 与 typeof
6. 函数作用域、块作用域和词法作用域
7. 表达式与语句
8. IIFE、模块和命名空间
9. 消息队列和事件循环
10. setTimeout、setInterval 和 requestAnimationFrame
11. JavaScript 引擎
12. 位运算符、类型数组和数组缓冲区
13. DOM 和布局树
14. 工厂和类
15. this、调用、应用和绑定
16. new、构造函数、instanceof 和实例
17. 原型继承和原型链
18. Object.create 和 Object.assign
19. 映射、减少、过滤
20. 纯函数、副作用、状态变异和事件传播
21. 闭包
22. 高阶函数
23. 递归
24. 集合和生成器
25. 承诺
26. 异步/等待
27. 数据结构
28. 昂贵的操作和大 O 符号
29. 算法
30. 继承、多态和代码重用
31. 设计模式
32. 部分应用、柯里化、Compose 和管道
33. 清洁代码

1. 调用堆栈

调用堆栈是解释器（例如 Web 浏览器中的 JavaScript 解释器）的一种机制，用于跟踪其在调用多个函数的脚本中的位置——当前正在运行的函数以及该函数中调用了哪些函数等
。——来源

教程

• 📜理解 JavaScript 调用堆栈、事件循环 — Gaurav Pandvia
• 📜理解 JavaScript 调用堆栈 — Charles Freeborn
• 📜 JavaScript：什么是执行上下文？什么是调用堆栈？—— Valentino Gagliardi

2. 原始类型

除对象外，所有类型都定义了不可变值（即不可更改的值）。例如（与 C 语言不同），字符串是不可变的。我们将这些类型的值称为“原始值”
。——来源

教程

• 📜 JavaScript 中数字的编码方式 — Axel Rauschmayer 博士
• 📜你需要了解的 JavaScript 数字类型 — Max Wizard K
• 📜每个 JavaScript 开发者都应该了解的浮点数知识 — Chewxy

3. 值类型和引用类型

被赋值非原始值的变量会被赋予一个指向该值的引用。该引用指向对象在内存中的位置。变量实际上并不包含该值。——
来源

教程

• 📜解释 JavaScript 中的值与引用 — Arnav Aggarwal
• 📜 JavaScript 中的原始类型和引用类型 — Bran van der Meer
• 📜 JavaScript 中的值类型、引用类型和作用域 — Ben Aston

4. 隐式、显式、名义式、结构化和鸭子类型

类型强制转换是指，当运算符的操作数属于不同类型时，其中一个操作数将被转换为与另一个操作数类型“等效”的值。——
来源

教程

• 📜你需要了解的关于 JavaScript 隐式强制转换的知识 — Promise Tochi
• 📜 JavaScript 类型强制解释 — Alexey Samoshkin
• 📜 JavaScript 强制转换详解 — Ben Garrison

5. == 与 === 与 typeof

JavaScript 有两种看似相似，但实际上截然不同的相等性测试方法。你可以使用 == 或 === 来测试相等性
。——来源

教程

• 📜 JavaScript 双等号 vs. 三等号 — Brandon Morelli
• 📜在 JavaScript 中我应该使用 === 还是 == 相等比较运算符？—— Panu Pitkamaki
• 📜 == vs === JavaScript：双等号和强制转换 — AJ Meyghani

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

区分这一点很重要，因为表达式可以像语句一样工作，这就是为什么我们也有表达式语句。然而，另一方面，语句不能像表达式一样工作。——
来源

教程

• 📜 JavaScript 函数——理解基础知识 — Brandon Morelli
• 📜函数作用域和块作用域之间的斗争 — Marius Herring
• 📜在 JavaScript 中模拟块作用域 — Josh Clanton

7. 表达式 vs 语句

区分这一点很重要，因为表达式可以像语句一样工作，这就是为什么我们也有表达式语句。然而，另一方面，语句不能像表达式一样工作。——
来源

教程

• 📜你需要了解的关于 JavaScript 表达式、语句和表达式语句的所有信息 — Promise Tochi
• 📜函数表达式 vs 函数声明 — Paul Wilkins
• 📜 JavaScript 函数 — 声明 vs 表达式 — Ravi Roshan

8. IIFE、模块和命名空间

一种常用的函数编码模式有一个很奇特的名字：立即调用函数表达式。或者更通俗的说法是 IIFE，读起来有点“iffy”
。——来源

教程

• 📜掌握立即调用函数表达式 ― Chandra Gundamaraju
• 📜 ES6 模块是否会使 IIFE 的情况过时？
• 📜 JavaScript 模块、模块格式、模块加载器和模块打包器的 10 分钟入门 —— Jurgen Van de Moere

9.消息队列和事件循环

动图

“JavaScript 是如何实现异步和单线程的？” 简而言之，JavaScript 语言是单线程的，异步行为并非 JavaScript 语言本身的一部分，而是构建在浏览器（或编程环境）中的核心 JavaScript 语言之上，并通过浏览器 API 访问
。——来源

教程

• JavaScript事件循环详解 — Anoop Raveendran
• 📜 JavaScript 事件循环：解释 — Erin Sweson-Healey
• 📜理解 JS：事件循环 — Alexander Kondov

10. setTimeout、setInterval 和 requestAnimationFrame

我们可能决定不立即执行某个功能，而是在稍后的某个时间执行。这被称为“安排通话”
。——来源

教程

• 📜 setTimeout 和 setInterval — JavaScript.Info
• 📜为什么不使用 setInterval — Akanksha Sharma
• 📜 setTimeout 与 setInterval — 开发者

11. JavaScript 引擎

编写 Web 代码有时会让人感觉有些神奇，因为开发人员只需输入一串字符，就像变魔术一样，这些字符就会在浏览器中变成具体的图像、文字和动作。了解这项技术可以帮助开发人员更好地调整他们的编程技巧
。——来源

教程

• 📜 JavaScript 引擎 — Jen Looper
• 📜理解 Chrome V8 引擎如何将 JavaScript 转换为机器码 — DroidHead
• 📜理解 V8 的字节码 — Franziska Hinkelmann

12. 位运算符、类型数组和数组缓冲区

好吧，从技术上讲，计算机的一切都归结为 1 和 0。它不处理数字、字符或字符串，只使用二进制数字（位）。简而言之，一切都以二进制形式存储。然后，计算机使用 UTF-8 等编码将保存的位组合映射到字符、数字或其他符号（ELI5 版本）
。——来源

教程

• 📜 JS 编程：位运算 — Alexander Kondov
• 📜在实际生活中使用 JavaScript 的位运算符 — ian m
• 📜 JavaScript 位运算符 — w3resource

13. DOM 和布局树

文档对象模型（通常简称 DOM）是实现网站交互的关键要素。它是一种接口，允许编程语言操作网站的内容、结构和样式。JavaScript 是一种客户端脚本语言，用于连接到互联网浏览器中的 DOM
。——来源

教程

• 📜如何理解和修改 JavaScript 中的 DOM — Tania Rascia
• 📜什么是文档对象模型，以及为什么你应该知道如何使用它 — Leonardo Maldonado
• 📜 JavaScript DOM 教程及示例 — Guru99

14.工厂和类

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

教程

• 📜如何在 JavaScript 中使用类 — Tania Rascia
• 📜 Javascript 类 — 底层原理 — Majid
• 📜 ES6 类 — Nathaniel Foster

15. this、call、apply 和 bind

这些函数对于每个 JavaScript 开发人员都非常重要，几乎每个 JavaScript 库或框架都会用到它们
。——来源

教程

• 📜理解 JavaScript 中的 call()、apply() 和 bind() 方法 — Aniket Kudale
• 📜操作方法：JavaScript 中的 call() 、 apply() 和 bind() — Niladri Sekhar Dutta
• 📜 JavaScript 的 Apply、Call 和 Bind 方法对于 JavaScript 专业人员至关重要 — Richard Bovell

16. new、构造函数、instanceof 和实例

每个 JavaScript 对象都有一个原型。JavaScript 中的所有对象都从其原型继承方法和属性。——
来源

教程

• 📜 JavaScript 初学者：'new' 运算符 — Brandon Morelli
• 📜让我们揭开 JavaScript 的“new”关键字的神秘面纱 — Cynthia Lee
• 📜构造函数，运算符“new” — JavaScript.Info

17.原型继承和原型链

对于熟悉基于类的语言（例如 Java 或 C++）的开发者来说，JavaScript 可能有点令人困惑，因为它是动态的，并且本身并不提供类的实现（class 关键字是在 ES2015 中引入的，但它只是一种语法糖，JavaScript 仍然是基于原型的）
。——来源

教程

• 📜 Javascript：原型与类 — Valentin PARSY
• 📜 JavaScript 引擎基础：优化原型 — Mathias Bynens
• 📜 JavaScript 原型 — NC Patro

18. Object.create 和 Object.assign

Object.create 方法是 JavaScript 中创建新对象的方法之一
。——来源

教程

• JavaScript 中的Object.create — Rupesh Mishra
• 📜 Object.create()：JavaScript 中创建对象的新方法 — Rob Gravelle
• 📜使用 Object.create 实现基本继承 — Joshua Clanton

19. 映射、归约、过滤

即使你不知道什么是函数式编程，你也可能一直在使用 map、filter 和 reduce，因为它们非常有用，并且允许你编写更清晰的逻辑，从而减少代码的混乱。——
来源

教程

• 📜 JavaScript 函数式编程 — map、filter 和 reduce — Bojan Gvozderac
• 📜学习 Javascript 中的 map、filter 和 reduce — João Miguel Cunha
• 📜 JavaScript 的 Map、Reduce 和 Filter — Dan Martensen

20.纯函数、副作用、状态变异和事件传播

我们的很多 bug 都根源于与 IO 相关的、数据变异的、带有副作用的代码。这些 bug 会蔓延到我们代码库的各个角落——从接受用户输入、通过 http 调用收到意外响应，到写入文件系统。不幸的是，这是一个残酷的现实，我们应该习惯于此。真的吗？
——来源

教程

• 📜 JavaScript 和函数式编程 — 纯函数 — Omer Goldberg
• 📜精通 JavaScript 面试：什么是纯函数？—— Eric Elliott
• 📜 JavaScript：什么是纯函数以及为什么要使用它们？ — James Jeffery

21. 闭包

闭包是将函数与其周围状态（词法环境）的引用捆绑在一起（封装）而成的组合。换句话说，闭包允许你从内部函数访问外部函数的作用域。在 JavaScript 中，每次创建函数时都会创建闭包，即在函数创建时
。——来源

教程

• 📜我从来不理解 JavaScript 闭包 — Olivier De Meulder
• 📜轻松理解 JavaScript 闭包 — Richard Bovell
• 📜理解 JavaScript 闭包 — Codesmith

22. 高阶函数

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

教程

• 📜 JavaScript 中的高阶函数 — M. David Green
• 📜高阶函数：使用 Filter、Map 和 Reduce 获得更易于维护的代码 — Guido Schmitz
• 📜一等函数和高阶函数：高效的 JavaScript 函数式编程 — Hugo Di Francesco

23.递归

把这篇文章当成一系列学习练习。这些例子旨在引发你的思考——如果我做得没错的话，或许还能稍微拓展你对函数式编程的理解
。——来源

教程

• 📜 JavaScript 中的递归 — Kevin Ennis
• 📜理解 JavaScript 中的递归 — Zak Frisch
• 📜学习并理解 JavaScript 中的递归 — Brandon Morelli

24. 集合和生成器

Generator 对象由生成器函数返回，它同时遵循可迭代协议和迭代器协议
。——来源

教程

• 📜 ES6 深度解析：集合 — Jason Orendorff
• 📜 ES6 集合：使用 Map、Set、WeakMap、WeakSet — Kyle Pennell
• 📜 ES6 WeakMaps、Sets 和 WeakSets 深度解析 — Nicolás Bevacqua

25. 承诺

Promise 对象表示异步操作的最终完成（或失败）及其结果值。——
来源

教程

• 📜 JavaScript 对傻瓜的承诺——Jecelyn Yeen
• 📜理解 JavaScript 中的 Promise — Gokul NK
• 📜精通 JavaScript 面试：什么是 Promise？—— Eric Elliott

26. 异步/等待

有一种特殊的语法可以更轻松地使用 Promise，叫做“async/await”。它出奇地易于理解和使用
。——来源

教程

• 📜理解 JavaScript 中的 async/await — Gokul NK
• 📜探索 JavaScript 中的 Async/Await 函数 — Alligator.io
• 📜使用 async/await 实现异步 JavaScript — Joy Warugu

27.数据结构

JavaScript 每天都在发展。随着 React、Angular、Vue、NodeJS、Electron、React Native 等框架和平台的快速发展，在大型应用程序中使用 JavaScript 已经变得相当普遍。——
来​​源

教程

• 📜 JavaScript 中的数据结构 — Thon Ly
• 📜 JavaScript 中的算法和数据结构 — Oleksii Trekhleb
• 📜数据结构：对象和数组 ― Chris Nwamba

28. 昂贵的操作和大O符号

“什么是大 O 符号？”这是开发者面试中一个非常常见的问题。简而言之，它是一种数学表达式，用来描述算法运行时间取决于输入的长度，通常指的是最坏的情况
。——来源

教程

• 📜 Javascript 中的大 O 表示法 — César Antón Dorantes
• 📜时间复杂度/大 O 符号 — Tim Roberts
• 📜 JavaScript 中的大 O — Gabriela Medina

29.算法

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

教程

• 📜使用 ES6 的数据结构和算法
• 📜 JavaScript 实现的算法和数据结构，并附有解释和进一步阅读的链接
• 📜 JS：面试算法

30.继承、多态和代码重用

类继承是一个类扩展另一个类的方式，这样我们就可以在现有类的基础上创建新的功能
。——来源

教程

• 📜 JavaScript 中的继承 — Rupesh Mishra
• 📜使用 JavaScript 实现简单继承 — David Catuhe
• 📜 JavaScript — 继承、委托模式和对象链接 — NC Patro

31. 设计模式

每个开发人员都努力编写可维护、可读且可重用的代码。随着应用程序规模的扩大，代码结构变得越来越重要。设计模式对于解决这一挑战至关重要——它为特定情况下的常见问题提供组织结构
。——来源

教程

• 📜你应该知道的 4 个 JavaScript 设计模式 — Devan Patel
• 📜 JavaScript 设计模式 – 移动 Web 开发初学者指南 — Soumyajit Pathak
• 📜 JavaScript 设计模式 — Akash Pal

32. 部分应用、柯里化、Compose 和管道

函数组合是一种将多个简单函数组合起来构建更复杂函数的机制。——
来源

教程

• 📜在 JavaScript 中使用函数组合 — Rémi
• 📜 JavaScript ES6 中的柯里化 — Adam Bene
• 📜 JavaScript 中的组合与柯里化优雅 — Pragyan Das

33. 清洁代码

编写简洁、易懂、可维护的代码是每个开发人员都必须掌握的一项关键技能
。——来源

教程

• 📜简洁代码讲解 – 面向初学者的简洁代码实用入门 — freeCodeCamp
• 📜适用于 JavaScript 的“清洁代码”概念 — Ryan McDermott
• 📜整洁代码实践：如何编写整洁代码 — Tirth Bodawala

如果您发现此列表有用，请不要忘记将其加入书签并关注我以获取更多类似内容。

[已删除用户]