前言

JavaScript 是 Web 开发的三大支柱之一（HTML + CSS + JavaScript），也是当今最流行的编程语言。它运行在浏览器中赋予页面交互能力，也能通过 Node.js 在服务器端运行。

本文从零开始，带你系统掌握 JavaScript 的核心基础。

为什么学 JavaScript？

优势 说明
🌐 无处不在 所有浏览器都支持，前端唯一编程语言
🚀 全栈能力 Node.js 让 JS 可以写后端
📦 生态庞大 npm 超过 200 万个包
🎯 上手快 打开浏览器控制台就能写

一、JS 代码写在哪里？

1
2
3
4
5
6
7
<!-- 1. 内嵌在 HTML 中 -->
<script>
  console.log("Hello, 七月小站!");
</script>

<!-- 2. 外部文件引入（推荐） -->
<script src="main.js"></script>

浏览器控制台（快捷调试）：按 F12 → Console 标签，直接输入 JS 代码运行。

二、变量与数据类型

2.1 变量声明

1
2
3
4
5
6
7
// modern 方式（推荐）
let name = "July";       // 可变变量
const PI = 3.14159;      // 常量，不可重新赋值
let age = 25, city = "深圳";  // 批量声明

// ❌ 旧式 var（不推荐）
var old = "有作用域问题，避免使用";

2.2 基本数据类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Number
let num = 42;
let price = 99.99;
let infinity = Infinity;
let notANumber = NaN;        // Not a Number

// String — 三种引号
let s1 = "双引号";
let s2 = '单引号';
let s3 = `模板字符串，可以嵌入 ${num}`;  // 推荐！

// Boolean
let isLoggedIn = true;
let isAdmin = false;

// null 和 undefined
let empty = null;            // 故意设为空
let notDefined = undefined;  // 未定义

// 类型检查
console.log(typeof "hello"); // "string"
console.log(typeof 42);      // "number"
console.log(typeof true);    // "boolean"

2.3 字符串操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let str = "Hello, JavaScript!";

console.log(str.length);                    // 18
console.log(str.toUpperCase());             // "HELLO, JAVASCRIPT!"
console.log(str.toLowerCase());             // "hello, javascript!"
console.log(str.includes("Java"));          // true
console.log(str.startsWith("Hello"));       // true
console.log(str.slice(0, 5));               // "Hello"
console.log(str.replace("JavaScript", "JS")); // "Hello, JS!"
console.log(str.split(", "));               // ["Hello", "JavaScript!"]

// 模板字符串
let name = "July";
let greeting = `你好，${name}！欢迎来到博客`;
console.log(greeting);

三、数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 创建
let fruits = ["苹果", "香蕉", "橘子"];
let mixed = [1, "hello", true, null, { name: "July" }];
let empty = [];
let filled = new Array(5).fill(0);  // [0, 0, 0, 0, 0]

// 访问和修改
console.log(fruits[0]);              // "苹果"
console.log(fruits.at(-1));          // "橘子"（最后一个，ES2022）

// 增删
fruits.push("草莓");                 // 末尾追加
fruits.unshift("西瓜");              // 开头插入
let last = fruits.pop();             // 弹出最后一个
let first = fruits.shift();          // 弹出第一个
fruits.splice(1, 1, "葡萄");         // 删除索引1，插入"葡萄"

// 遍历
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

// 常用方法
let nums = [1, 3, 5, 2, 4];
let doubled = nums.map(n => n * 2);         // [2, 6, 10, 4, 8]
let evens = nums.filter(n => n % 2 === 0);  // [2, 4]
let sum = nums.reduce((a, b) => a + b, 0);  // 15
let found = nums.find(n => n > 3);          // 5
let hasEven = nums.some(n => n % 2 === 0);  // true
nums.sort((a, b) => a - b);                 // 升序排序

// 展开运算符
let combined = [...nums, ...evens];
let copy = [...fruits];                     // 浅拷贝

四、对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 创建
let person = {
    name: "July",
    age: 25,
    city: "深圳",
    hobbies: ["编程", "阅读", "摄影"],
    greet() {
        return `你好，我是${this.name}`;
    }
};

