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);
  }
}