33 个 JS 核心概念:一份被 GitHub 官方点名的前端学习清单

33-js-concepts 在 GitHub 上已经拿到 66.4K Star 了。

这个仓库做了一件事——把 JavaScript 开发者需要掌握的核心知识拆成 33 个独立概念,每个概念配讲解、代码示例和延伸资料。2018 年被 GitHub 官方列入年度顶级开源项目。

正文顶部截图

1、 这份清单覆盖了什么

从语言基础到工程实践,33 个概念分成六个板块。

基础部分包括原始类型、类型隐式转换、相等运算符、作用域与闭包、调用栈。这些是写 JS 绕不开的底层机制,很多面试题就从这里出。

函数与执行部分讲事件循环、IIFE 和模块化。事件循环那一篇把宏任务、微任务、Promise 和 setTimeout 的执行顺序理得很清楚。

Web 平台部分覆盖 DOM 操作、Fetch API、Web Workers。面向对象部分从工厂函数讲到原型链继承,再到 this 的五种绑定规则。

异步部分从回调函数讲起,经过 Promise、async/await,一直讲到生成器和迭代器。函数式编程部分涉及高阶函数、纯函数、map/reduce/filter、递归、柯里化与组合。

高级主题包括 JS 引擎原理(V8 的编译优化、隐藏类、内联缓存)、错误处理、正则表达式、ES6+ 语法、ES Modules、数据结构、算法与大 O 表示法、设计模式、Clean Code 原则。

README区域截图

2、 33 之外还有扩展内容

仓库不止 33 个概念。在基础清单之外,作者又整理了一批进阶主题。

语言机制方面补了变量提升、暂时性死区、严格模式。类型系统方面深入讲了 null 和 undefined 的区别、短路求值、Symbol 和 BigInt。

对象与属性部分增加了属性描述符、getter/setter、Proxy 与 Reflect、WeakMap 与 WeakSet。内存与性能部分讲了垃圾回收机制、防抖节流、memoization 缓存策略。

浏览器存储覆盖 localStorage、sessionStorage、IndexedDB、Cookie 的各自适用场景和限制。事件机制从冒泡捕获讲到事件委托、自定义事件。Observer API 那一组讲了 Intersection Observer、Mutation Observer、Resize Observer、Performance Observer 的用法和实际场景。

数据处理部分深入 JSON 的高级用法、Typed Arrays、Blob 与 File API、requestAnimationFrame。

这些扩展内容加起来,基本上把 JavaScript 从语法到浏览器运行时的知识体系都串起来了。

3、 怎么用这份资料

每个概念都是独立页面,配有文字讲解和可运行的代码片段。不需要按顺序读,缺哪块补哪块就行。

仓库还提供了 40 多个语言的翻译版本,中文翻译质量不错,读起来没有机翻感。

如果想系统学一遍,可以按板块来:先过基础,再看函数执行和异步,然后是面向对象和函数式,最后啃高级主题。每个概念花半小时到一小时,33 个概念大概两周能过完。

4、 适合谁

刚入门前端的人,可以用它查漏补缺,知道哪些知识点自己还没覆盖到。

工作一两年的开发者,可以用它把零散的经验串成体系,把「会用」变成「懂为什么」。

准备面试的人,这 33 个概念覆盖了大部分 JS 八股文的范围,每个概念的讲解比一般面试题解析要深入得多。

准备面试的人,这 33 个概念覆盖了大部分 JS 八股文的范围,每个概念的讲解比一般面试题解析要深入得多。

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