菜单

JavaScript 概念概述

相关源文件

目的与范围

本文档将对代码库中涵盖的 33 个核心 JavaScript 概念进行高层次的介绍。这些概念构成了每位 JavaScript 开发人员都应理解的基础知识,以便编写出高效、简洁且易于维护的代码。有关代码库结构的更多信息,请参阅代码库结构,有关各个概念类别的详细解释,请参阅3.13.6

来源: README.md10-12

为何需要这些概念

理解这 33 个 JavaScript 概念至关重要,原因如下:

  1. 精通语言:它们涵盖了从基础到高级主题的 JavaScript 核心机制。
  2. 解决问题:它们提供了解决常见编程挑战所需的知识。
  3. 代码质量:它们使开发人员能够编写更清晰、更高效的代码。
  4. 面试准备:许多这些概念在技术面试中经常被考察。
  5. 现代开发:它们构成了理解现代 JavaScript 框架和库的基础。

该代码库以循序渐进的学习路径组织了这些概念,使开发人员能够从基本原理到高级模式系统地构建知识。

来源: README.md12-14

概念组织

这 33 个 JavaScript 概念被组织成六个主要类别,从基础语言特性到高级应用模式。

概念类别图

来源: README.md66-100

33 个 JavaScript 概念

以下是代码库中涵盖的所有 33 个 JavaScript 概念的完整列表。每个概念都包含指向相关资源的链接,例如文章、视频和参考文档。

类别概念描述
执行上下文1. 调用栈 (Call Stack)JavaScript 用于跟踪函数执行的机制
语言基础2. 原始类型 (Primitive Types)JavaScript 中的基本数据类型:字符串、数字、布尔值等。
语言基础3. 值类型 vs 引用类型 (Value vs Reference Types)变量如何存储和与原始值 vs 对象值进行交互
语言基础4. 类型强制转换 (Type Coercion)JavaScript 如何将值从一种类型转换为另一种类型
语言基础5. == vs === vs typeof相等运算符和类型检查之间的区别
执行上下文6. 函数作用域、块作用域和词法作用域 (Function Scope, Block Scope and Lexical Scope)变量访问如何由嵌套结构确定
语言基础7. 表达式 vs 语句 (Expression vs Statement)生成值的代码和执行操作的代码之间的区别
函数与对象8. IIFE、模块和命名空间 (IIFE, Modules and Namespaces)组织和封装代码的模式
异步 JavaScript9. 消息队列和事件循环 (Message Queue and Event Loop)JavaScript 如何处理异步操作
异步 JavaScript10. setTimeout, setInterval 和 requestAnimationFrame用于延迟和重复执行的计时机制
执行上下文11. JavaScript 引擎 (JavaScript Engines)执行 JavaScript 代码的环境
语言基础12. 位运算符、类型化数组和 ArrayBuffer (Bitwise Operators, Type Arrays and Array Buffers)低级操作和内存管理
DOM 交互 (DOM Interaction)13. DOM 和布局树 (DOM and Layout Trees)JavaScript 如何与 HTML 文档交互
函数与对象14. 工厂和类 (Factories and Classes)创建对象的模式
函数与对象15. this, call, apply 和 bind控制函数执行上下文的方法
函数与对象16. new, 构造函数, instanceof 和实例 (new, Constructor, instanceof and Instances)对象创建和类型检查
函数与对象17. 原型继承和原型链 (Prototype Inheritance and Prototype Chain)JavaScript 的对象继承机制
函数与对象18. Object.create 和 Object.assign创建和复制对象的方法
函数式编程19. map, reduce, filter用于函数式编程的数组方法
函数式编程20. 纯函数、副作用 (Pure Functions, Side Effects)函数式编程的概念
函数与对象21. 闭包 (Closures)仍能访问其词法作用域的函数
函数式编程22. 高阶函数 (High Order Functions)操作其他函数的函数
算法23. 递归 (Recursion)调用自身的函数
数据结构24. 集合和生成器 (Collections and Generators)内置 JavaScript 数据结构和生成器
异步 JavaScript25. Promise代表操作最终完成的对象
异步 JavaScript26. async/await处理 Promise 的语法糖
数据结构27. 数据结构 (Data Structures)常见数据结构的实现
算法28. Big O 符号 (Big O Notation)衡量算法性能
算法29. 算法 (Algorithms)用 JavaScript 实现的常见算法
函数与对象30. 继承、多态 (Inheritance, Polymorphism)面向对象编程概念
设计模式31. 设计模式 (Design Patterns)解决常见问题的可重用解决方案
函数式编程32. 部分应用、柯里化 (Partial Applications, Currying)从其他函数创建函数的技术
最佳实践33. 整洁代码 (Clean Code)编写可维护代码的原则

来源: README.md68-100

JavaScript 概念到代码的映射

下图说明了抽象的 JavaScript 概念如何映射到实际的代码实现。

来源: README.md140-182 README.md182-207 README.md623-673 README.md709-747

概念依赖和学习路径

理解概念如何相互构建对于有效学习至关重要。下图显示了 JavaScript 概念之间的依赖关系,并建议了学习路径。

来源: README.md66-100

按概念类型划分的学习资源

该代码库为每个概念提供多种类型的学习资源。资源类型的分布因概念类别而异,如下所示:

来源: README.md110-123 README.md147-166 README.md185-197 README.md224-236 README.md258-270 README.md295-312 README.md336-344 README.md367-382 README.md401-410 README.md429-436

按学习风格划分的资源类型

不同的开发人员有不同的学习方式,因此代码库为每个概念提供了各种类型的资源:

资源类型描述优点
参考文档官方规范和 API 文档来自语言规范的精确、准确的信息
文章深入的书面解释带代码示例和用例的详细分析
视频可视化演示和解释通过分步解释进行可视化学习
书籍全面的结构化学习深入、结构化地涵盖主题

对于每个概念,您都可以在主 README 文件中相应的部分找到这些资源的精选列表。

来源: README.md110-137

与现代 JavaScript 开发的关系

这些 33 个概念中的许多都随着 JavaScript 语言和生态系统的发展而演进。下表显示了这些概念与现代 JavaScript 开发的关系。

时代JavaScript 版本引入/增强的关键概念
2009 年之前ES3, ES5调用栈、原始类型、原型继承
2009-2015ES5闭包、高阶函数、IIFE
2015+ES6/ES2015类、Promise、模块、箭头函数
2017+ES8/ES2017async/await
2018+ES9/ES2018+增强的对象展开、对象的 rest/spread 语法

理解不同 JavaScript 版本中的这些概念,有助于开发人员编写可在各种环境中运行的代码,并利用最合适的功能。

来源: README.md66-100

社区翻译

33 个 JavaScript 概念的存储库已被社区翻译成多种语言,这凸显了其全球影响力和实用性。有关可用翻译的列表,请参阅主 README 文档。

来源: README.md20-64

下一步

在对这 33 个 JavaScript 概念有了大致了解后,您可以深入研究特定类别

有关为存储库贡献信息,请参阅 贡献指南

来源: README.md66-100