HTML + CSS + JS 前端三剑客实战教程

⚡ 第三阶段：JavaScript ES6+ 核心语法

目标：掌握现代JS语法、异步编程、模块化。

1. 现代语法速览

// 解构 + 默认值 + 剩余参数
const { name, age = 18, ...rest } = user;
const [first, ...others] = items;

// 可选链 + 空值合并
const city = user?.address?.city ?? '未知城市';

// 模板字面量
const greeting = `你好${name}，今年${age}岁`;

// Promise.allSettled（比all更安全）
const results = await Promise.allSettled([
    fetch('/api/users'),
    fetch('/api/posts'),
    fetch('/api/comments')
]);
results.forEach(r => {
    if (r.status === 'fulfilled') console.log(r.value);
    else console.error(r.reason);
});

2. 模块化组织

// utils/format.js
export function formatCurrency(amount) {
    return new Intl.NumberFormat('zh-CN', {
        style: 'currency', currency: 'CNY'
    }).format(amount);
}

// components/Card.js
import { formatCurrency } from '../utils/format.js';

export class Card {
    constructor(data) { this.data = data; }
    render() {
        return `<div class="card">
            <h3>${this.data.title}</h3>
            <p>${formatCurrency(this.data.price)}</p>
        </div>`;
    }
}

// main.js
import { Card } from './components/Card.js';
const card = new Card({ title: '课程', price: 299 });
document.getElementById('app').innerHTML = card.render();