JavaScript ES6+ 新特性完全掌握

ES6（ECMAScript 2015）是 JavaScript 历史上最重要的更新之一，引入了大量新特性。本文将详细介绍这些特性及其使用场景。

let 和 const

ES6 引入了块级作用域的变量声明方式：

// let - 可变变量
let count = 0;
count = 1;

// const - 常量
const PI = 3.14159;
// PI = 3; // TypeError

// 块级作用域
{
  let blockScoped = '只在块内有效';
}
// console.log(blockScoped); // ReferenceError

箭头函数

箭头函数提供了更简洁的语法，并且不绑定 this：

// 传统函数
function add(a, b) {
  return a + b;
}

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

// 单参数可省略括号
const double = x => x * 2;

// this 绑定
class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(() => {
      this.seconds++; // this 正确指向 Timer 实例
    }, 1000);
  }
}

解构赋值

数组解构

const [a, b, c] = [1, 2, 3];
// a = 1, b = 2, c = 3

// 交换变量
let x = 1, y = 2;
[x, y] = [y, x];

// 默认值
const [first, second = 'default'] = [1];
// first = 1, second = 'default'

对象解构

const person = { name: 'TianHang', age: 25, city: 'Shanghai' };

const { name, age } = person;
// name = 'TianHang', age = 25

// 重命名
const { name: userName } = person;
// userName = 'TianHang'

// 默认值
const { country = 'China' } = person;
// country = 'China'

模板字符串

const name = 'TianHang';
const greeting = `Hello, ${name}!`;

// 多行字符串
const html = `
  <div class="container">
    <h1>${greeting}</h1>
  </div>
`;

// 表达式
const a = 10, b = 20;
const result = `${a} + ${b} = ${a + b}`;

扩展运算符

// 数组扩展
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 对象扩展
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// 函数参数
function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
sum(1, 2, 3, 4); // 10

Promise 和 Async/Await

Promise

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据加载成功');
    }, 1000);
  });
};

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Async/Await

const fetchDataAsync = async () => {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

类 (Class)

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} 发出声音`);
  }

  static getSpecies() {
    return '动物';
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} 汪汪叫`);
  }
}

const dog = new Dog('旺财', '金毛');
dog.speak(); // 旺财 汪汪叫

模块化

// 导出
// utils.js
export const add = (a, b) => a + b;
export default class Calculator {
  // ...
}

// 导入
import Calculator, { add } from './utils';

新的数据结构

Map

const map = new Map();
map.set('name', 'TianHang');
map.set('age', 25);
console.log(map.get('name')); // TianHang

Set

const set = new Set([1, 2, 2, 3, 3, 3]);
console.log([...set]); // [1, 2, 3]

总结

ES6+ 的新特性大大提升了 JavaScript 的开发效率和代码可读性。掌握这些特性对于现代前端开发至关重要。