33-js-concepts：33 个 JavaScript 核心概念与 Beyond 33 进阶体系的完整学习地图

33-js-concepts 仓库围绕一个目标构建：帮开发者从「会用 JavaScript」进阶到「真正理解 JavaScript」。本文以仓库根目录的 README.md 为骨架，完整梳理其 33 个核心概念与 29 个进阶（Beyond 33）概念的分组结构、每个概念的要点，并结合 package.json、vitest.config.js、docs/docs.json 等仓库文件说明如何用测试驱动方式运行文档中的代码示例、以及本地构建 Mintlify 文档站点的方法。读完本文，你可以快速定位任意概念的文档与配套测试，并按仓库自带的学习路径制定自己的学习顺序。

一、仓库结构：文档为主体，测试做验证

仓库的顶层结构非常清晰，核心资产是「文档 + 可执行测试」两套内容：

目录/文件	职责
docs/concepts/	33 个核心概念文档（.mdx 格式，Mintlify 站点源文件）
docs/beyond/concepts/	Beyond 33 的 29 个进阶概念文档
docs/getting-started/	入门页：项目介绍、学习方法、前置条件、学习路径
tests/	与文档一一对应的 Vitest 测试，按概念分组组织
package.json	定义 test / docs 等脚本与 vitest、jsdom 等依赖
vitest.config.js	测试入口配置
CONTRIBUTING.md	贡献规范，重点是「如何为代码示例写测试」

package.json 的项目描述明确了仓库定位：一套覆盖调用栈、闭包、Promise、async/await、设计模式等主题的 JavaScript 概念合集，附带学习资源与交互式代码示例。

从源码结构看，仓库本身几乎没有业务代码（index.js 只有一段说明性注释），这是一个「文档 + 测试」型仓库：所有代码示例的价值通过 tests/ 下的测试来保证可运行性。

二、33 个核心概念全景（README 主体内容）

README 将 33 个核心概念分为 7 个模块。下表完整继承 README 中每个概念的要点，并将原站链接转换为仓库内对应文档路径。

1. Fundamentals 基础（6 个）

概念	核心要点	文档路径
Primitive Types 原始类型	JS 的 7 种原始类型：string、number、bigint、boolean、undefined、null、symbol；理解不可变性、typeof 的怪异行为和自动装箱	docs/concepts/primitive-types.mdx
Primitives vs Objects 原始值与对象	原始值与对象的行为差异：不可变性、按共享（call-by-sharing）传递语义、为什么「可修改但重新赋值不生效」、V8 如何存储值	docs/concepts/primitives-objects.mdx
Type Coercion 类型转换	隐式转换机制：值如何转为字符串/数字/布尔，8 个 falsy 值，如何避免常见转换 bug	docs/concepts/type-coercion.mdx
Equality Operators 相等运算符	== 与 === 的区别、typeof 怪异行为、Object.is()；为什么 NaN !== NaN、为什么 typeof null === 'object'	docs/concepts/equality-operators.mdx
Scope and Closures 作用域与闭包	三种作用域、var/let/const 差异、词法作用域与作用域链、用闭包实现数据私有化	docs/concepts/scope-and-closures.mdx
Call Stack 调用栈	栈帧、LIFO 顺序、执行上下文、栈溢出错误、如何用调用栈追踪调试	docs/concepts/call-stack.mdx

2. Functions & Execution 函数与执行（2 个）

概念	核心要点	文档路径
Event Loop 事件循环	异步代码如何处理：调用栈、任务队列、微任务，为什么 Promise 回调永远先于 setTimeout() 执行	docs/concepts/event-loop.mdx
IIFE, Modules & Namespaces	用 IIFE、命名空间、ES6 模块组织代码：私有作用域、导出、动态导入、常见模块误区	docs/concepts/iife-modules.mdx

3. Web Platform Web 平台（3 个）

概念	核心要点	文档路径
DOM	浏览器如何用树表示 HTML：选择/操作元素、遍历节点、渲染性能优化	docs/concepts/dom.mdx
Fetch API	用 Fetch 发起 HTTP 请求：GET/POST、响应处理、JSON 解析、错误模式、用 AbortController 取消请求	docs/concepts/http-fetch.mdx
Web Workers	在后台线程运行代码：postMessage、Dedicated/Shared Worker、可转移对象（transferable objects）	docs/concepts/web-workers.mdx

