前端基础第三篇：JavaScript核心语法与DOM操作实战指南

这是我自学前端基础系列的第三篇笔记。前两篇我们搞定了HTML结构和CSS样式，现在页面长得像模像样了，但还差最关键的一步——让页面"活"起来。这一篇我打算把JavaScript核心基础和前端工具链串起来，把之前零散的知识点整合成一条能真正用来写项目的知识线，为后面上手Vue这类框架做铺垫。

这篇笔记适合两类人：一类是跟我一样自学前端、刚啃完HTML和CSS的新手，另一类是学过JS但总觉得知识是散的、想系统性串一遍的朋友。我会把第三篇笔记里最核心的JavaScript语法、DOM操作、调试方法和一个完整的小案例都写清楚，每个例子都能直接复制运行，不会有那种"看了就会、关了书就忘"的问题。

1. 第三篇笔记的知识定位：从"页面长什么样"到"页面怎么响应"

1.1 为什么第三篇必须是JavaScript

学前端有个很常见的误区：以为HTML+CSS就是前端的全部，结果写到第三个页面就会发现，所有东西都是静态的，点按钮没反应、表单不校验、数据变不了，这时候才意识到JavaScript才是前端的灵魂。

在前端基础系列里，第三篇安排JavaScript是有讲究的。HTML是骨架，CSS是皮肤，JavaScript是肌肉和神经系统。页面能不能根据用户操作做出反应、能不能从服务器拿数据然后更新界面、能不能做复杂的交互效果，全看JavaScript。打个比方：你把房子盖好了、装修好了，但里面没人住、没通电，那只是个样板间。JavaScript就是给样板间通上电、装上智能家居系统的那个环节。

从学习路径来看，如果把Vue2、Vue3作为下一阶段目标，那JavaScript基础更是绕不开的坎。Vue的响应式原理、组件通信、计算属性、生命周期钩子，这些概念全都是JavaScript语言特性在上层的封装。现在热搜词里"前端最新vue2+vue3基础入门到实战项目全套教程"这么火，点进去你会发现，凡是跟得吃力的同学，八成是JavaScript基础没打牢。

1.2 这篇笔记与前两篇的衔接关系

我写前两篇笔记时留了个伏笔：HTML里所有标签都有默认样式，CSS能覆盖它们，但样式是静态的，没法根据用户状态改变。第三篇要解决的就是"状态"这个词。用户登录了没、购物车加了几个商品、当前页签激活的是哪一项、输入框里的内容合法吗——这些动态变化，都是JavaScript要管的事。

所以我在这篇笔记里定了三个目标：

• 能看懂并写出基本的JavaScript语法，包括变量、数据类型、函数、循环、条件判断
• 能使用DOM操作来修改页面内容和样式，理解事件驱动的编程模型
• 能独立完成一个带交互的小项目，把语法、DOM、事件、调试串成完整链路

学完这篇再回头看前两篇，你会发现自己对HTML和CSS的理解也加深了——因为你终于知道id、class、data-属性这些机制到底有什么用。

2. 核心语法速览与"为什么这么设计"

2.1 变量声明的三兄弟：var、let、const

JavaScript的变量声明有三兄弟：var、let、const。很多新手上来就背" const 优先、let 其次、var 别用"，但不知道背后的原因，这里我用大白话拆一下。

var的问题出在"函数作用域"和"变量提升"上。变量提升的意思是，代码还没执行到声明那行，变量就已经存在了，只不过值是undefined。这在旧项目里很容易搞出"运行不报错但结果不对"的诡异情况。let和const解决的是"块级作用域"。用花括号{}包起来的代码块，就是let和const的隔离区，出了这个区就访问不到。这才是现代编程语言该有的样子。

对比一下：

javascript复制// var的变量提升
console.log(a); // undefined，不报错，但这是个坑
var a = 10;

// let的暂时性死区
console.log(b); // 报错：Cannot access 'b' before initialization
let b = 20;

const和let的区别只有一个：const声明的变量，基本类型值不能重新赋值，但如果是对象或数组，里面的内容还是能改的。这个特性结合对象和数组本身的引用传递机制，是后面理解Vue响应式原理的基础开关之一。