// 访问
console.log(person.name);           // 点号
console.log(person["age"]);         // 方括号
console.log(person.greet());

// 增删改
person.email = "july@example.com";  // 增
person.age = 26;                    // 改
delete person.city;                 // 删
console.log("email" in person);     // true（检查属性是否存在）

// 遍历
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

// 解构赋值
let { name, age, hobbies } = person;
console.log(name, age);             // July 25

// 展开运算
let updatedPerson = { ...person, age: 27, country: "中国" };

五、函数

5.1 函数定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 函数声明（会提升）
function add(a, b) {
    return a + b;
}

// 函数表达式
const multiply = function(a, b) {
    return a * b;
};

// 箭头函数（最常用！）
const subtract = (a, b) => a - b;
const double = x => x * 2;
const greet = name => `你好，${name}！`;

// 默认参数
function power(x, n = 2) {
    return Math.pow(x, n);
}
console.log(power(3));       // 9
console.log(power(3, 3));    // 27

// 剩余参数
function sumAll(...nums) {
    return nums.reduce((a, b) => a + b, 0);
}
console.log(sumAll(1, 2, 3, 4, 5)); // 15

5.2 高阶函数

1
2
3
4
5
6
7
8
9
10
11
12
13
// 函数作为参数
function operate(a, b, fn) {
    return fn(a, b);
}
console.log(operate(3, 5, add));     // 8
console.log(operate(3, 5, (x, y) => x * y)); // 15

// 函数作为返回值
function multiplier(factor) {
    return x => x * factor;
}
const triple = multiplier(3);
console.log(triple(5));              // 15

六、DOM 操作（网页交互核心）

DOM（Document Object Model）是浏览器提供的 API，让 JS 可以操作 HTML 元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!-- HTML -->
<div id="app">
  <h1 class="title">Hello</h1>
  <button id="btn">点击我</button>
  <ul id="list"></ul>
</div>

<script>
// === 选择元素 ===
const app = document.getElementById("app");
const title = document.querySelector(".title");
const btn = document.querySelector("#btn");
const allDivs = document.querySelectorAll("div");

// === 修改内容 ===
title.textContent = "你好，世界!";
title.innerHTML = "<span style='color:red'>红色文字</span>";

// === 修改样式 ===
title.style.color = "blue";
title.style.fontSize = "24px";
title.classList.add("highlight");
title.classList.remove("old-class");
title.classList.toggle("dark");

// === 修改属性 ===
btn.setAttribute("disabled", true);
btn.removeAttribute("disabled");

// === 创建和添加元素 ===
const newLi = document.createElement("li");
newLi.textContent = "新项目";
document.querySelector("#list").appendChild(newLi);

// 使用 innerHTML 批量添加（更简洁）
const list = document.querySelector("#list");
list.innerHTML = `
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
`;

// === 删除元素 ===
newLi.remove();
</script>

七、事件处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const btn = document.querySelector("#btn");

// 方式一：addEventListener（推荐）
btn.addEventListener("click", function() {
    console.log("按钮被点击了!");
});

// 箭头函数
btn.addEventListener("click", (e) => {
    console.log("事件对象:", e);
    console.log("点击的目标:", e.target);
});

// 常用事件
element.addEventListener("click", fn);       // 点击
element.addEventListener("dblclick", fn);    // 双击
element.addEventListener("submit", fn);      // 表单提交
element.addEventListener("input", fn);       // 输入变化
element.addEventListener("keydown", fn);     // 按键按下
element.addEventListener("mouseover", fn);   // 鼠标悬停
element.addEventListener("scroll", fn);      // 滚动

// 事件委托（给父元素绑定，处理子元素事件）
document.querySelector("#list").addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
        console.log("点击了:", e.target.textContent);
    }
});

八、异步编程

8.1 Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 创建 Promise
function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (url) {
                resolve({ data: "请求成功" });
            } else {
                reject("URL 不能为空");
            }
        }, 1000);
    });
}

