JavaScript完整学习指南 - Web开发核心语言

一、JavaScript 发展历史

1995 年 - 诞生

Brendan Eich 在 Netscape 公司仅用 10 天创建了 JavaScript（最初叫 Mocha，后改名 LiveScript，最后定名 JavaScript）

初代版本

1997 年 - ECMAScript 标准化

ECMA International 发布 ECMAScript 1，JavaScript 成为标准化语言

ES1

2005 年 - AJAX 革命

Google Maps 和 Gmail 展示了 AJAX 技术，JavaScript 从玩具语言变成严肃的开发工具

Web 2.0

2009 年 - Node.js 诞生

Ryan Dahl 创建 Node.js，JavaScript 进入服务器端开发领域

全栈时代

2015 年 - ES6/ES2015 重大更新

引入 let/const、箭头函数、Promise、类、模块等现代特性，JavaScript 脱胎换骨

ES6 现代JS

2015 至今 - 年度更新

每年发布新版本（ES2016, ES2017...ES2024），持续添加新特性：async/await、可选链、空值合并等

持续演进

二、JavaScript 语言简介

JavaScript 是一门轻量级、解释型、面向对象的编程语言，拥有一等函数（First-class Function）。虽然最初设计用于浏览器脚本，但现在已成为全栈开发的通用语言。

从前端页面交互、移动应用开发、服务器端编程，到桌面软件、物联网、游戏开发，JavaScript 的应用范围几乎无所不在。配合 npm 生态系统（超过 200 万个包），JavaScript 已成为世界上最流行的编程语言之一。

🎯 核心优势

✓ 浏览器原生支持，无需编译
✓ 学习曲线平缓，上手快
✓ npm 生态系统极其丰富
✓ 前后端统一语言栈
✓ 异步编程能力强大
✓ 社区活跃，资源丰富

⚠️ 注意事项

• 动态弱类型易出错
• this 指向规则复杂
• 历史包袱较重
• 缺少标准库（依赖 npm）
• 浏览器兼容性问题

📊 应用领域

前端开发 Node.js后端移动应用桌面软件游戏开发物联网

📌 ECMAScript 版本演进

ES5（2009）

• 严格模式、JSON 支持
• 数组方法（map、filter等）

ES6/ES2015（2015）⭐

• let/const、箭头函数
• Promise、类、模块

ES2016-2024（年度更新）

• async/await、可选链
• 空值合并、顶层 await

三、JavaScript 基础语法

1. Hello World - 第一个程序

浏览器环境

// 在浏览器控制台或 <script> 标签中
console.log("Hello, World!");

// 弹窗提示
alert("欢迎来到 JavaScript!");

// 修改页面内容
document.body.innerHTML = "<h1>Hello, World!</h1>";
                    

Node.js 环境

// hello.js
console.log("Hello, World!");

// 运行：node hello.js
// 输出：Hello, World!
                    

2. 变量声明（const / let / var）

// const - 常量（推荐，不可重新赋值）
const PI = 3.14159;
const userName = "Alice";
// PI = 3.14; // ❌ 错误：不能重新赋值


// let - 块级作用域变量（推荐）
let count = 0;
count = 1;  // ✓ 可以重新赋值


// var - 函数作用域（ES5旧语法，不推荐）
var oldStyle = "legacy";


// 块级作用域示例
if (true) {
    let blockVar = "只在块内有效";
    var funcVar = "在整个函数有效";
}
// console.log(blockVar); // ❌ 错误：blockVar 未定义
console.log(funcVar);  // ✓ 正常输出
                

3. 数据类型

基本类型（Primitive）

// Number - 数字（整数和浮点数）
const age = 25;
const price = 99.99;
const negative = -42;
const infinity = Infinity;
const notANumber = NaN;


// String - 字符串
const single = '单引号';
const double = "双引号";
const template = `模板字符串 ${age}`;
const multiLine = `第一行
第二行`;


// Boolean - 布尔值
const isActive = true;
const isDeleted = false;


// null 和 undefined
const empty = null;
let notDefined;  // undefined


// Symbol（ES6）- 唯一标识符
const id = Symbol('id');


// BigInt（ES2020）- 大整数
const bigNum = 9007199254740991n;
                    

对象类型（Object）

// Array - 数组
const fruits = ['苹果', '香蕉', '橙子'];
const mixed = [1, 'two', true, null];


// Object - 对象
const person = {
    name: 'Alice',
    age: 25,
    hobbies: ['读书', '编程']
};