我的建议很简单：默认全部用const，只有当确定某个变量后面需要重新赋值时才用let。var直接忘掉它，面试题里见到知道是历史遗留就行。

2.2 数据类型：基础六种加一种"麻烦精"

JavaScript数据类型分两大类：基本类型（string、number、boolean、undefined、null、symbol、bigint）和引用类型（object、array、function本质上也是对象）。理解两者的区别，是第三篇笔记里最容易卡壳的地方。

基本类型是"按值存储"的，你复制一个变量，就是真的复制了一份数据，改哪个都不影响对方。引用类型是"按引用存储"的，你把一个对象赋给另一个变量，本质上两个变量指向同一块内存，改任意一个，另一个也会跟着变。这个区别用代码演示最直观：

javascript复制let a = 5;
let b = a;
b = 10;
console.log(a); // 5，互不影响

let obj1 = { count: 1 };
let obj2 = obj1;
obj2.count = 99;
console.log(obj1.count); // 99，同一个对象被改了

还有个麻烦精是typeof null，返回的是"object"，但null其实属于基本类型。这是JS诞生时就留下的bug，改了会影响老代码，所以一直保留到现在。知道有这么回事就行，别纠结。

2.3 函数与箭头函数：this的指向问题

函数是JavaScript的一等公民，这个说法听着玄乎，翻译过来就是：函数可以当参数传给另一个函数、可以当返回值、可以存在变量里。这种能力是回调函数、事件监听、数组高阶函数（map、filter、reduce）的基础。

普通函数和箭头函数最大的区别在于this指向。普通函数的this在调用时决定，谁调用了它，this就指向谁。箭头函数没有自己的this，它沿用的是定义时外部作用域的this。第三篇笔记里"点击按钮修改内容"这个典型场景，最容易踩的就是this指向坑。

javascript复制const btn = document.getElementById('btn');

// 普通函数：this指向btn本身
btn.addEventListener('click', function() {
    console.log(this); // btn元素
});

// 箭头函数：this指向外层（这里就是window）
btn.addEventListener('click', () => {
    console.log(this); // window
});

如果你在普通函数里又想用外层的this，以前只能先存一下 const that = this，现在箭头函数直接解决了这个问题。在Vue组件里写方法时，不建议用箭头函数作方法体，因为Vue需要让this指向组件实例，这是后话，但根子在这里。

3. DOM操作与事件机制：让页面动起来

3.1 选元素和改内容的三板斧

DOM（Document Object Model）就是浏览器把HTML结构翻译成一棵对象树，JavaScript通过这棵树来增删改查页面元素。第三篇笔记里最常用的操作就三板斧：选元素、改内容、改样式。

选元素有三个高频API：

• document.getElementById('id')：选单个元素，兼容性最好
• document.querySelector('选择器')：用CSS选择器选第一个匹配元素，语法最灵活
• document.querySelectorAll('选择器')：选所有匹配元素，返回一个类数组

改内容和改样式的代码很简单，但要注意性能：

javascript复制const title = document.querySelector('.title');
title.textContent = '新的标题'; // 改文本
title.innerHTML = '<span>带标签的内容</span>'; // 改HTML，小心XSS
title.style.color = 'red'; // 改行内样式

textContent和innerHTML是有区别的。textContent只改纯文本，innerHTML可以塞HTML标签。新手容易图方便一直用innerHTML，但如果内容是用户输入的，就存在XSS（跨站脚本攻击）风险。我的习惯是：能用textContent就绝不用innerHTML，实在要插入模板结构时，也要先确认内容来源可信。

3.2 事件监听与事件冒泡

事件机制是"用户操作驱动代码运行"的桥梁。核心API是addEventListener，第一个参数是事件类型，第二个参数是回调函数，第三个参数可以控制捕获阶段还是冒泡阶段。

