ES6（ECMAScript 2015）及其后续版本（ES7、ES8 等）引入了许多新的特性，使 JavaScript 变得更强大、简洁和易于使用。以下是 ES6+ 新特性及其详细解说：

1. let 和 const 声明变量

• let：用于声明块级作用域变量，避免了 var 的变量提升和作用域问题。
• const：用于声明常量，声明后不能重新赋值，且具有块级作用域。

示例：

let name = "Alice";
const PI = 3.14159;

• let 允许在代码块中声明局部变量，避免作用域污染。
• const 用于定义常量，值不能被修改，但对于对象或数组的内容可以修改。

2. 箭头函数（Arrow Functions）

箭头函数提供了更简洁的函数表达式语法，并且不会绑定 this，使得在回调函数中更容易处理上下文。

语法：

const add = (a, b) => a + b;

• 简化语法：如果函数只有一个表达式，return 语句可以省略。
• this 绑定：箭头函数不创建自己的 this，它会从外层上下文继承 this。

3. 模板字面量（Template Literals）

模板字面量允许在字符串中嵌入变量和表达式，使用反引号 ` 包裹。

示例：

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting);  // 输出：Hello, Alice!

• 支持多行字符串。
• 可以在字符串中嵌入表达式。

4. 解构赋值（Destructuring Assignment）

解构赋值使得从对象或数组中提取值变得更加简便。

4.1 对象解构：

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name);  // 输出：Alice

4.2 数组解构：

const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a);  // 输出：1

5. 扩展运算符（Spread Operator）与剩余参数（Rest Parameters）

5.1 扩展运算符（...）

扩展运算符用于展开数组、对象或字符串中的元素。

示例：

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];  // [1, 2, 3, 4, 5]

const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 };  // { a: 1, b: 2, c: 3 }

5.2 剩余参数（...）

剩余参数用于获取函数的多余参数，聚合为一个数组。

示例：

function sum(...args) {
  return args.reduce((total, num) => total + num);
}
console.log(sum(1, 2, 3, 4));  // 输出：10

6. 默认参数（Default Parameters）

在函数参数中可以设置默认值，当调用函数时未传入对应参数，参数会使用默认值。

示例：

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}
greet();  // 输出：Hello, Guest

7. for...of 循环

for...of 循环是一种遍历数组或其他可迭代对象（如字符串、Set、Map）的方法。

示例：

const arr = [1, 2, 3];
for (let num of arr) {
  console.log(num);  // 输出 1, 2, 3
}

• 不像 for...in 适用于对象，for...of 适用于可迭代对象。

8. Promise

Promise 是一种异步编程的解决方案，用于处理异步操作的成功或失败。

示例：

let promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Operation successful");
  } else {
    reject("Operation failed");
  }
});

promise
  .then(result => console.log(result))  // 输出：Operation successful
  .catch(error => console.log(error));

• then() 用于处理异步操作成功的结果。
• catch() 用于处理异步操作的错误。

9. async 和 await

async 和 await 是基于 Promise 的语法糖，提供了一种更加简洁的异步编程方式。

示例：

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Error:', error);
  }
}

• async 函数返回一个 Promise。
• await 用于暂停 async 函数的执行，直到 Promise 完成。

10. class 类

ES6 引入了类（class）的语法糖，使面向对象编程更加直观。

示例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const alice = new Person("Alice", 25);
alice.greet();  // 输出：Hello, my name is Alice

• class 支持继承、构造函数以及原型方法。
• 通过 extends 关键字实现类的继承。

11. 模块化（Modules）

ES6 引入了模块化语法，允许使用 import 和 export 在不同文件间共享代码。

11.1 导出模块：

// module.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}

11.2 导入模块：

// main.js
import { PI, add } from './module.js';
console.log(PI);  // 输出：3.14159
console.log(add(2, 3));  // 输出：5

• export 用于导出变量、函数或类。
• import 用于导入其他模块的变量、函数或类。

12. Map 和 Set 数据结构

ES6 引入了 Map 和 Set 数据结构，提供了更高效的键值对和集合操作。

• Map：键值对集合，键可以是任何类型。

  • 示例：

    const map = new Map();
    map.set('name', 'Alice');
    console.log(map.get('name'));  // 输出：Alice
    

• Set：值的集合，所有值唯一。

  • 示例：

    const set = new Set([1, 2, 3, 3]);
    console.log(set);  // 输出：Set { 1, 2, 3 }
    

总结

ES6+ 引入了许多新特性，使 JavaScript 更加现代化、灵活和高效。掌握这些特性不仅能够让代码更加简洁易读，也能提高代码的可维护性和开发效率。