// Function - 函数
const greet = function(name) {
    return `你好, ${name}!`;
};


// Date - 日期
const now = new Date();


// RegExp - 正则表达式
const pattern = /\d+/;


// Map 和 Set（ES6）
const map = new Map();
const set = new Set([1, 2, 3]);
                    

类型检测

typeof 42;              // "number"
typeof "hello";          // "string"
typeof true;            // "boolean"
typeof undefined;       // "undefined"
typeof null;            // "object" (历史遗留bug)
typeof {};               // "object"
typeof [];               // "object"
Array.isArray([]);       // true (判断数组用这个)
                

4. 运算符

算术与比较运算符

// 算术运算
+ 5;   // 15
- 5;   // 5
* 5;   // 50
/ 5;   // 2
% 3;   // 1 (取余)
** 3;   // 8 (幂运算)

// 比较运算
== "5";   // true (值相等，类型转换)
=== "5";  // false (严格相等，推荐)
!= "5";   // false
!== "5";  // true (严格不等，推荐)
> 3;     // true
>= 5;    // true
                    

逻辑与特殊运算符

// 逻辑运算
true && false;   // false (与)
true || false;   // true (或)
!true;           // false (非)

// 三元运算符
const age = 18;
const status = age >= 18 ? '成年' : '未成年';

// 可选链（ES2020）
const user = { address: { city: '北京' } };
const city = user?.address?.city;  // "北京"
const zip = user?.address?.zip;    // undefined

// 空值合并（ES2020）
const value = null ?? '默认值';  // "默认值"
const value2 = 0 ?? '默认值';     // 0
                    

5. 控制流程

条件语句

// if...else if...else
const score = 85;

if (score >= 90) {
    console.log('优秀');
} else if (score >= 80) {
    console.log('良好');
} else if (score >= 60) {
    console.log('及格');
} else {
    console.log('不及格');
}

// switch 语句
const day = 'Monday';

switch (day) {
    case 'Monday':
        console.log('周一');
        break;
    case 'Tuesday':
        console.log('周二');
        break;
    default:
        console.log('其他');
}
                    

循环语句

// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

// for...of 循环（遍历值）
const fruits = ['苹果', '香蕉', '橙子'];
for (const fruit of fruits) {
    console.log(fruit);
}

// for...in 循环（遍历键）
const person = { name: 'Alice', age: 25 };
for (const key in person) {
    console.log(key, person[key]);
}

// while 循环
let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}

// do...while 循环
do {
    console.log(count);
    count++;
} while (count < 5);
                    

6. 函数定义

多种函数定义方式

// 1. 函数声明（Function Declaration）
function add(a, b) {
    return a + b;
}


// 2. 函数表达式（Function Expression）
const subtract = function(a, b) {
    return a - b;
};


// 3. 箭头函数（Arrow Function，ES6，推荐）
const multiply = (a, b) => a * b;

const divide = (a, b) => {
    if (b === 0) throw new Error('除数不能为0');
    return a / b;
};


// 4. 默认参数（ES6）
function greet(name = '游客') {
    return `你好, ${name}!`;
}
greet();           // "你好, 游客!"
greet('Alice');   // "你好, Alice!"


// 5. 剩余参数（Rest Parameters，ES6）
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4);  // 10


// 6. 立即执行函数表达式（IIFE）
(function() {
    console.log('立即执行');
})();
                

7. 数组与对象常用操作

数组方法

const arr = [1, 2, 3, 4, 5];


// 添加/删除元素
arr.push(6);         // 末尾添加
arr.pop();          // 末尾删除
arr.unshift(0);      // 开头添加
arr.shift();        // 开头删除


// 遍历和转换
arr.map(x => x * 2);                // [2,4,6,8,10]
arr.filter(x => x > 3);             // [4,5]
arr.reduce((sum, x) => sum + x, 0);  // 15


// 查找元素
arr.find(x => x > 3);          // 4
arr.findIndex(x => x > 3);     // 3
arr.includes(3);              // true


// 切片和拼接
arr.slice(1, 3);             // [2,3]
[...arr, 6, 7];             // 展开运算符
                    

对象操作

const user = {
    name: 'Alice',
    age: 25,
    email: 'alice@example.com'
};


// 访问属性
user.name;          // 点表示法
user['age'];        // 方括号表示法


// 解构赋值（ES6）
const { name, age } = user;


