如果你是从HTML和CSS转过来的，第一次写JavaScript多半会有点懵：HTML标签写在页面上就能看见效果，CSS写个样式刷新就有变化，但JS写了半天，屏幕上什么都没有。这是正常的，因为JS的产出不是"可见的页面"，而是"在后台运行的能力"。js基础（2）这篇，我想顺着第一批语法讲完之后的路径，把函数、作用域、数组对象、DOM和事件这些真正让网页动起来的基础补完。
这篇适合谁？适合那种变量能分清、for循环能写、但不知道接下来该练什么的初学者；也适合想回过头补一补基础、把"函数里this为什么变了""为什么map和forEach结果不一样"这类问题彻底搞懂的人。你只要会最基础的HTML标签、大概知道CSS选择器长什么样，这篇就能跟着跑起来。代码全部可以打开浏览器控制台直接复制粘贴看效果，不用搭任何环境。
1. 函数：先把"你以为是基础"的部分摸透
函数在JS里不是"把代码包起来"这么简单。它和变量一样，有声明时机的问题，有作用域的问题，还有一套让人迷惑的this机制。很多初学者写到后面发现函数不好用，往往不是逻辑错了，而是从一开始对函数的理解就建立在"凑合能用"上。
1.1 函数声明与函数表达式的区别
看这两段几乎一样的代码：
// 函数声明 console.log(sayHi('小明')); // 正常输出 function sayHi(name) { return '你好，' + name; } // 函数表达式 console.log(sayBye('小明')); // 报错：sayBye is not a function var sayBye = function(name) { return '再见，' + name; };第一段能正常执行，因为函数声明会整体提升（hoisting），JavaScript在运行代码前就把function sayHi这个声明放到了当前作用域的顶部。第二段里的var sayBye只把声明提升，赋值部分保持原位，你调用的时候它还没被赋成函数，自然就报错了。
这个差异在真实项目中直接影响代码组织方式。我写代码的习惯是：如果这个函数要在文件开头就被调用，就写成函数声明，省得还要注意调用位置；如果是回调函数、临时的一次性逻辑，就用函数表达式或者箭头函数，让它在定义之后才生效。
这里有个容易忽略的点：函数提升只提升声明，不提升执行。也就是说你可以在定义之前调用函数，但函数体里的代码仍然在调用那一刻才执行。新手容易误以为提升等于"提前执行了一遍"，实际上是两码事。
1.2 箭头函数：别只图省事
箭头函数是ES6之后很多人用得最爽的语法，它确实让代码短了不少，但"短"不等于"没有代价"。箭头函数和普通函数至少有两个关键区别：
- 没有自己的this，它this的取值来自定义时所在的外层作用域
- 不能当作构造函数使用
我用一个新手最常踩的例子说明：
const user = { name: '张三', greet: function() { setTimeout(function() { console.log('你好，' + this.name); // 输出"你好，undefined" }, 1000); } }; user.greet();普通函数里的this，在setTimeout回调执行时指向了全局对象（浏览器里是window），window.name是undefined。但把回调换成箭头函数：
const user = { name: '张三', greet: function() { setTimeout(() => { console.log('你好，' + this.name); // 输出"你好，张三" }, 1000); } }; user.greet();箭头函数的this是在定义那一刻确定的，它在greet函数内部定义，greet的this指向user，所以箭头函数接过了这个this。记住一句话：普通函数的this看调用方式，箭头函数的this看定义位置。
实际写代码时我推荐的原则是：需要动态this的时候用普通函数，例如对象方法、事件回调里要访问当前元素的时候；其他场景如果不需要this，优先用箭头函数，它更直观，也没有this指向的隐患。
1.3 作用域链与变量提升的底层逻辑
作用域这一块，核心就三件事：var是函数作用域，let和const是块级作用域，所有声明都有提升但这个提升的处理方式不一样。
function test() { if (true) { var a = 1; let b = 2; } console.log(a); // 1，var是函数作用域，出了if块还在 console.log(b); // 报错，let是块级作用域 }let和const出现的"报错"，底层原因是暂时性死区（TDZ）：从进入块级作用域开始到声明执行完毕之前，这个变量虽然存在但不可访问。这是JavaScript在ES6之后做的一个纠偏，强制你"先声明再用"，避免var那种变量提升造成的各种奇怪结果。
关于var的变量提升，我一直用一个比喻给新人解释：JavaScript引擎在编译阶段会先"扫一遍"代码，把var声明的变量贴上标签放到作用域的格子里，但不放值；执行到赋值语句时，才把值放进去。所以你在赋值之前访问它，拿到的是undefined而不是报错：
console.log(n); // undefined，不会报错 var n = 5;这看起来是"健忘"的体现，但却是很多bug的来源。我现在写代码基本不用var，全部let和const，就是为了少踩"变量提升了但值没到位"这种坑。
闭包是作用域链的自然产物，它其实不玄乎：内部函数引用了外部函数的变量，这个外部变量在外部函数执行完之后仍被内部函数"记住"。最常见的应用就是计数器：
function createCounter() { let count = 0; return function() { count++; return count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2count被createCounter里的匿名函数捕获了，即使createCounter已经执行完毕，count也没有被垃圾回收。防抖、节流、封装私有状态这些高级玩法，底层全是这个机制。你现在不要求立刻会写防抖，但要知道：函数返回函数、返回的函数能访问外部变量，这就是闭包，它没有你想的那么难。
2. 数组与对象：基础语法的日常用法
学完JS第一门课的时候，你可能背过数组和对象的"属性和方法列表"，但真到写页面的时候，列表里的方法一半想不起来。这一节不看全量API，只讲日常用得最多的几个操作，以及所有新手都会踩的引用陷阱。
2.1 数组方法：先分清map和forEach
map和forEach长得像，但返回值的区别决定了它们的使用场景完全不一样：
const numbers = [1, 2, 3, 4, 5]; const forEachResult = numbers.forEach(item => { return item * 2; }); console.log(forEachResult); // undefined const mapResult = numbers.map(item => { return item * 2; }); console.log(mapResult); // [2, 4, 6, 8, 10]forEach只是遍历，你在里面做的操作改变不了原数组，也不返回新数组；map则把每次回调的返回值收集起来，生成一个新数组。如果你需要"把数组变成另一个同样长度的新数组"，用map；如果你只是想"每条数据执行一遍逻辑"，用forEach。
filter也差不多，它保留回调返回true的项，生成新数组。find则是返回第一个满足条件的项本身，不是数组，找不到就返回undefined。这几个方法的回调参数都是(value, index, array)，我建议新手只用first两个参数就够，第三个参数很少用到。
还有一点容易被忽略：map、filter、forEach这些方法都会跳过数组中的空位（稀疏数组的空槽），但不会跳过占位的undefined。这个差异在一些从接口拿数据、可能产生空格的场景里会出现，排查思路记住就两条：先看数组本身有没有空位，再看回调里有没有对undefined元素的宽容处理。
2.2 对象的引用陷阱：为什么改了一个"复制品"，原对象也变了
这是JS基础里最值得花时间理解的概念之一。看这段：
const objA = { name: '张三', age: 20 }; const objB = objA; objB.name = '李四'; console.log(objA.name); // "李四"objB = objA这一步，并不是把objA的内容复制了一份给objB，而是让objB和objA指向同一块内存。你通过objB改数据，改的其实是objA也指向的那块内存。这跟基本数据类型不一样，数字、字符串赋值过去之后就是独立的。
要复制一个对象，需要"浅拷贝"：
const objA = { name: '张三', age: 20 }; const objB = { ...objA }; // 或者 Object.assign({}, objA) objB.name = '李四'; console.log(objA.name); // "张三"，没问题但注意浅拷贝只复制一层。如果对象里有嵌套对象，比如：
const objA = { name: '张三', address: { city: '北京' } }; const objB = { ...objA }; objB.address.city = '上海'; console.log(objA.address.city); // "上海"，嵌套对象还是共享的要完全独立，需要深拷贝。现在浏览器普遍支持structuredClone：
const objB = structuredClone(objA);JSON.parse(JSON.stringify(objA))这种老办法也能用，但它会丢失函数、undefined、日期对象等类型，生产环境下要慎用。我自己的实践建议是：能用浅拷贝解决的场景不要想深拷贝；只有对象里嵌套了两层以上并且确定要改内层数据，才考虑深拷贝，优先structuredClone。
2.3 解构赋值：让代码短一半的语法糖
解构赋值是我日常写代码用到最多的语法之一。数组解构适合有顺序的数据，对象解构适合按名字取字段：
// 数组解构 const [first, second, ...rest] = [10, 20, 30, 40]; console.log(first); // 10 console.log(second); // 20 console.log(rest); // [30, 40] // 对象解构 const user = { name: '张三', age: 20, city: '北京' }; const { name, city, gender = 'unknown' } = user; console.log(name); // "张三" console.log(gender); // "unknown"，属性不存在时用默认值对象解构还可以重命名：
const { name: userName } = user; console.log(userName); // "张三"函数参数解构更实用，当接口返回的数据是一个对象，你只需要其中几个字段时：
function formatUser({ name, age }) { return name + '今年' + age + '岁'; }这样调用formatUser时不用在函数体里写user.name、user.age这种重复访问，代码扫一眼就能明白参数里需要哪些字段。新手阶段容易犯的问题是解构不存在的字段得到undefined，还拿undefined去拼字符串，结果页面上出现"undefined今年undefined岁"。判断字段是否存在再给默认值，这是解构赋值的默认值语法最有用的场景。
3. DOM：从打印结果到真正改变页面
前面所有的语法练习都可以在控制台里完成，但前端开发的最终目标是把数据渲染到页面上、让用户能操作。这一节从最基本的DOM操作讲起，让你写的JS真正"看得见"效果。
3.1 查询元素：选择器是你的第一把钥匙
我在教学里反复强调一件事：DOM操作的第一步不是"改页面"，而是"找到页面上的那个东西"。查询元素最常用的三种方式：
// 单个元素，返回第一个匹配项；没有则返回null const title = document.querySelector('#app h1.title'); // 多个元素，返回NodeList（不是数组） const items = document.querySelectorAll('.list-item'); // 老派方法，按id / 类名 / 标签名查询 const root = document.getElementById('app');querySelector和querySelectorAll用的是CSS选择器语法，所以会写CSS的人拿到就能用，这也是为什么我要在标题里强调"html+css+js基础语法"，前面两个学好了，DOM操作里查询元素的语感是直接迁移过来的。
有一个几乎所有人都会踩的坑：querySelectorAll返回的是NodeList，不是数组。它可以遍历，但filter、map这些方法不能直接用。我推荐的写法是转成数组：
const items = Array.from(document.querySelectorAll('.list-item')); // 或者 const items = [...document.querySelectorAll('.list-item')];另外，你拿到的元素是"活"的吗？getElementsByClassName这类方法返回的是HTMLCollection，有"动态性"——DOM变化它会自动更新。querySelectorAll返回的NodeList是静态的快照，你查完之后再新增DOM，它不会自动变。问清楚这个差别之后，很多"数据看着是旧的不刷新"的排查思路就能理顺了。
3.2 修改内容和样式：textContent、innerHTML与classList
找到元素之后，改内容就有两种主要方式：
const box = document.querySelector('.box'); // 纯文本，安全 box.textContent = '这是纯文本'; // 插入HTML，字符串里的标签会被解析 box.innerHTML = '<span class="highlight">这是富文本</span>';两者之间我几乎总是优先textContent。原因很简单：innerHTML会解析HTML标签，如果字符串里有用户输入的内容且没做转义，就会有XSS风险。假设用户提交了""这种内容，你用innerHTML插进去，它就直接变成可执行脚本了。在你还没学完整的安全知识之前，尽量养成一个习惯：能textContent就不innerHTML。
改样式的方式也有讲究。直接setAttribute或者点style属性，会覆盖整个style定义，不推荐。日常用得最多的其实是classList：
box.classList.add('active'); box.classList.remove('hidden'); box.classList.toggle('expanded');这种做法的好处是把样式控制权留给CSS，JS只管"状态"，不用在JS里写一长串样式字符串。页面视觉统一、切换状态也干净。我见过不少新手直接在JS里写box.style.display = 'none'，不是说不行，但维护起来比较费劲，尤其是当显示隐藏还涉及动画过渡的时候，classList配合CSS的transition会有更好的体验。
3.3 创建和移除节点：动态渲染的核心动作
动态渲染，就是根据数据往页面里塞内容：
const list = document.querySelector('.list'); const data = ['苹果', '香蕉', '橙子']; data.forEach(item => { const li = document.createElement('li'); li.textContent = item; list.appendChild(li); });createElement创建元素，textContent塞内容，appendChild放到父节点里，这是最基础的三连。如果要插到指定位置，用insertBefore：parent.insertBefore(newNode, referenceNode)；想移除节点，用parent.removeChild(childNode)或者新一点写法 childNode.remove()。
这里有一个性能相关的小经验：如果你要一次性往页面插入很多新节点，别一条一条appendChild，因为每次操作都会触发浏览器的DOM重排。正确做法是先建一个DocumentFragment（文档碎片），往碎片里塞节点，最后把整个碎片一次性挂到真实DOM上：
const fragment = document.createDocumentFragment(); data.forEach(item => { const li = document.createElement('li'); li.textContent = item; fragment.appendChild(li); }); list.appendChild(fragment);从用户感知的角度，这样DOM操作次数更少，页面渲染更流畅。等你后面学到框架的虚拟DOM原理，会发现它做的优化本质上也是"减少不必要的真实DOM操作"，原理是一致的。
4. 事件：让页面响应你的操作
JS做交互，核心就是事件。点击按钮、输入文字、滚动页面、按键盘，全都是事件。这一节说完事件绑定的方式、事件对象、以及冒泡和委托这两个高频概念。
4.1 三种绑定事件的方式，推荐哪一种
第一种是HTML标签里写onclick属性：
<button onclick="handleClick()">按钮</button>不推荐。它把JS逻辑和HTML结构耦合在一起，逻辑一复杂就乱套，而且全局函数的命名容易互相污染。
第二种是DOM元素的onclick属性：
const btn = document.querySelector('.btn'); btn.onclick = function() { console.log('点击了'); };比第一种好一点，但它有一个问题：同一个元素、同一个事件只能绑定一个处理函数，后面绑的会把前面的覆盖掉。
第三种是addEventListener：
const btn = document.querySelector('.btn'); btn.addEventListener('click', function() { console.log('第一次绑定'); }); btn.addEventListener('click', function() { console.log('第二次绑定'); });同一个事件可以绑定多个处理函数，互不覆盖；而且后面可以通过removeEventListener解绑。这是生产环境的标准写法。唯一的坑是removeEventListener需要传入同一个函数引用，匿名函数没办法移除，所以那些"需要临时监听、用后即毁"的场景，记得把函数提取成命名函数。
4.2 事件对象：target、currentTarget与默认行为
所有事件处理函数都会收到一个事件对象，它携带了这次事件的所有信息：
btn.addEventListener('click', function(event) { console.log(event.target); // 实际点击的那个元素 console.log(event.currentTarget); // 绑定监听的那个元素 event.preventDefault(); // 阻止默认行为 });target和currentTarget是新手最容易弄混的一对。看一个具体场景：
<ul id="list"> <li>项目1</li> <li>项目2</li> </ul>document.getElementById('list').addEventListener('click', function(event) { console.log(event.target); // 你点的是li，这里就是那个li console.log(event.currentTarget); // 始终是ul，因为监听绑在ul上 });点击li时，event.target是li，因为你是真的点在一个li上；event.currentTarget是ul，因为监听器是ul上注册的。判断标准就一条：target是谁触发的，currentTarget是谁监听的。
event.preventDefault()用来阻止默认行为，最典型的场景是阻止表单提交后刷新页面：
document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); // 这里做自定义校验和提交逻辑 });还有一个高频方法是event.stopPropagation()，作用是阻止事件继续冒泡，后面小节细说。
4.3 事件委托：动态列表的最佳实践
浏览器的事件机制是：事件先从最顶层元素向下捕获到目标元素，再从目标元素向上冒泡回到顶层。这个"冒泡"给了我们一种很实用的技巧——事件委托。
用前面的ul列表演示。如果列表里的li是动态追加的，你直接用querySelectorAll去给每一个li绑定click事件，那新增的li就没有监听器。解决办法是给ul这个父元素绑定一次监听，然后在冒泡阶段用event.target判断你点的是不是li：
document.getElementById('list').addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log('点击了', event.target.textContent); } });这个写法有两大好处：一是无论列表增长多少，监听器始终只有一个，内存占用低；二是新增的li即使是在绑定之后才插进DOM的，因为事件冒泡到ul时会被统一处理，所以"天然有效"，不需要重新绑定。
实战中要注意的坑是event.target不一定就是li本身。如果li里面有嵌套的span或者a标签，你点的是span，event.target就是span。稳妥的判断是加一个closest：
document.getElementById('list').addEventListener('click', function(event) { const li = event.target.closest('li'); if (li) { console.log('点击了', li.textContent); } });closest会从当前元素沿着祖先链向上找匹配的最近元素，找到不到返回null。这个写法让事件委托几乎不会因为嵌套元素而失效，我强烈建议你直接记住。
事件委托用多了还要注意别滥用stopPropagation。如果页面上层还有其他监听器，你把冒泡一停，上层就接不到事件了。我自己排查问题时，看到stopPropagation的第一反应都是追问一句：你是真的想让事件停在这里，还是只是想让当前逻辑不干扰父层？大多数时候其实不需要停。
5. 新手最容易栽的坑：类型转换与异步时序
基础语法学完之后，真正的分水岭不是会写多少语法，而是遇到问题时的排查能力。这一节聊三个我反复看到新手栽跟头的地方，每一个都是在"基础语法"之上必须掌握的思考方式。
5.1 类型转换：为什么1 + '1'是'11'而不是2
JavaScript是弱类型语言，运行时会根据上下文自动做类型转换。这个设计很方便，但也埋了很多雷：
console.log('1' + 1); // "11"，加号里有字符串，就变成字符串拼接 console.log('1' - 1); // 0，减号没有字符串拼接语义，转成数字计算 console.log('5' * '2'); // 10，两个字符串都转成了数字 console.log(0 == ''); // true，==会做隐式转换 console.log(0 === ''); // false，=== 要求类型和值都相等我的建议很简单：一律使用===和!==做判断，不要用==和!=。这样可以避免PHP脚本里"0为空字符串"这类坑。字符串转数字有专门的方法，Number('5')、parseInt('5px', 10)、parseFloat('3.14')，按需要选择。
还有一个细节：比较数组和对象时，==和===的行为也容易踩坑。两个看起来内容相同的数组用==比较总是false，因为比较的是内存地址而不是内容。想比较内容，要么手动遍历，要么转成JSON字符串再比对，要么用专门的库，总之要知道"内容相同"和"引用相同"是两件完全不同的事。
5.2 异步时序：为什么打印顺序总是"出乎意料"
新手刚开始接触异步时，最常遇到的困惑是一段代码的执行顺序：
console.log('开始'); setTimeout(function() { console.log('定时器'); }, 0); console.log('结束');输出结果是"开始"、"结束"、"定时器"。即使setTimeout的延迟设成0，它也不会立刻执行，而是被放进任务队列，等当前同步代码全部执行完之后才轮到它。这就是事件循环的基本概念。
我在带新人的时候发现，很多人理解"异步"的最大障碍是觉得"代码是从上往下跑的，为什么不是123依次执行"。理解这个问题的关键是区分两件事：代码的书写顺序和代码的执行时机。setTimeout只是"放了个定时器，等时间到了再把回调扔进队列"，它不阻塞后面的同步代码。
给一个实际的场景：接口数据还没回来，你就去渲染DOM了。在还没学fetch、axios这些网络请求之前，可以先理解成"取数据是异步的，渲染是同步的"，所以渲染必须在"数据到位之后"才能执行。避免这类时序bug最有效的工具，就是在关键节点做日志输出，打印每个环节的执行顺序，用实际输出反推引擎的处理逻辑，比在脑子里模拟快得多。
5.3 undefined相关的报错：从报错信息学会排查
新手报错最常见的就是这样一行：
Cannot read properties of undefined (reading 'length')意思是：你试图访问一个undefined的属性。一般可以拆成三步排查：
- 看是哪一行报的错，找到那个undefined变量
- 往前追溯这个变量是怎么来的——接口返回的？数组取出来的？函数算出来的？
- 在最前面的赋值点打印一下，确认这个变量在源头那一刻就已经是undefined，还是在中间某个环节变成了undefined
我见过一个典型的场景：数据是接口返回的数组，但接口在异常时返回了null，代码里直接用response.result[0].name，结果在result[0]那里就炸了。排查步骤不是去改后面渲染的代码，而是在拿到response之后检查result是否存在、是不是数组。
写基础阶段的时候，我对新人的核心建议就三条：能用===不用==；能用let/const不用var；异步代码里多打console.log观察实际执行顺序。这三条做到，你踩的坑至少少一半。
这套内容练完之后，你就可以尝试做几个小练习巩固：给一个待办清单页面加上"输入、点击添加、点击删除"的完整功能；或者做一个简单的图片切换轮播。这些任务会同时用到函数、数组、DOM和事件委托，正好把这篇的基础串起来。我自己带人的习惯是，这几个小项目如果有任何一个能不看答案做出来，js基础（2）这一阶段就算真正过关了。
