欢迎来到 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() 可调用父类构造函数,注意继承链的完整性

ES6_Advanced

📌 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 可提升异步代码可读性,注意错误处理的完整性

Promises_and_Async

📌 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 高级练习专区 获取完整代码案例与挑战任务!