// 对象展开（ES2018）
const updatedUser = {
    ...user,
    age: 26,
    city: '北京'
};


// 对象方法
Object.keys(user);     // ['name','age','email']
Object.values(user);   // ['Alice', 25, ...]
Object.entries(user);  // [['name','Alice'],...]


// 属性简写（ES6）
const name = 'Bob', age = 30;
const person = { name, age };  // {name:'Bob', age:30}
                    

四、JavaScript 高级特性

1. 类与面向对象（ES6）

类的定义与继承

// 定义类
class Person {
    // 构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    // 实例方法
    greet() {
        return `你好, 我是 ${this.name}`;
    }
    
    // Getter 访问器
    get info() {
        return `${this.name}, ${this.age}岁`;
    }
    
    // Setter 访问器
    set age(value) {
        if (value < 0) throw new Error('年龄不能为负');
        this._age = value;
    }
    
    // 静态方法
    static create(name, age) {
        return new Person(name, age);
    }
}


// 继承
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);  // 调用父类构造函数
        this.grade = grade;
    }
    
    // 重写方法
    greet() {
        return `${super.greet()}, 我是${this.grade}年级学生`;
    }
}


// 使用示例
const student = new Student('Alice', 15, '高一');
console.log(student.greet());
                

2. 解构赋值（ES6）

数组解构

// 基本解构
const [a, b, c] = [1, 2, 3];

// 跳过元素
const [first, , third] = [1, 2, 3];

// 剩余元素
const [head, ...tail] = [1, 2, 3, 4];
// head = 1, tail = [2, 3, 4]

// 默认值
const [x = 0, y = 0] = [1];
// x = 1, y = 0

// 交换变量
let a = 1, b = 2;
[a, b] = [b, a];  // a = 2, b = 1
                    

对象解构

// 基本解构
const user = { name: 'Alice', age: 25 };
const { name, age } = user;

// 重命名
const { name: userName, age: userAge } = user;

// 默认值
const { city = '未知' } = user;

// 嵌套解构
const data = {
    user: { name: 'Bob', address: { city: '北京' } }
};
const { user: { address: { city } } } = data;

// 函数参数解构
function printUser({ name, age }) {
    console.log(`${name}, ${age}岁`);
}
                    

3. 模块系统（ES6 Modules）

导出（Export）

// utils.js - 命名导出
export const PI = 3.14159;

export function add(a, b) {
    return a + b;
}

export class Calculator {
    multiply(a, b) {
        return a * b;
    }
}

// 批量导出
const x = 10, y = 20;
export { x, y };

// 默认导出
export default function main() {
    console.log('主函数');
}
                    

导入（Import）

// main.js - 命名导入
import { PI, add, Calculator } from './utils.js';

// 重命名导入
import { add as sum } from './utils.js';

// 导入全部
import * as utils from './utils.js';
utils.add(1, 2);

// 导入默认导出
import main from './utils.js';

// 混合导入
import main, { add, PI } from './utils.js';

// 动态导入（ES2020）
const module = await import('./utils.js');
                    

4. 其他高级特性

闭包与作用域

// 闭包
function createCounter() {
    let count = 0;
    return {
        increment() { return ++count; },
        decrement() { return --count; },
        getValue() { return count; }
    };
}

const counter = createCounter();
counter.increment();  // 1
counter.increment();  // 2
                    

Generator 生成器

// Generator 函数（function*）

function* numberGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = numberGenerator();
console.log(gen.next());  // {value: 1, done: false}
console.log(gen.next());  // {value: 2, done: false}


// 无限序列生成器