这里要重点理解事件冒泡：当你点击一个按钮时，浏览器会从按钮本身开始，一层一层向上触发父元素的同一个事件，直到document。这个过程叫冒泡。事件委托就是利用这个特性：不想给十个按钮分别绑定事件，就绑定到它们的父容器上，通过判断事件目标来处理。这在动态列表场景里特别好用：

javascript复制const list = document.getElementById('list');

list.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        console.log('点击了', e.target.textContent);
    }
});
// 后面新增的LI不用再单独绑事件了

冒泡也有坑。如果你在一个父元素和子元素上分别绑了click事件，点击子元素时两个都会触发，顺序是从里到外。如果不希望事件继续往上冒，用 e.stopPropagation() 拦住它。如果希望事件一直冒泡到document，那就注意别在父级绑了不相关的处理函数，白白消耗性能。

3.3 修改样式与classList操作

改样式的需求在交互场景里太多了：点击高亮、弹窗显示隐藏、菜单展开收起。新手最直接的做法是改style属性，但更专业的做法是操作class。

为什么推荐class？因为样式归属CSS管，逻辑归属JavaScript管，用class切换就是把"这个元素现在是什么状态"告诉CSS，具体长什么样由CSS决定。项目大了以后，你会发现样式逻辑混在JS里是最难维护的代码之一。classList提供了一组好用的方法：

javascript复制element.classList.add('active');      // 添加类
element.classList.remove('active');   // 删除类
element.classList.toggle('active');   // 有就删，没有就加（切换）
element.classList.contains('active'); // 判断是否有某类

其中toggle是最省事的，一个方法实现了"分支判断+添加/删除"的完整逻辑。我的经验是：凡是"点击切换状态"的需求，先想toggle，别自己写if else，代码少一半。

4. 数组方法与对象操作：业务代码的基石

4.1 map、filter、reduce到底怎么用

第三篇笔记必须把数组高阶方法讲透，因为这套东西在Vue的计算属性、列表渲染里会被反复用到。很多新手写数组遍历只会用for循环，能跑通但代码冗余、可读性差。

map：原数组不变，返回一个同样长度、内容被"映射"过的新数组。典型的场景是批量处理数据：

javascript复制const prices = [19.9, 29.9, 99.0];
const pricesWithTag = prices.map(p => '¥' + p.toFixed(2));
console.log(pricesWithTag); // ['¥19.90', '¥29.90', '¥99.00']

filter：原数组不变，返回一个新的、通过条件筛选的子集。典型的场景是搜索、过滤列表：

javascript复制const products = [
    { name: '键盘', price: 199 },
    { name: '鼠标', price: 89 },
    { name: '显示器', price: 1299 }
];
const affordable = products.filter(p => p.price < 500);

reduce：把整个数组累积成一个值。求和、求最大值、统计数据，都是它的菜：

javascript复制const nums = [10, 20, 30, 40];
const sum = nums.reduce((total, n) => total + n, 0);
console.log(sum); // 100

记住reduce的第二参数是初始值，不传的话会把数组第一个元素当初始值，遇到空数组就直接报错，所以建议永远传初始值。

4.2 对象解构、展开运算符与深拷贝浅拷贝

对象是JavaScript里最常见的容器，接口返回的数据、页面状态、配置信息，全是对象。第三篇笔记里要掌握三个实用特性：解构赋值、展开运算符、深浅拷贝。

解构赋值是"从对象或数组里取值，直接赋给变量"的语法糖：

javascript复制const user = { name: '张三', age: 18, city: '北京' };
const { name, age } = user;
console.log(name, age); // 张三 18

展开运算符的用途很广，最主要的场景是"合并对象/数组、复制对象/数组"：

javascript复制const config = { theme: 'dark', pageSize: 20 };
const newConfig = { ...config, pageSize: 50, sortBy: 'time' };
console.log(newConfig); // { theme: 'dark', pageSize: 50, sortBy: 'time' }

但这里有个大坑：展开运算符和Object.assign做的都是浅拷贝。浅拷贝的意思是，对象如果嵌套了对象，外层拷贝了，但内层仍然是同一个引用。改内层数据会互相影响。深拷贝才是一层层全部复制一份。我建议封装一个工具函数来处理深拷贝：