// 使用 .then() 链式调用
fetchData("/api/users")
    .then(result => {
        console.log(result.data);   // "请求成功"
        return fetchData("/api/posts");
    })
    .then(result => console.log(result))
    .catch(error => console.error("错误:", error))
    .finally(() => console.log("请求完成"));

8.2 async / await（现代化写法，推荐）⭐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
async function loadData() {
    try {
        const users = await fetch("/api/users").then(r => r.json());
        console.log("用户数据:", users);
        
        const posts = await fetch("/api/posts").then(r => r.json());
        console.log("文章数据:", posts);
        
        return { users, posts };
    } catch (error) {
        console.error("加载失败:", error);
        throw error;
    }
}

// 调用
loadData()
    .then(data => console.log("全部加载完成", data))
    .catch(err => console.log("出错了", err));

8.3 真实 API 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 使用 fetch（浏览器内置）
async function getArticles() {
    const resp = await fetch("https://jsonplaceholder.typicode.com/posts");
    const articles = await resp.json();
    
    articles.slice(0, 5).forEach(article => {
        console.log(`${article.id}. ${article.title}`);
    });
}

// POST 请求
async function createArticle(data) {
    const resp = await fetch("/api/articles", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data)
    });
    return resp.json();
}

九、实用小工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 防抖（搜索框输入，等待用户停止输入后再执行）
function debounce(fn, delay = 300) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay);
    };
}

// 节流（滚动事件，每 N 毫秒最多执行一次）
function throttle(fn, interval = 300) {
    let last = 0;
    return (...args) => {
        const now = Date.now();
        if (now - last >= interval) {
            last = now;
            fn(...args);
        }
    };
}

// 深拷贝
const deepClone = obj => JSON.parse(JSON.stringify(obj));

// 生成随机 ID
const randomId = () => Math.random().toString(36).slice(2, 9);

// 格式化日期
const formatDate = date => {
    const d = new Date(date);
    return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
};

十、ES6+ 常用特性速查

特性 代码
let/const let x = 1; const y = 2;
箭头函数 const fn = x => x * 2;
模板字符串 `Hello, ${name}`
解构 const { a, b } = obj; const [x, y] = arr;
展开运算符 [...arr1, ...arr2] {...obj1, ...obj2}
默认参数 function fn(x = 10) {}
可选链（?.） obj?.prop?.sub
空值合并（??） const val = input ?? "默认值"
map/filter/reduce 数组三大件
async/await const data = await fetch(url)

实战：Todo List 应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Todo List</title>
    <style>
        .done { text-decoration: line-through; color: #999; }
        li { cursor: pointer; padding: 8px; }
    </style>
</head>
<body>
    <h1>📝 我的待办</h1>
    <input type="text" id="input" placeholder="输入待办事项...">
    <button id="addBtn">添加</button>
    <ul id="list"></ul>

    <script>
    const input = document.querySelector("#input");
    const addBtn = document.querySelector("#addBtn");
    const list = document.querySelector("#list");

    // 添加待办
    function addTodo(text) {
        const li = document.createElement("li");
        li.innerHTML = `<span>${text}</span> <button class="del">×</button>`;
        
        // 点击文字切换完成状态
        li.querySelector("span").addEventListener("click", () => {
            li.classList.toggle("done");
        });
        
        // 点击 × 删除
        li.querySelector(".del").addEventListener("click", () => {
            li.remove();
        });
        
        list.appendChild(li);
        input.value = "";
        input.focus();
    }

    addBtn.addEventListener("click", () => {
        if (input.value.trim()) addTodo(input.value.trim());
    });

    input.addEventListener("keydown", (e) => {
        if (e.key === "Enter" && input.value.trim()) addTodo(input.value.trim());
    });
    </script>
</body>
</html>

结语

JavaScript 的生态虽然庞大，但核心概念并不复杂。建议学习路径：

  1. 语言基础（本文内容）→ 变量、函数、数组、对象
  2. DOM 操作 → 修改页面元素、处理事件
  3. 异步编程 → Promise、async/await
  4. 框架 → React / Vue 任选一个深入
  5. Node.js → 后端开发

JavaScript 是通向全栈开发的第一把钥匙。开始写吧！🚀