function* fibonacci() {
    let [a, b] = [0, 1];
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

const fib = fibonacci();
for (let i = 0; i < 5; i++) {
    console.log(fib.next().value);
}
// 输出: 0 1 1 2 3


// 使用 for...of 遍历

function* range(start, end) {
    for (let i = start; i < end; i++) {
        yield i;
    }
}

for (const num of range(1, 6)) {
    console.log(num);  // 1 2 3 4 5
}
                    

5. Proxy 和 Reflect（ES6）

Proxy - 对象代理

// Proxy 可以拦截对象操作

const target = {
    name: 'Alice',
    age: 25
};


// 创建代理

const handler = {
    // 拦截属性读取
    get(target, prop) {
        console.log(`读取属性: ${prop}`);
        return prop in target ? target[prop] : '属性不存在';
    },
    
    // 拦截属性设置
    set(target, prop, value) {
        if (prop === 'age' && typeof value !== 'number') {
            throw new TypeError('年龄必须是数字');
        }
        console.log(`设置属性: ${prop} = ${value}`);
        target[prop] = value;
        return true;
    }
};

const proxy = new Proxy(target, handler);


// 使用代理
console.log(proxy.name);      // 读取属性: name → Alice
proxy.age = 26;             // 设置属性: age = 26
console.log(proxy.city);      // 读取属性: city → 属性不存在


// 响应式数据（Vue 3 原理）

function reactive(obj) {
    return new Proxy(obj, {
        set(target, key, value) {
            target[key] = value;
            console.log(`数据变化，触发更新: ${key}`);
            return true;
        }
    });
}
                

五、异步编程（JavaScript 核心）

1. 回调函数（Callback）

// 基本回调示例
function fetchData(callback) {
    setTimeout(() => {
        const data = { id: 1, name: 'Alice' };
        callback(data);
    }, 1000);
}

// 使用回调函数
fetchData(data => {
    console.log(data);
});


// 回调地狱（Callback Hell）- 不推荐 ❌
fetchData1(data1 => {
    fetchData2(data1, data2 => {
        fetchData3(data2, data3 => {
            console.log(data3);  // 嵌套过深，难以维护
        });
    });
});
                

2. Promise（ES6）

Promise 基础

// 创建 Promise
const fetchUser = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            
            if (success) {
                resolve({ name: 'Alice', age: 25 });
            } else {
                reject(new Error('获取用户失败'));
            }
        }, 1000);
    });
};


// 使用 Promise 链式调用
fetchUser()
    .then(user => {
        console.log('用户:', user);
        return user.age;
    })
    .then(age => {
        console.log('年龄:', age);
    })
    .catch(error => {
        console.error('错误:', error);
    })
    .finally(() => {
        console.log('完成');
    });


// Promise 组合方法
Promise.all([promise1, promise2, promise3])  // 所有完成
    .then(results => console.log(results));

Promise.race([promise1, promise2])  // 第一个完成
    .then(result => console.log(result));

Promise.allSettled([p1, p2, p3])  // 所有结束（ES2020）
    .then(results => console.log(results));
                

3. Async/Await（ES2017，推荐）

// async 函数自动返回 Promise

async function getUserData() {
    try {
        // await 等待 Promise 完成
        const user = await fetchUser();
        console.log('用户:', user);
        
        // 可以像同步代码一样写异步逻辑
        const profile = await fetchProfile(user.id);
        const posts = await fetchPosts(user.id);
        
        return { user, profile, posts };
    } catch (error) {
        console.error('错误:', error);
        throw error;
    }
}


// 并行执行多个异步操作（更快）

async function getMultipleData() {
    // Promise.all 并行执行
    const [user, profile, posts] = await Promise.all([
        fetchUser(),
        fetchProfile(),
        fetchPosts()
    ]);
    
    return { user, profile, posts };
}


// 顶层 await（ES2022）
const data = await fetchData();  // 模块顶层可以使用 await


// 箭头函数版本
const getData = async () => {
    const result = await fetch('/api/data');
    return await result.json();
};
                

4. 实际应用：Fetch API

// GET 请求
async function getUsers() {
    try {
        const response = await fetch('https://api.example.com/users');
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const users = await response.json();
        return users;
    } catch (error) {
        console.error('获取用户失败:', error);
        throw error;
    }
}

// POST 请求
async function createUser(userData) {
    const response = await fetch('https://api.example.com/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(userData)
    });
    
    return await response.json();
}

// 使用
const users = await getUsers();
const newUser = await createUser({ name: 'Bob', age: 30 });
            

六、JavaScript 生态与框架

1. 主流前端框架

⚛️ React

Facebook 开发，最流行的前端库，组件化开发，虚拟 DOM

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>计数: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                增加
            </button>
        </div>
    );
}
                    

Hooks JSX

🟩 Vue.js

渐进式框架，易学易用，完善的中文文档

<!-- Vue 3 Composition API -->
<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => count.value++;
</script>

<template>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
</template>
                    

响应式模板

🅰️ Angular

Google 开发，完整的企业级框架，TypeScript

import { Component } from '@angular/core';

@Component({
    selector: 'app-counter',
    template: `
        <p>计数: {{count}}</p>
        <button (click)="increment()">增加</button>
    `
})
export class CounterComponent {
    count = 0;
    increment() { this.count++; }
}
                    

