下面为你整理一份系统全面、清晰易懂、适合入门到进阶的 《JavaScript 指南（JavaScript Guide）》。
内容涵盖基础语法、核心概念、DOM、事件、异步、模块化、实践技巧等。
⚡ JavaScript 指南（JavaScript Guide）
1. JavaScript 是什么？
JavaScript（JS） 是一种脚本语言，用于让网页具有“动态行为”。
它可以：
- 操作 HTML / CSS（改变网页结构与样式）
- 响应用户行为（点击、输入等）
- 实现动画、表单验证、交互
- 与服务器通信（Ajax / Fetch / API）
- 构建应用（Web / App / 桌面 / 后端 Node.js）
2. JavaScript 写在哪里？
外部文件（推荐）
<script src="app.js"></script>
内部脚本
<script>
console.log("Hello JS");
</script>
3. JS 基础语法
3.1 变量（let / const）
let age = 20; // 可修改
const PI = 3.14; // 不可重新赋值
3.2 数据类型
- 字符串（String）
- 数字（Number）
- 布尔（Boolean）
- 对象（Object）
- 数组（Array）
- 未定义（undefined）
- 空（null）
let name = "Tom";
let num = 123;
let flag = true;
let list = [1, 2, 3];
let person = { name: "Tom" };
3.3 运算符
+, -, *, /, %, **
==, !=, ===, !==, >, <
&&, ||, !
=== 更安全（不会进行自动类型转换）
4. 流程控制
4.1 条件判断
if (age > 18) {
console.log("成人");
} else {
console.log("未成年");
}
4.2 switch
switch (color) {
case "red": console.log("红色"); break;
default: console.log("其他颜色");
}
4.3 循环
for (let i=0; i<5; i++) { }
while (i < 10) { }
5. 函数（Functions）
5.1 普通函数
function add(a, b) {
return a + b;
}
5.2 箭头函数（现代写法）
const add = (a, b) => a + b;
6. 数组与对象（重要！）
6.1 数组操作
let arr = [1, 2, 3];
arr.push(4); // 添加到末尾
arr.pop(); // 删除末尾
arr.shift(); // 删除开头
arr.unshift(0); // 添加开头
高阶方法：
arr.map(x => x * 2)
arr.filter(x => x > 1)
arr.find(x => x === 2)
arr.reduce((a,b)=>a+b)
6.2 对象操作
let person = {
name: "Tom",
age: 20
};
console.log(person.name);
解构写法（现代写法）：
const { name, age } = person;
7. DOM 操作（网页操作核心）
7.1 获取元素
document.getElementById("box");
document.querySelector(".item");
document.querySelectorAll("li");
7.2 修改内容与样式
element.textContent = "新内容";
element.style.color = "red";
element.classList.add("active");
7.3 创建与删除元素
let div = document.createElement("div");
document.body.appendChild(div);
div.remove();
8. 事件（用户交互）
button.addEventListener("click", () => {
alert("按钮被点击！");
});
常见事件：
- click
- input
- change
- mouseover
- keydown
- submit
9. 异步编程（重点！）
9.1 回调（callback）
旧方式。
9.2 Promise
new Promise((resolve, reject) => {
resolve("成功");
});
9.3 async / await（最推荐）
async function getData() {
const res = await fetch("/api/data");
const json = await res.json();
console.log(json);
}
10. Fetch API（请求服务器）
fetch("https://api.example.com/data")
.then(res => res.json())
.then(data => console.log(data));
或 async：
const res = await fetch("xxx");
11. 模块化（ES Modules）
导出
export function add() {}
export default function(){}
导入
import { add } from "./utils.js";
12. 错误处理
try {
let x = y; // y 未定义
} catch (err) {
console.log("出错了：", err);
}
13. JavaScript 最佳实践
✔ 尽量使用 const 和 let
✔ 使用严格比较 ===
✔ 避免全局变量
✔ 函数职责要单一
✔ 使用 async/await 替代回调
✔ DOM 操作尽量减少批量更新
✔ 遵循文件模块化结构
14. JavaScript 学习路线图
- 基础语法
- 数组 & 对象
- DOM
- 事件
- 异步（Promise、async/await）
- 模块化
- Web API & Fetch
- ES6+ 全面掌握
- Node.js（后端）
- 前端框架：React / Vue / Svelte / Angular
📘 想继续学习吗？
我可以为你生成：
📄 《JavaScript 速查表》
🧠 JS 零基础 30 天学习路线
📝 JavaScript 实战项目（如 Todo、计算器、小游戏）
📦 将指南导出为 PDF / PPT / Markdown
💡 帮你写 HTML+CSS+JS 的完整示例网页
你想让我接下来做哪一个？