4. Object-Oriented JavaScript 面向对象（4 个）

概念	核心要点	文档路径
Factories and Classes	工厂函数与 ES6 class：构造器、原型、私有字段、继承、两种模式的取舍	docs/concepts/factories-classes.mdx
this, call, apply, bind	this 如何工作、5 条绑定规则、call/apply/bind 方法、箭头函数、常见陷阱	docs/concepts/this-call-apply-bind.mdx
Object Creation & Prototypes	原型链与对象创建：new 运算符的 4 个步骤、Object.create()、Object.assign()、原型方法	docs/concepts/object-creation-prototypes.mdx
Inheritance & Polymorphism	类扩展、原型链、方法覆写与代码复用模式	docs/concepts/inheritance-polymorphism.mdx

5. Async JavaScript 异步编程（4 个）

概念	核心要点	文档路径
Callbacks 回调	同步 vs 异步回调、error-first 模式、回调地狱、Promise 为何而生	docs/concepts/callbacks.mdx
Promises	创建、链式调用、组合 Promise，正确处理错误，规避常见坑	docs/concepts/promises.mdx
async/await	Promise 的语法糖：try/catch 错误处理、Promise.all 并行执行、常见陷阱	docs/concepts/async-await.mdx
Generators & Iterators	yield、迭代协议、惰性求值、无限序列、for await...of 异步生成器	docs/concepts/generators-iterators.mdx

6. Functional Programming 函数式编程（5 个）

概念	核心要点	文档路径
Higher-Order Functions 高阶函数	接收或返回函数的函数，创建可复用抽象	docs/concepts/higher-order-functions.mdx
Pure Functions 纯函数	纯函数两条规则、避免副作用、不可变模式编写可测试代码	docs/concepts/pure-functions.mdx
map, reduce, filter	不产生副作用地转换/过滤/归并数组，方法链与常见陷阱	docs/concepts/map-reduce-filter.mdx
Recursion 递归	基准条件、递归调用、调用栈，阶乘/树遍历/记忆化等模式	docs/concepts/recursion.mdx
Currying & Composition	柯里化与函数组合：用 curry、compose、pipe 从简单片段构建可复用函数	docs/concepts/currying-composition.mdx

7. Advanced Topics 进阶主题（9 个）

概念	核心要点	文档路径
JavaScript Engines JS 引擎	V8 架构、解析、编译、JIT 优化、隐藏类、内联缓存、垃圾回收	docs/concepts/javascript-engines.mdx
Error Handling 错误处理	try/catch/finally、Error 类型、自定义错误、异步错误模式	docs/concepts/error-handling.mdx
Regular Expressions 正则	模式语法、字符类、量词、标志、捕获组，test/match/replace 方法	docs/concepts/regular-expressions.mdx
Modern JS Syntax 现代语法	解构、展开/剩余运算符、箭头函数、可选链、空值合并、模板字符串	docs/concepts/modern-js-syntax.mdx
ES Modules	import/export 语法、ESM 相对 CommonJS 的优势、live bindings、动态导入、top-level await、tree-shaking	docs/concepts/es-modules.mdx
Data Structures 数据结构	内置 Array/Object/Map/Set 到自实现栈、队列、链表，以及选型依据	docs/concepts/data-structures.mdx
Algorithms & Big O 算法与复杂度	时间复杂度、搜索与排序算法实现、常见面试模式	docs/concepts/algorithms-big-o.mdx
Design Patterns 设计模式	Module、Singleton、Observer、Factory、Proxy、Decorator，适用场景与常见坑	docs/concepts/design-patterns.mdx
Clean Code 整洁代码	有意义命名、小函数、DRY、避免副作用等可维护性实践	docs/concepts/clean-code.mdx

三、Beyond 33：29 个进阶概念体系

README 的「Beyond 33: Extended Concepts」部分面向已完成 33 核心概念的开发者，覆盖 29 个进阶主题（详见 docs/beyond/getting-started/overview.mdx），分为 9 个类别。

Language Mechanics 语言机制（3 个）