javascript复制function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    if (Array.isArray(obj)) return obj.map(deepCopy);
    const clone = {};
    for (const key in obj) {
        clone[key] = deepCopy(obj[key]);
    }
    return clone;
}

或者简单粗暴用 JSON.parse(JSON.stringify(obj))，但函数、undefined、日期对象会丢，只适合纯数据场景。这一块搞明白了，后面学Vue的props传值和响应式更新时，会少掉很多头发。

5. 异步编程：setTimeout、Promise和async/await

5.1 为什么JavaScript是单线程还要学异步

前端最容易被忽视但又"必须会"的就是异步编程。JavaScript是单线程语言，意味着同一时刻只能干一件事。但页面里经常有"等接口返回数据"、"等用户输入"、"等定时器完成"这类没法立刻出结果的操作，总不能一直卡住页面等结果吧。

异步就是解决"不阻塞主线程"的方案。你发起一个请求，JavaScript先不等它返回，继续往下执行代码，等数据到了，再通过回调函数来处理。这个模型新手刚接触时非常容易晕，特别是"明明写了代码，为什么执行顺序不对"。

看个实测例子：

javascript复制console.log('1');
setTimeout(() => {
    console.log('2');
}, 0);
console.log('3');
// 输出顺序：1、3、2

原因在于setTimeout是把回调放进任务队列，等当前同步代码全部执行完才会被搬到执行栈。第三篇笔记用了大量篇幅讲"执行顺序"，因为这个点直接决定你能不能排查异步代码的问题。

5.2 Promise解决了什么问题

回调函数做异步最大的问题是"回调地狱"——层层嵌套，代码横向发展，维护体验极差。Promise就是来解决这个问题的，它把一个异步操作包装成一个"承诺"对象，有三种状态：pending（进行中）、fulfilled（已完成）、rejected（已失败）。状态一旦确定就不能再变。

Promise链式调用让代码从嵌套变成了平铺：

javascript复制function getUser() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ name: '张三', id: 1 });
        }, 1000);
    });
}

getUser()
    .then(user => {
        console.log('拿到用户', user);
        return user.id;
    })
    .then(id => {
        console.log('根据用户ID请求订单', id);
    })
    .catch(err => {
        console.error('出错啦', err);
    });

then方法里return的值会被下一个then接收到，这就是Promise链的"传值机制"。catch统一处理前面任意一个环节的错误。这套逻辑其实和Vue里请求接口后处理数据的流程是一模一样的。

5.3 async/await：异步代码的同步写法

async/await是Promise的语法糖，它的意义在于：让你用写同步代码的方式写异步代码，顺序就是顺序，不用再一层层then。

javascript复制async function loadData() {
    try {
        const user = await getUser();
        console.log('拿到用户', user);
        const orders = await getOrders(user.id);
        console.log('拿到订单', orders);
    } catch (err) {
        console.error(err);
    }
}

await关键字会暂停当前async函数的执行，等Promise出结果后再继续往下走。注意两点：

• await只能在async函数内部用
• 用try/catch包住await调用，否则报错了会直接抛到全局

我的习惯是：新代码一律用async/await，除非在维护老代码看到Promise链，才保留原样。async/await把错误定位变得更直观了——就跟你写普通代码一样，哪一行出问题，错误栈就在哪一行。

6. 浏览器调试工具实操：console、network和断点

6.1 console的四个隐藏用法

第三篇笔记如果只看代码不学调试，基本等于白学。我见过太多新手卡在一个bug上两小时，结果就是不会看控制台报错。调试的第一步是把console用起来，但别只会console.log。

console.log适合打印普通变量，但项目大了会刷屏。下面这几个是我实测下来最常用的：

javascript复制console.log('%c样式化输出', 'color: red; font-size: 20px;'); // 带样式的日志
console.table([{ name: '张三', age: 18 }, { name: '李四', age: 20 }]); // 表格形式输出
console.time('耗时测试');
// 中间是待测代码
console.timeEnd('耗时测试'); // 打印执行耗时
console.assert(1 === 2, '条件不成立时输出错误'); // 断言

