JavaScript 核心
JavaScript 是浏览器的编程语言。本课覆盖日常开发中用得最多的核心知识：变量、函数、DOM 操作、事件与异步编程。
学习目标
- 正确使用
let/const，理解作用域 - 掌握函数与数组高阶方法（map / filter / reduce）
- 能操作 DOM 并响应用户事件
- 理解事件循环，会用 Promise 和 async/await
变量与数据类型
const name = "小明"; // 常量，不可重新赋值（推荐默认使用）
let age = 18; // 可变变量
// var 已过时，不要使用
const user = { name, age }; // 对象
const tags = ["js", "web"]; // 数组
const upper = tags.map(t => t.toUpperCase()); // ["JS", "WEB"]
函数
// 箭头函数是现代写法的主流
const add = (a, b) => a + b;
// 数组三剑客：map / filter / reduce
const nums = [1, 2, 3, 4, 5];
const sumOfEven = nums
.filter(n => n % 2 === 0) // [2, 4]
.map(n => n * 10) // [20, 40]
.reduce((acc, n) => acc + n, 0); // 60
DOM 与事件
// 选择元素
const btn = document.querySelector("#submit");
const list = document.querySelector("ul");
// 监听事件
btn.addEventListener("click", () => {
// 创建并插入新元素
const li = document.createElement("li");
li.textContent = "新条目";
li.classList.add("item");
list.appendChild(li);
});
异步编程
浏览器是单线程的，耗时操作（网络请求、定时器）通过事件循环异步执行：
// Promise 链
fetch("https://api.github.com/users/octocat")
.then(res => res.json())
.then(data => console.log(data.name))
.catch(err => console.error(err));
// async/await（推荐，写法更接近同步思维）
async function loadUser() {
try {
const res = await fetch("https://api.github.com/users/octocat");
if (!res.ok) throw new Error("请求失败: " + res.status);
const data = await res.json();
console.log(data.name);
} catch (err) {
console.error(err);
}
}
常见坑：
async函数返回的是 Promise；忘记await会拿到 Promise 而不是结果。
动手练习
- 待办列表：输入框 + 按钮，点击添加条目，点击条目划线完成，数据存
localStorage。 - GitHub 名片：输入用户名，调用
https://api.github.com/users/<名字>展示头像、昵称、仓库数，处理用户不存在的情况。 - 写一个
debounce(fn, ms)函数，并用它做一个搜索输入框（停止输入 300ms 后才发请求）。