概念	核心要点	文档路径
Hoisting 变量提升	var 与 let/const 的提升差异、函数提升顺序、常见 bug 规避	docs/beyond/concepts/hoisting.mdx
Temporal Dead Zone 暂时性死区	为什么声明前访问 let/const 会抛错，TDZ 与 var 提升的区别	docs/beyond/concepts/temporal-dead-zone.mdx
Strict Mode 严格模式	'use strict' 捕获哪些常见错误、被禁止的语法、适用时机	docs/beyond/concepts/strict-mode.mdx

Type System 类型系统（1 个）

• JavaScript Type Nuances：null 与 undefined 的区别、短路求值、typeof 怪异行为、instanceof 与 Symbol.hasInstance、Symbol、BigInt。文档：docs/beyond/concepts/javascript-type-nuances.mdx

Objects & Properties 对象与属性（5 个）

概念	核心要点	文档路径
Property Descriptors	writable/enumerable/configurable 三属性、Object.defineProperty()、不可变属性	docs/beyond/concepts/property-descriptors.mdx
Getters & Setters	用 get/set 定义计算属性、赋值校验、响应式对象行为	docs/beyond/concepts/getters-setters.mdx
Object Methods	Object.keys()/values()/entries()/fromEntries()/freeze()/seal() 与对象克隆模式	docs/beyond/concepts/object-methods.mdx
Proxy & Reflect	拦截对象操作、构建响应式系统、实现校验、元编程模式	docs/beyond/concepts/proxy-reflect.mdx
WeakMap & WeakSet	弱引用、自动垃圾回收、私有数据模式、何时替代 Map/Set	docs/beyond/concepts/weakmap-weakset.mdx

Memory & Performance 内存与性能（4 个）

概念	核心要点	文档路径
Memory Management	内存生命周期、栈 vs 堆分配、内存泄漏、DevTools 内存分析	docs/beyond/concepts/memory-management.mdx
Garbage Collection	标记-清除、引用计数、分代回收，如何编写内存高效代码	docs/beyond/concepts/garbage-collection.mdx
Debouncing & Throttling	事件处理器优化、减少 API 调用、滚动性能，从零实现两种模式	docs/beyond/concepts/debouncing-throttling.mdx
Memoization 记忆化	缓存函数结果、优化昂贵计算、实现模式、缓存何时反而拖慢性能	docs/beyond/concepts/memoization.mdx

Modern Syntax & Operators 现代语法与运算符（2 个）

• Tagged Template Literals：自定义字符串处理函数、构建 DSL、HTML 净化。文档：docs/beyond/concepts/tagged-template-literals.mdx
• Computed Property Names：对象字面量中的动态键、从变量创建对象、Symbol 键。文档：docs/beyond/concepts/computed-property-names.mdx

Browser Storage 浏览器存储（3 个）

概念	核心要点	文档路径
localStorage & sessionStorage	两者区别、存储配额、JSON 序列化、storage 事件、安全考虑	docs/beyond/concepts/localstorage-sessionstorage.mdx
IndexedDB	客户端结构化数据：索引、事务、版本管理	docs/beyond/concepts/indexeddb.mdx
Cookies	读写删除、HttpOnly/SameSite 等属性、安全最佳实践、Cookies 与 Web Storage 选型	docs/beyond/concepts/cookies.mdx

Events 事件（3 个）

概念	核心要点	文档路径
Event Bubbling & Capturing	事件传播三阶段、stopPropagation()、传播方向、各阶段适用场景	docs/beyond/concepts/event-bubbling-capturing.mdx
Event Delegation 事件委托	借助冒泡高效处理事件、管理动态元素、降低内存占用	docs/beyond/concepts/event-delegation.mdx
Custom Events 自定义事件	创建/派发/监听 CustomEvent、组件间传数据、解耦的事件驱动架构	docs/beyond/concepts/custom-events.mdx

Observer APIs 观察器 API（4 个）

概念	核心要点	文档路径
Intersection Observer	检测元素可见性、懒加载、无限滚动、滚动动画	docs/beyond/concepts/intersection-observer.mdx
Mutation Observer	监听 DOM 变化、属性修改、子元素增删，替代已废弃的 mutation 事件	docs/beyond/concepts/mutation-observer.mdx
Resize Observer	响应元素尺寸变化、构建响应式组件，替代低效的 window resize 监听	docs/beyond/concepts/resize-observer.mdx
Performance Observer	页面性能度量、Long Tasks 跟踪、布局偏移监控、Core Web Vitals 采集	docs/beyond/concepts/performance-observer.mdx