TypeScript RxJS

2. Node.js 与后端开发

Express.js - Web 框架

const express = require('express');
const app = express();

app.use(express.json());

// 路由
app.get('/api/users', (req, res) => {
    res.json({ users: [] });
});

app.post('/api/users', (req, res) => {
    const user = req.body;
    res.status(201).json(user);
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});
                

构建工具

⚡ Vite

现代化构建工具，极速冷启动

📦 Webpack

强大的模块打包器

🎯 TypeScript

JavaScript 的超集，添加类型系统

3. npm 包管理器

npm（Node Package Manager）是世界最大的软件注册表，拥有超过 200 万个包

# 初始化项目
npm init -y

# 安装依赖
npm install express
npm install --save-dev typescript

# 运行脚本
npm run dev
npm run build
                    

常用命令包

lodash axios moment chalk

七、综合实战：Todo 管理应用

这个完整项目串联了所有 JavaScript 语法特性：类、模块、异步、DOM、事件、本地存储等

📝 项目功能

✓ CRUD 操作

创建、读取、更新、删除

✓ 本地存储

LocalStorage 持久化

✓ 异步操作

模拟 API 请求

1

数据模型类（面向对象）

// todo.js - 定义 Todo 数据模型

export class Todo {
    // 构造函数
    constructor(text) {
        this.id = Date.now();  // 唯一 ID
        this.text = text;
        this.completed = false;
        this.createdAt = new Date();
    }
    
    // 方法：切换完成状态
    toggle() {
        this.completed = !this.completed;
    }
    
    // 方法：更新文本
    update(newText) {
        this.text = newText;
    }
    
    // 静态方法：从对象创建实例
    static fromObject(obj) {
        const todo = new Todo(obj.text);
        Object.assign(todo, obj);
        return todo;
    }
}
                

2

本地存储管理（异步操作）

// storage.js - 本地存储管理器

export class StorageManager {
    constructor(key = 'todos') {
        this.key = key;
    }
    
    // 异步加载数据（模拟异步操作）
    async load() {
        try {
            // 模拟网络延迟
            await new Promise(resolve => setTimeout(resolve, 100));
            
            const data = localStorage.getItem(this.key);
            return data ? JSON.parse(data) : [];
        } catch (error) {
            console.error('加载失败:', error);
            return [];
        }
    }
    
    // 异步保存数据
    async save(data) {
        try {
            await new Promise(resolve => setTimeout(resolve, 50));
            localStorage.setItem(this.key, JSON.stringify(data));
            return true;
        } catch (error) {
            console.error('保存失败:', error);
            return false;
        }
    }
    
    // 清空数据
    async clear() {
        localStorage.removeItem(this.key);
    }
}
                

3

应用主逻辑（综合运用）

// app.js - 应用主类

import { Todo } from './todo.js';
import { StorageManager } from './storage.js';


export class TodoApp {
    constructor() {
        this.todos = [];
        this.storage = new StorageManager();
        this.filter = 'all';  // all | active | completed
    }
    
    
    // 初始化应用
    async init() {
        // 加载数据
        const savedTodos = await this.storage.load();
        this.todos = savedTodos.map(obj => Todo.fromObject(obj));
        
        // 绑定事件
        this.bindEvents();
        
        // 渲染界面
        this.render();
    }
    
    
    // 添加 Todo
    async addTodo(text, ...tags) {
        if (!text.trim()) return;
        
        const todo = new Todo(text);
        this.todos.push(todo);
        
        // 保存到本地
        await this.storage.save(this.todos);
        this.render();
    }
    
    
    // 删除 Todo
    async deleteTodo(id) {
        this.todos = this.todos.filter(todo => todo.id !== id);
        await this.storage.save(this.todos);
        this.render();
    }
    
    
    // 切换完成状态
    async toggleTodo(id) {
        const todo = this.todos.find(t => t.id === id);
        
        if (todo) {
            todo.toggle();
            await this.storage.save(this.todos);
            this.render();
        }
    }
    
    
    // 获取过滤后的 Todos
    getFilteredTodos() {
        return this.filter === 'all' 
            ? this.todos 
            : this.filter === 'active' 
                ? this.todos.filter(t => !t.completed) 
                : this.todos.filter(t => t.completed);
    }
    
    
    // 统计信息
    getStats() {
        const total = this.todos.length;
        const completed = this.todos.filter(t => t.completed).length;
        const active = total - completed;
        
        // 对象属性简写
        return { total, completed, active };
    }
    
    
    // 渲染界面（DOM 操作）
    render() {
        const container = document.getElementById('todo-list');
        const todos = this.getFilteredTodos();
        
        // 使用模板字符串和数组 map
        container.innerHTML = todos.map(todo => `
            <div class="todo-item ${todo.completed ? 'completed' : ''}">
                <input type="checkbox" 
                       ${todo.completed ? 'checked' : ''}
                       data-id="${todo.id}">
                <span>${todo.text}</span>
                <button class="delete" data-id="${todo.id}">删除</button>
            </div>
        `).join('');
        
        // 更新统计（使用解构赋值）
        const { total, completed, active } = this.getStats();
        document.getElementById('stats').textContent = 
            `总计: ${total} | 完成: ${completed} | 进行中: ${active}`;
    }
    
    
    // 绑定事件（事件委托）
    bindEvents() {
        // 添加 Todo
        document.getElementById('add-btn')?.addEventListener('click', () => {
            const input = document.getElementById('todo-input');
            this.addTodo(input.value);
            input.value = '';
        });
        
        // 事件委托处理勾选和删除
        document.getElementById('todo-list')?.addEventListener('click', (e) => {
            const target = e.target;
            const id = Number(target.dataset.id);
            
            if (target.type === 'checkbox') {
                this.toggleTodo(id);
            } else if (target.classList.contains('delete')) {
                this.deleteTodo(id);
            }
        });
        
        // 过滤器切换
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                this.filter = btn.dataset.filter;
                this.render();
            });
        });
    }
}
                

