欢迎来到 JavaScript ES6 高级特性专项练习!这里整理了实用的代码示例与扩展知识点,助你掌握现代 JavaScript 开发的核心技能。
📌 1. 类(Classes)进阶
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
super.speak();
console.log('Woof!');
}
}
const myDog = new Dog('Buddy');
myDog.speak(); // 输出:Buddy makes a noise. Woof!
📌 小提示:使用
super()
可调用父类构造函数,注意继承链的完整性
📌 2. 模块化开发
// mathUtils.js
export function add(a, b) {
return a + b;
}
// main.js
import { add } from './mathUtils.js';
console.log(add(2, 3)); // 输出:5
🔗 想了解更多模块系统?点击此处查看模块化详解
📌 3. Promise 与 Async/Await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('请求失败:', error);
}
}
fetchData();
📌 使用
async/await
可提升异步代码可读性,注意错误处理的完整性
📌 4. Proxy 与 Reflect
const target = { name: 'JavaScript' };
const handler = {
get: (obj, prop) => {
return Reflect.get(obj, prop);
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出:JavaScript
💡 Proxy 可用于数据验证、日志记录等场景,Reflect 提供了一套反射API
📌 5. Symbol 与 Map
const key1 = Symbol('key1');
const obj = {
[key1]: 'secret value'
};
console.log(Object.keys(obj)); // 输出:[]
console.log(obj[key1]); // 输出:secret value
🔗 探索 Symbol 更多用法:ES6 Symbol 深度解析
📌 6. 迭代器与生成器
function* generateSequence() {
yield 1;
yield 2;
yield 3;
}
for (let value of generateSequence()) {
console.log(value); // 依次输出 1, 2, 3
}
📌 生成器函数通过 function*
定义,能有效处理大数据流
需要更多实战练习?前往 ES6 高级练习专区 获取完整代码案例与挑战任务!