console.table在调试数组和对象列表时特别好用，一眼就看出数据结构对不对。console.time和console.timeEnd可以快速判断哪段代码拖慢了页面性能。

6.2 Network面板和Sources断点

如果页面发请求但数据不对，问题可能出在后端返回、前端的请求参数、也可能是数据处理逻辑。这时候别急着改代码，先在Network面板看请求详情。

Network面板的核心信息三块：请求URL、请求方法、响应内容。点开一条请求后，看Headers里的Payload（请求参数）和Response（响应数据），能快速确认"到底有没有拿到数据"以及"拿到的数据长什么样"。这一招在写接口对接时能省掉80%的抓狂时间。

断点调试是排查复杂逻辑的终极武器。在Sources面板里点击代码行号就能下断点，页面运行到那一行会暂停。然后你可以逐行执行（F10是跳过当前行，F11是进入函数内部），配合右侧的Scope面板查看当前所有变量的值。断点调试和console.log的最大区别是：断点能让你看到"每一步执行中变量的实时变化"，而不只是某一刻的结果。

6.3 "看报错"的正确姿势

新手看报错最容易犯的错误是只看第一行，或者只看红色字，然后去搜索引擎复制粘贴，其实报错的精华在"错误类型"和"错误位置"。

• Uncaught ReferenceError: xxx is not defined —— 变量没定义，检查拼写或者作用域
• Uncaught TypeError: Cannot read property 'xxx' of undefined —— 你访问了一个不存在对象的属性，先确认对象是有值的
• Uncaught SyntaxError —— 语法错误，看看括号、引号是不是配对了
• Failed to fetch —— 网络层问题，跨域或者后端没起来

我的排查顺序是：先看错误信息的文件名和行号，点击直接跳到对应代码；然后看错误类型，定位是语法层、逻辑层还是网络层；最后动手改，一次只改一处，改完刷新验证。

7. 实战小项目：做一个可增删的待办事项列表

7.1 项目需求与文件结构

我学第三篇笔记时，最后做的是待办事项列表，这个项目小但五脏俱全：输入框、表单提交、列表渲染、删除、空状态提示、本地存储。难度刚好能覆盖前面所有知识点。

文件结构非常简单，就三个文件：

• index.html —— 页面结构
• style.css —— 样式
• app.js —— JavaScript逻辑

这三个文件的职责分离正是前端工程化的最小雏形。HTML管结构，CSS管样式，JS管行为，互不越界。

HTML骨架如下：

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app">
        <h1>待办事项</h1>
        <input type="text" id="todoInput" placeholder="输入新事项，按回车确认">
        <ul id="todoList"></ul>
        <p id="emptyTip" class="empty-tip">暂无待办事项</p>
    </div>
    <script src="app.js"></script>
</body>
</html>

注意script标签放在body末尾，因为JS操作DOM时，要确保DOM已经加载完毕。如果放在head里，document.getElementById会返回null，这是新手常见的第一个报错。

7.2 JavaScript逻辑实现与关键细节

JavaScript这边我分成四步写：拿到DOM元素、定义数据、渲染列表、绑定事件。这个"数据驱动视图"的思路，其实已经是Vue思想的雏形了——先有数据，再用数据生成界面，而不是直接在HTML里写死。

javascript复制// 1. 拿到DOM元素
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');
const emptyTip = document.getElementById('emptyTip');

// 2. 定义数据
let todos = JSON.parse(localStorage.getItem('todos') || '[]');

// 3. 渲染列表
function render() {
    if (todos.length === 0) {
        todoList.innerHTML = '';
        emptyTip.style.display = 'block';
        return;
    }
    emptyTip.style.display = 'none';
    todoList.innerHTML = todos
        .map(item => `<li data-id="${item.id}">${item.text} <button class="delete-btn">删除</button></li>`)
        .join('');
}

// 4. 新增事项
function addTodo() {
    const text = todoInput.value.trim();
    if (!text) return;
    todos.push({ id: Date.now(), text });
    todoInput.value = '';
    render();
    save();
}

