简介这是一份面向JavaScript初学者的系统入门教程适合零基础或有一定编程基础、希望深入理解语言核心机制的学习者。内容从语言背景与基本语法切入覆盖变量声明中var、let、const的作用域差异原始类型与引用类型的数据划分以及算术、比较、逻辑、三元等运算符用法进而讲解if...else、for、while等控制结构函数的定义调用与一等公民特性对象的键值对组织方式。DOM操作部分演示如何获取元素、修改内容与绑定事件监听异步编程部分则梳理回调函数、Promise与async/await的演进思路帮助读者理解单线程模型下的任务调度。资源包共1个docx文件约19KB以图文与示例代码结合的方式编排便于对照动手实践。目前已有88人学习适合作为查漏补缺的案头参考也可配合时钟、待办列表、计算器等小项目巩固所学。1. JavaScript知识地图从语法骨架到异步心智模型很多人学 JavaScript 的路径是反的先背var/let/const的区别再抄几个 DOM 例子最后被 Promise 和async/await按在地上摩擦。翻车的原因不在某个语法点没记住而在于脑子里没有一张「这门语言到底由哪几层构成」的地图。JavaScript 的知识结构其实可以拆成四层语言基础层变量、数据类型、运算符、控制结构、抽象构建层函数与对象这是 JS 的灵魂、宿主交互层DOM 操作浏览器里才有、并发模型层事件循环与异步编程。前两层是语言本身后两层是语言与运行环境协作的方式。这张地图的价值在于当你卡在某个问题时能立刻判断它属于哪一层——是作用域问题、this 指向问题、DOM 生命周期问题还是微任务顺序问题。这份笔记面向已经动手写过 JS、但知识点散落一地的人帮你把碎片重新挂回骨架上。2. 语言基础层变量声明、数据类型与运算符的复习重点2.1 三种声明方式不是「新旧替换」关系初学者最容易把var、let、const理解成「越新越好」实际上它们是三种不同语义的工具选错会直接导致作用域 bug。梳理下来会发现三者的差异集中在四个维度作用域、提升行为、重复声明、可变性。维度varletconst作用域函数作用域块级作用域块级作用域提升提升且初始化为 undefined提升但不初始化暂时性死区同 let重复声明允许报错报错重新赋值允许允许不允许对象内部属性可改重点在于「暂时性死区」TDZlet和const声明的变量在声明语句之前不可访问访问会抛ReferenceError而不是像var那样拿到undefined。这个差异在循环里绑定闭包时尤其关键。// var 版本所有回调共享同一个 i for (var i 0; i 3; i) { setTimeout(() console.log(i), 0); // 输出 3 3 3 } // let 版本每次迭代创建新的块级绑定 for (let i 0; i 3; i) { setTimeout(() console.log(i), 0); // 输出 0 1 2 }上面这段代码是面试和实际调试中的高频翻车点。var声明的i是函数作用域循环结束后i已经是 3三个回调读到的都是同一个变量let在每次迭代时创建一个新的绑定回调各自捕获自己的副本。参数说明setTimeout的第二个参数0表示尽快放入任务队列但仍在当前同步代码之后执行所以能观察到循环结束后的状态。const的易错点在于「不能重新赋值」不等于「不可变」。const obj {}之后仍然可以obj.name x因为约束的是绑定不是对象内容。需要真正冻结时用Object.freeze()但要注意它是浅冻结。2.2 数据类型原始值与引用值的分界线JavaScript 的数据类型分两大类原始类型String、Number、Boolean、Null、Undefined、Symbol以及后来的 BigInt和引用类型Object数组和函数都是它的特例。这条分界线决定了两件常考的事赋值行为和比较行为。原始类型赋值是值拷贝引用类型赋值是地址拷贝。所以两个内容相同的对象用比较永远为false而两个内容相同的字符串比较为true。复习时要把这条规则和「深拷贝/浅拷贝」串起来浅拷贝只复制第一层嵌套对象仍然共享引用深拷贝需要递归或结构化克隆。const a { list: [1, 2] }; const b { ...a }; // 浅拷贝b.list 与 a.list 是同一个数组 b.list.push(3); console.log(a.list); // [1, 2, 3]原对象被影响 const c structuredClone(a); // 深拷贝完全独立 c.list.push(4); console.log(a.list); // [1, 2, 3]不受影响structuredClone是现代浏览器和 Node 环境提供的深拷贝方案能处理嵌套对象、数组、Date、Map 等但不能克隆函数和 DOM 节点。参数上它没有额外配置直接传入目标对象即可。老代码里常见的JSON.parse(JSON.stringify(obj))会丢失undefined、函数和Date类型属于典型的「看起来能用、边界就崩」的写法。另外注意typeof null object这个历史遗留问题判断 null 要用value null。NaN也不等于自身判断用Number.isNaN()。2.3 运算符里最值得单独记的两类算术和赋值运算符基本靠肌肉记忆真正需要单独整理的是比较运算符和逻辑运算符的短路行为。会做类型转换不做复习原则是默认用只有在明确需要null/undefined合并判断时才用 null它能同时匹配两者。逻辑运算符和||返回的是操作数本身而非布尔值这个特性被大量用于默认值赋值但也容易在期望布尔值的场景里埋雷。空值合并运算符??只在左值为null或undefined时取右值比||更精确——因为0和是有效值用||会被误判。3. 抽象构建层函数与对象是JS的灵魂3.1 函数是一等公民重点在「怎么被调用」函数在 JavaScript 里可以作为参数传递、作为返回值、赋值给变量这是函数式编程风格的基础。但复习函数时真正的难点不是定义语法而是「调用时 this 指向谁」。梳理下来this的规则可以按调用形式归为五类普通调用指向全局或undefined严格模式、方法调用指向调用者、call/apply/bind显式指定、new调用指向新实例、箭头函数继承外层。最容易错的是把方法单独摘出来调用const counter { count: 0, inc() { this.count; } }; counter.inc(); // this 指向 counter正常 const fn counter.inc; fn(); // this 丢失严格模式下为 undefined报错修复方式是用bind固定或者改成箭头函数属性但箭头函数没有自己的this在对象方法里要谨慎。参数说明bind返回一个新函数且不立即执行call和apply是立即执行区别只在传参形式逐个 vs 数组。闭包是函数的另一个重点。闭包的本质是函数记住了它定义时的词法作用域即使外层函数已经返回。它既是模块化和私有变量的实现手段也是内存泄漏的常见来源——被闭包引用的变量不会被回收。复习时要把闭包和「循环变量捕获」「防抖节流」「模块模式」三个场景绑在一起记比孤立背定义有效得多。3.2 对象键值对只是表象原型链才是底层对象用键值对存储数据但 JavaScript 的对象系统建立在原型链上。每个对象都有一个内部链接指向它的原型对象属性查找会沿链向上走直到null。这解释了为什么数组能调用map——数组实例自身没有map是从Array.prototype上找到的。const person { name: A, greet() { return Hello, ${this.name}; } }; const student Object.create(person); // student 的原型是 person student.name B; console.log(student.greet()); // Hello, Bthis 指向 student console.log(person.isPrototypeOf(student)); // trueObject.create直接指定原型适合演示原型链实际开发中更常见的是class语法但它只是原型继承的语法糖底层机制不变。重点要区分「自有属性」和「继承属性」hasOwnProperty只查自有in会查整条链。遍历对象时for...in会枚举继承的可枚举属性所以通常要配合hasOwnProperty过滤或者直接用Object.keys()只取自有属性。数组作为对象特例复习重点是那几个会改原数组的方法push/pop/splice/sort/reverse和返回新数组的方法map/filter/slice/concat。混淆这两组是调试时的常见血泪经验以为sort返回新数组结果原数据被改了。4. 宿主交互层DOM操作的核心链路与性能意识4.1 获取、修改、监听DOM 操作的三段式DOM 是浏览器提供给 JavaScript 操作页面的接口它把 HTML 文档解析成一棵节点树。JS 对 DOM 的操作可以归纳为三段式先获取元素再修改内容或样式最后绑定事件。获取方式有getElementById、querySelector、querySelectorAll等前者返回单个元素、性能略好后者支持 CSS 选择器、更灵活。修改内容用innerHTML解析 HTML或textContent纯文本更安全修改样式通过style属性或切换class。const list document.querySelector(#todo-list); const input document.querySelector(#todo-input); function addItem(text) { const li document.createElement(li); // 创建节点避免 innerHTML 注入 li.textContent text; li.addEventListener(click, () li.remove()); // 点击删除 list.appendChild(li); }这段代码展示了「创建节点 绑定事件 插入」的标准链路。用createElement加textContent而不是拼接innerHTML是为了避免用户输入被当作 HTML 解析这是 XSS 防护的基本意识。参数说明appendChild把节点加到父节点末尾remove是现代浏览器提供的自删除方法不需要先拿父节点。事件监听的重点是事件流捕获阶段从外到内冒泡阶段从内到外addEventListener默认在冒泡阶段触发。事件委托利用冒泡把监听器挂在父元素上通过event.target判断实际触发者适合动态列表——新增的子项不需要单独绑定。4.2 性能意识批量操作与重排重绘DOM 操作慢慢在它可能触发浏览器的重排layout和重绘paint。复习时要建立一个直觉频繁读写 DOM 属性、逐个插入大量节点都会放大开销。优化手段包括用DocumentFragment批量插入、把样式修改合并、读写分离避免强制同步布局。const fragment document.createDocumentFragment(); for (let i 0; i 1000; i) { const li document.createElement(li); li.textContent Item ${i}; fragment.appendChild(li); // 先在内存中组装 } document.querySelector(#list).appendChild(fragment); // 一次性插入DocumentFragment是一个不在文档树中的轻量容器往它里面加节点不会触发页面重排最后一次性挂到真实 DOM 上只产生一次布局计算。这个模式在处理长列表渲染时非常实用也是「为什么我的页面卡顿」类问题的标准答案之一。5. 并发模型层异步编程的易错点与心智模型5.1 单线程不等于不能并发JavaScript 是单线程的指的是执行用户代码的主线程只有一个但浏览器还提供了定时器、网络请求、事件监听等由宿主环境管理的任务。异步的本质是把耗时任务交给宿主主线程继续执行任务完成后把回调放入队列等主线程空闲时再执行。理解这一点才能理解为什么setTimeout(fn, 0)不是立即执行以及为什么一段死循环会卡死整个页面。事件循环的复习重点是任务队列的优先级宏任务setTimeout、setInterval、I/O和微任务Promise 回调、queueMicrotask。每轮事件循环先执行一个宏任务然后清空所有微任务再进入下一轮。这个顺序是大量输出题的考点。console.log(1); setTimeout(() console.log(2), 0); Promise.resolve().then(() console.log(3)); console.log(4); // 输出顺序1 4 3 2同步代码先跑完输出 1 和 4微任务队列里的 Promise 回调在宏任务之前清空输出 3最后才是定时器宏任务输出 2。把这段顺序记牢比背「微任务优先」四个字更能应对变形题。5.2 回调、Promise、async/await 的演进逻辑三种异步写法不是互相替代的审美选择而是解决不同问题的产物。回调函数最原始但多层嵌套会形成回调地狱错误处理分散。Promise 把异步结果包装成对象支持链式then和统一的catch解决了嵌套和错误传递问题。async/await是 Promise 的语法糖让异步代码看起来像同步但本质仍是 Promiseawait后面跟的必须是 thenable。async function loadData(url) { try { const res await fetch(url); // 等待响应 if (!res.ok) throw new Error(HTTP ${res.status}); return await res.json(); // 等待解析 } catch (err) { console.error(加载失败:, err); // 统一捕获 throw err; // 继续向上抛交给调用方决定 } }async函数总是返回 Promise函数内throw等价于返回 rejected 的 Promise。try/catch能捕获await的拒绝这是它相对裸 Promise 链的可读性优势。参数说明fetch只在网络层失败时 rejectHTTP 4xx/5xx 不会自动 reject所以要手动检查res.ok——这是新手最常漏的一步。并发控制也是重点Promise.all全部成功才成功、任一失败即失败Promise.allSettled等全部结束并返回每个结果的状态Promise.race取最先结束的。选错方法会导致「一个请求失败拖垮整批」或「拿不到部分成功的结果」。6. 易漏点清单五个最容易翻车的细节易漏点一this在回调里丢失。为什么漏定义时看起来是对象方法传出去调用时调用形式变了。怎么补凡是把方法作为回调传递先确认是否需要bind或改用箭头函数包裹。易漏点二的隐式转换。为什么漏简单值比较时两者结果一样形成习惯。怎么补统一用只在判空时用 null并在代码规范里写死。易漏点三fetch不检查res.ok。为什么漏以为网络成功就是业务成功。怎么补每个fetch后紧跟状态码判断封装成统一的请求函数。易漏点四数组方法是否改原数组记混。为什么漏方法名相似文档不常看。怎么补记住「push/pop/splice/sort/reverse 改原数组map/filter/slice/concat 返回新数组」调试时先打印原数组。易漏点五微任务与宏任务的执行顺序。为什么漏只记结论不理解事件循环轮次。怎么补手写几段混合setTimeout和Promise的代码逐行推演输出形成条件反射。7. 复习落地用一张自检表查漏补缺复习到这一步最有效的动作不是再读一遍教程而是拿一张自检表逐项过把「以为自己会」和「真的会」分开。下面这张表按四个层次组织每项后面标注了自检方式能口述原理并写出最小示例才算过关。层次自检项过关标准基础var/let/const 差异能写出循环闭包对比示例并解释 TDZ基础原始值与引用值能说清赋值、比较、深浅拷贝的连锁影响构建this 五种指向能对每种调用形式判断 this 并说明原因构建原型链查找能用 Object.create 演示属性查找路径宿主DOM 三段式能不用 innerHTML 完成列表增删宿主事件委托能解释冒泡机制并写出父级监听示例并发事件循环顺序能手推宏微任务混合代码的输出并发Promise 组合方法能说清 all/allSettled/race 的适用场景自检时建议配合「最小复现」习惯每发现一个模糊点就在控制台写十行以内的代码验证而不是回去翻长文档。比如不确定sort是否改原数组直接const a[3,1]; const ba.sort(); console.log(ab)一秒出答案。这种验证式复习比通读效率高得多也更容易形成长期记忆。项目实践是查漏补缺的最后一环。原文提到的时钟、待办列表、计算器三个小项目恰好覆盖了定时器、DOM 增删、事件处理三条主线做完之后回头对照上面的自检表缺口会非常明显。学习资源方面MDN 适合查 API 细节在线开源书适合补概念脉络交互式课程适合练手三者分工不同不要指望一个来源解决所有问题。我自己的习惯是每次觉得「这个知识点我懂了」就强制走一遍「口述原理 → 写最小示例 → 找一个反例」三步走不通的地方就是真正的漏洞。从那以后我每次复习 JS 都强制走一遍这张自检表比刷十道输出题管用。希望帮到你。本文还有配套的精品资源点击获取