Data Handling 数据处理（4 个）

概念	核心要点	文档路径
JSON Deep Dive	stringify() 的 replacer、parse() 的 reviver、循环引用、BigInt 序列化、自定义 toJSON	docs/beyond/concepts/json-deep-dive.mdx
Typed Arrays & ArrayBuffers	二进制数据处理、DataView、WebGL、文件处理、网络协议实现	docs/beyond/concepts/typed-arrays-arraybuffers.mdx
Blob & File API	创建/读取/操作二进制数据、文件上传、生成下载、FileReader	docs/beyond/concepts/blob-file-api.mdx
requestAnimationFrame	平滑 60fps 动画、与浏览器重绘周期同步、动画性能优化	docs/beyond/concepts/requestanimationframe.mdx

四、学习路径：按角色组织的 3 条主线

仓库在 docs/getting-started/learning-paths.mdx 中将上述概念编排为 3 条按经验水平划分的路径，可以直接照单执行。

Beginner 路径（4–8 周，13 个概念），按依赖关系分 4 阶段：

1. 第 1–2 周 基础：Primitive Types → Primitives vs Objects → Type Coercion → Equality Operators
2. 第 3–4 周 作用域与函数：Scope and Closures → Call Stack → Event Loop
3. 第 5–6 周 数据处理：Higher-Order Functions → map/reduce/filter → Pure Functions
4. 第 7–8 周 异步：Callbacks → Promises → async/await

Intermediate 路径（2–4 周，14 个概念） 分 4 个专题：执行原理（Call Stack、Event Loop、JavaScript Engines）、面向对象（this/call/apply/bind、原型、工厂与类、继承与多态）、函数式（纯函数、高阶函数、柯里化与组合、递归）、进阶模式（设计模式、错误处理、整洁代码）。

Interview Prep 路径（1–2 周复习模式） 列出高频面试题映射表：闭包、this、Promise、事件循环、原型这 5 个概念在几乎所有 JS 面试中都会出现，文档同时给出了每个专题的典型提问清单（如「微任务与宏任务的区别」「call/apply/bind 差异」），可作为自测清单使用。

此外该页还提供 4 条按主题组织的短路径：Async Mastery（5 概念）、Object-Oriented JavaScript（4 概念）、Functional Programming（5 概念）、Web Development（DOM、HTTP/Fetch、Web Workers、ES Modules）。

关于概念体系的演化背景：项目起源于 2017 年 Stephen Curtis 的文章，由 Leonardo Maldonado 扩展为资源合集，并入选 GitHub 2018 年度顶级开源项目（README 与 docs/getting-started/about.mdx 均有记载）。about 页面还说明了相对原始 33 概念的增删：新增 Callbacks、HTTP/Fetch、Web Workers、Error Handling、正则、现代语法、ES Modules 等，并合并了 Expression vs Statement、Timers 等条目——这也解释了 README 当前概念清单与「原始 33 编号」不完全一致的原因。

五、测试驱动：如何验证文档中的代码示例

这个仓库最有特色的工程实践是：文档中的代码示例都有对应测试。CONTRIBUTING.md 说明项目使用 Vitest 验证文档示例的正确性。

运行测试

package.json 定义了三个测试脚本，均可直接复制执行：

# 一次性运行全部测试
npm test            # 即 vitest run

# watch 模式，文件变化时自动重跑
npm run test:watch  # 即 vitest

# 带覆盖率报告
npm run test:coverage   # 即 vitest run --coverage

vitest.config.js 的配置非常简洁，决定了测试的收集与运行环境：

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    include: ['tests/**/*.test.js'],
    globals: false,          // 必须显式 import describe/it/expect
    environment: 'node'      // 默认 Node 环境
  }
})

三个关键点：