// 5. 删除事项（事件委托）
todoList.addEventListener('click', function(e) {
    if (e.target.classList.contains('delete-btn')) {
        const id = Number(e.target.parentElement.dataset.id);
        todos = todos.filter(t => t.id !== id);
        render();
        save();
    }
});

// 6. 回车新增
todoInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        addTodo();
    }
});

// 7. 本地存储
function save() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

// 8. 初始化
render();

这里有几个细节值得展开。第一，用Date.now()作为id，保证每个事项有唯一标识，后面删除时就认这个id。第二，删除按钮用事件委托，因为每次render都会重建列表，如果每次新建li时都单独绑定事件，性能会变差且代码更乱。第三，localStorage存的是字符串，所以读出来要JSON.parse，存进去要JSON.stringify，这个顺序错了数据就废了。

运行效果是：输入文字按回车，事项加到列表里；点击事项后面的删除按钮，该项被移除；刷新页面，数据还在，因为localStorage兜底。这个案例跑通，第三篇笔记的核心知识点就全部串起来了。

8. 常见报错与学习方法总结：把知识变成能力

8.1 第三篇笔记高频报错速查

写JavaScript的过程就是和报错搏斗的过程。下面这几个报错是我在第三篇笔记练习期间遇到最多的，整理成表格方便速查：

排查报错有个原则：先读完整报错，不要只看第一行。报错的第二行往往有"at xxx.js:12:34"这样的定位信息，点一下就能跳到出错代码。大部分问题靠读报错加console.log中间变量就能解决，不需要急着搜网上的答案。

8.2 手写练习的取舍与记笔记的方法

第三篇笔记学完，你会发现知识点特别多，但如果只是"看懂了"而不动手写，三天后就会忘光。我的经验是：每个知识点至少手写一遍，不用完全背下来，但要在没有提示的情况下能独立写出来。写不出来的地方，回看笔记或者文档，补完再继续。

记笔记也有技巧。别大段抄代码，而是记录"这段代码解决了什么问题"和"如果用另一种写法会有什么坑"。比如我自己的笔记里有一条："innerHTML可以插入HTML但存在XSS风险，textContent是纯文本安全版本，用户输入的内容做展示时优先用textContent。"

另外我强烈建议准备一个自己的代码片段库。把DOM查询、事件绑定、防抖节流、深拷贝、日期格式化这类高频工具函数存起来，标注好适用场景和参数说明。后面做项目时直接用，效率翻倍。

8.3 下一步：如何过渡到Vue2和Vue3的学习

有了第三篇笔记的JavaScript基础，再去看Vue的教程，你会发现很多概念有了落点。Vue的模板语法本质上就是HTML加了一些特殊指令，比如v-for渲染列表，就对应着你用map生成列表的那段逻辑；v-if条件渲染，对应着你用if判断控制显示隐藏；v-model双向绑定，对应你监听input事件再同步数据。

学习Vue时有个建议：不要跳过官方文档直接刷视频。Vue的文档质量很高，而且有中文版，跟着文档的示例敲一遍，比看一百个"速成教程"都强。另外一个建议是：学Vue之前，先把原生JavaScript的数组方法、对象操作、异步编程、事件机制再撸一遍，这四块是Vue组件开发中出现频率最高的基础能力。

我自己在学Vue时的体会是：遇到看不懂的API，不是Vue难，而是对应的原生JS基础有缺口。比如不理解computed为什么能缓存，就回去看看闭包；不理解watch怎么监听数据变化，就回头看看Object.defineProperty或者Proxy的用法。基础扎实了，框架上层的东西只是选择问题，不是能不能学会的问题。

第三篇笔记的最后，我留了个拓展练习：把待办事项改造成一个带"完成/未完成"切换功能的版本，加上过滤按钮（全部/进行中/已完成），数据还是存localStorage。能独立完成这个版本，说明你的JavaScript基础已经足够支撑你进入下一个阶段了。这条路我自己走过，踩过不少坑，但每一步积累到今天都还值——前端这条路，基础决定了你能走多远，而不是你用过多少个框架。