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

代码块：

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 = 2const 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); // 10const 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;