• include: ['tests/**/*.test.js']：所有测试统一放在 tests/ 下，按「分组/概念」两级目录组织，例如 tests/fundamentals/call-stack/call-stack.test.js、tests/beyond/proxy-reflect/...；
• globals: false：测试文件必须写 import { describe, it, expect } from 'vitest'；
• environment: 'node'：默认按 Node 环境运行，浏览器 API 相关的测试则以 .dom.test.js 后缀单独标记（如 tests/beyond/browser-storage/cookies/cookies.dom.test.js），配合 devDependencies 中的 jsdom 模拟 DOM。

测试与文档的对应规则

CONTRIBUTING.md 给出了为文档示例补测试的规范，这套规范也是理解仓库 tests/ 目录组织方式的钥匙：

1. 文件命名：在 tests/{concept-name}/ 下创建 {concept-name}.test.js；
2. 显式导入 vitest 的 describe/it/expect；
3. 把 console.log 示例转成断言，例如文档中的 console.log(typeof "hello") // "string" 对应 expect(typeof "hello").toBe("string")；
4. 错误用例用 expect(() => { ... }).toThrow() 断言；
5. 浏览器专属示例跳过：默认测试跑在 Node 里，DOM/window/document 相关示例需单独处理；
6. 注意严格模式：Vitest 以严格模式运行，非严格模式下「静默失败」的操作会抛 TypeError。

以 Beyond 33 的 cookies 概念为例，仓库同时提供了 tests/beyond/browser-storage/cookies/cookies.test.js（Node 侧逻辑）与 tests/beyond/browser-storage/cookies/cookies.dom.test.js（jsdom 模拟浏览器环境）两份测试，恰好印证了上述「双环境拆分」的组织方式。

六、文档站点：Mintlify 配置与本地构建

docs/ 目录是一套 Mintlify 站点源文件，站点导航与 SEO 元数据集中在 docs/docs.json：

• 站点标识：name 为 "33 JavaScript Concepts"，主题色使用 JS 官方黄 #F0DB4F；
• 双 Tab 导航：tabs 中定义了 "Learn"（33 核心概念，含 Getting Started 与 7 大概念分组）和 "Beyond 33"（29 个进阶概念，按 README 相同的 9 类别分组）两个主 Tab，另有 "Community" Tab 承载 docs/contributing.mdx 与 docs/translations.mdx；
• 重定向：redirects 将旧页面 /concepts/value-reference-types 指向 /concepts/primitives-objects，说明该概念页经历过改名（对应 README 中的 "Primitives vs Objects"）；
• SEO：metatags 配置了 og 标签、关键词（closures、promises、event loop、DOM、prototypes 等）与作者信息，便于搜索引擎收录。

本地预览/构建文档站点（依赖 Node 环境，Mintlify CLI 通过 npx 按需拉取）：

# 本地开发预览
npm run docs        # cd docs && npx mintlify dev

# 构建生产站点
npm run docs:build  # cd docs && npx mintlify build

七、快速上手与延伸

推荐阅读顺序（综合 README 与入门文档）：

1. 从 docs/getting-started/about.mdx 了解项目定位与原始 33 概念全貌；
2. 按 docs/getting-started/learning-paths.mdx 选择自己的路径；
3. 每读一个概念文档，到 tests/ 下找同名测试文件，npm test 验证示例行为——这是该仓库独有的「读文档 + 跑测试」双通道学习方式。

多语言支持：README 提到项目已被社区翻译到 40+ 种语言，完整语言清单见 TRANSLATIONS.md；贡献翻译的流程（Fork、翻译、提交 PR）也记录在 CONTRIBUTING.md 中。项目采用 MIT 协议（LICENSE），可自由引用与改编其中的概念讲解内容。

小结：33-js-concepts 的价值不在于单一概念讲得多深，而在于提供了一张完整、有依赖顺序、且每个节点都有可执行测试背书的 JavaScript 知识地图——33 个核心概念覆盖类型系统、作用域/闭包、执行模型（调用栈/事件循环）、异步（回调/Promise/async-await/生成器）、面向对象（原型/this/继承）、函数式与算法数据结构，Beyond 33 则补上了语言机制、对象元编程、内存与性能、浏览器存储、事件与 Observer API、数据处理这 29 个进阶板块。结合本仓库的 Vitest 测试与 Mintlify 文档配置，开发者可以完全在本地复现「学习 → 验证 → 查阅」的闭环。