自己用react开发了一张Es6的学习页面(持续更新系列)



代码块:

java 复制代码
import React from 'react';
import './Es6Review.css';

const Es6Review: React.FC = () => {
    return (
        <div className="container">
            <div className="header">
                <h1>ES6 知识点复习</h1>
                <h2>重要特性及应用</h2>
            </div>
            <div className="section">
                <h3 className="title">1. 箭头函数</h3>
                <p className="paragraph">箭头函数提供了一种更简洁的函数书写方式,并且不绑定自己的 this 值。</p>
                <pre className="codeBlock">
                    {`const add = (a, b) => a + b;`}
                </pre>
            </div>
            <div className="section">
                <h3 className="title">2. 模板字符串</h3>
                <p className="paragraph">模板字符串允许嵌入表达式,使用反引号(\`)包裹。</p>
                <pre className="codeBlock">
                    {`const name = '世界';
console.log(\`你好, \${name}!\`);`}
                </pre>
            </div>
            <div className="section">
                <h3 className="title">3. 解构赋值</h3>
                <p className="paragraph">解构赋值可以从数组或对象中提取值。</p>
                <pre className="codeBlock">
                    {`const arr = [1, 2, 3];
const [a, b] = arr; // a = 1, b = 2

const obj = { x: 1, y: 2 };
const { x, y } = obj; // x = 1, y = 2`}
                </pre>
            </div>
            <div className="section">
                <h3 className="title">4. Promise</h3>
                <p className="paragraph">Promise 是用于处理异步操作的对象。</p>
                <pre className="codeBlock">
                    {`const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('数据加载完成');
        }, 1000);
    });
};

fetchData().then(data => console.log(data));`}
                </pre>
            </div>
            <div className="section">
                <h3 className="title">5. 类</h3>
                <p className="paragraph">ES6 引入了类的概念,提供了更清晰的面向对象编程方式。</p>
                <pre className="codeBlock">
                    {`class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(\`你好,我是 \${this.name},我 \${this.age} 岁。\`);
    }
}

const person = new Person('小明', 25);
person.greet();`}
                </pre>
            </div>
            <div className="section">
                <h3 className="title">6. 模块化</h3>
                <p className="paragraph">ES6 支持模块化,可以使用 export 和 import 来管理模块。</p>
                <pre className="codeBlock">
                    {`// module.js
export const PI = 3.14;
export const add = (a, b) => a + b;

// main.js
import { PI, add } from './module';
console.log(PI);
console.log(add(2, 3));`}
                </pre>
            </div>
            <div className="section">
                <h3 className="title">7. 扩展运算符</h3>
                <p className="paragraph">扩展运算符(...)可以展开数组或对象。</p>
                <pre className="codeBlock">
                    {`const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4}`}
                </pre>
            </div>
            <div className="section">
                <h3 className="title">8. 默认参数</h3>
                <p className="paragraph">可以为函数参数设置默认值。</p>
                <pre className="codeBlock">
                    {`const multiply = (a, b = 1) => a * b;
console.log(multiply(5)); // 5
console.log(multiply(5, 2)); // 10`}
                </pre>
            </div>
            <div className="section">
                <h3 className="title">9. let 和 const</h3>
                <p className="paragraph">let 和 const 用于声明变量,let 具有块级作用域,const 声明常量。</p>
                <pre className="codeBlock">
                    {`let x = 10;
if (true) {
    let x = 20; // 块级作用域
    console.log(x); // 20
}
console.log(x); // 10

const y = 30;
// y = 40; // 错误,常量不能被重新赋值`}
                </pre>
            </div>
            <div className="section">
                <h3 className="title">10. 迭代器和生成器</h3>
                <p className="paragraph">生成器函数可以用来创建迭代器。</p>
                <pre className="codeBlock">
                    {`function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2`}
                </pre>
            </div>
        </div>
    );
};

export default Es6Review;
相关推荐
Magnetic_h6 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
研梦非凡7 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
limengshi1383928 小时前
机器学习面试:请介绍几种常用的学习率衰减方式
人工智能·学习·机器学习
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
周周记笔记9 小时前
学习笔记:第一个Python程序
笔记·学习
优雅鹅9 小时前
ARM、AArch64、amd64、x86_64、x86有什么区别?
arm开发·学习
..过云雨9 小时前
05.【Linux系统编程】进程(冯诺依曼体系结构、进程概念、进程状态(注意僵尸和孤儿)、进程优先级、进程切换和调度)
linux·笔记·学习
咸甜适中10 小时前
rust语言 (1.88) egui (0.32.2) 学习笔记(逐行注释)(二十八)使用图片控件显示图片
笔记·学习·rust·egui
虫虫rankourin11 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
开心不就得了12 小时前
React 状态管理
react.js·typescript