4

应用入口（模块化启动）

// main.js - 应用入口

import { TodoApp } from './app.js';


// DOM 加载完成后初始化
document.addEventListener('DOMContentLoaded', async () => {
    try {
        // 创建应用实例
        const app = new TodoApp();
        
        // 异步初始化
        await app.init();
        
        console.log('✅ Todo 应用启动成功！');
        
        // 将 app 实例挂载到 window，方便调试
        window.todoApp = app;
        
    } catch (error) {
        console.error('❌ 应用启动失败:', error);
    }
});


// 使用可选链和空值合并运算符
const config = {
    theme: localStorage.getItem('theme') ?? 'light',
    lang: localStorage.getItem('lang') ?? 'zh-CN'
};

console.log(`当前配置:`, config);
                

5

HTML 结构

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Todo 管理应用</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>📝 Todo 管理应用</h1>
        
        <!-- 输入区 -->
        <div class="input-group">
            <input type="text" id="todo-input" placeholder="添加新任务...">
            <button id="add-btn">添加</button>
        </div>
        
        <!-- 过滤器 -->
        <div class="filters">
            <button class="filter-btn" data-filter="all">全部</button>
            <button class="filter-btn" data-filter="active">进行中</button>
            <button class="filter-btn" data-filter="completed">已完成</button>
        </div>
        
        <!-- 任务列表 -->
        <div id="todo-list"></div>
        
        <!-- 统计信息 -->
        <div id="stats" class="stats"></div>
    </div>
    
    <!-- 使用 ES6 模块 -->
    <script type="module" src="main.js"></script>
</body>
</html>
                

🎓 项目涵盖的知识点

✓ 类与面向对象

• constructor 构造函数
• 实例方法与静态方法
• 类的继承与封装

✓ ES6+ 模块系统

• export/import 导入导出
• 默认导出与命名导出
• 模块化代码组织

✓ 异步编程

• async/await 异步函数
• Promise 处理
• try/catch 错误处理

✓ 数组高阶方法

• map, filter, find
• reduce 聚合操作
• 链式调用

✓ DOM 操作

• querySelector 选择器
• 事件监听与委托
• 动态内容渲染

✓ 现代语法特性

• 箭头函数
• 模板字符串
• 解构赋值
• 可选链与空值合并

📚 JavaScript 学习资源

从官方文档到实战教程，这些资源将助您成为 JavaScript 专家

📖

MDN 文档

最权威的 JS 参考文档

🎓

现代JS教程

深入浅出的现代教程

📚

ES6 入门

阮一峰的ES6教程

💎

Airbnb 规范

业界最佳实践

⚛️

React 官网

最流行的前端框架

🟩

Vue.js 官网

渐进式框架

🟢

Node.js 官网

服务端 JavaScript

🎯

TypeScript

JS 的超集

← 返回编程语言大全

JavaScript 完整学习指南