ES6新特性详解

// let 声明块级作用域变量
{
  let x = 10;
  console.log(x); // 10
}
console.log(x); // ReferenceError

// const 声明常量
const PI = 3.14159;
PI = 3.14; // TypeError: Assignment to constant variable

// var vs let 在循环中的区别
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出 3, 3, 3
}

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100); // 输出 0, 1, 2
}

// 传统函数表达式
const sum = function(a, b) {
  return a + b;
};

// 箭头函数
const sum = (a, b) => a + b;

// 单参数可省略括号
const square = n => n * n;

// this 绑定示例
function Counter() {
  this.count = 0;
  setInterval(() => {
    this.count++; // this 指向 Counter 实例
    console.log(this.count);
  }, 1000);
}
const counter = new Counter();

// 数组解构
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1, 2, 3

// 对象解构
const user = {
  name: 'John',
  age: 30,
  email: 'john@example.com'
};
const { name, email } = user;
console.log(name, email); // John, john@example.com

// 函数参数解构
function getUserInfo({ name, age }) {
  return `${name} is ${age} years old`;
}
console.log(getUserInfo(user)); // John is 30 years old

const name = 'John';
const age = 30;

// 传统字符串拼接
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';

// 模板字符串
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

// 多行字符串
const message = `
  Dear ${name},
  
  Thank you for your interest in our product.
  We will contact you shortly.
  
  Best regards,
  The Team
`;

// 表达式计算
const total = `Total: $${(25 * 1.2).toFixed(2)}`;

// 类定义
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }

  // 静态方法
  static info() {
    console.log('This is a Person class');
  }
}

// 继承
class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }

  study() {
    console.log(`${this.name} is studying ${this.major}`);
  }
}

// 使用类
const john = new Person('John', 30);
john.greet();

const alice = new Student('Alice', 20, 'Computer Science');
alice.greet();
alice.study();

// 创建Promise
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: 'John' };
      resolve(data); // 成功
      // reject('Error: Data not available'); // 失败
    }, 1000);
  });
};

// 使用Promise
fetchData()
  .then(data => {
    console.log('Data received:', data);
    return data.name;
  })
  .then(name => {
    console.log('User name:', name);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// Promise.all 并行处理
Promise.all([
  fetchData(),
  Promise.resolve('Additional data')
])
  .then(([data1, data2]) => {
    console.log('All data:', data1, data2);
  });

// math.js - 导出模块
export const PI = 3.14159;

export function sum(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

// app.js - 导入模块
import multiply, { PI, sum } from './math.js';

console.log(PI); // 3.14159
console.log(sum(2, 3)); // 5
console.log(multiply(4, 5)); // 20

// 重命名导入
import { sum as add } from './math.js';
console.log(add(10, 20)); // 30

// 导入所有命名导出
import * as math from './math.js';
console.log(math.PI);
console.log(math.sum(5, 7));

// 默认参数
function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!

// 剩余参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

// 扩展运算符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 对象字面量增强
const name = 'John';
const age = 30;
const user = { name, age }; // { name: 'John', age: 30 }

// Symbol类型
const id = Symbol('id');
const user = {
  [id]: 123,
  name: 'John'
};
console.log(user[id]); // 123