es6新特性

ES6（ECMAScript 2015）是 JavaScript 的一个重要版本更新，引入了许多新特性，极大地提升了 JavaScript 的开发效率和代码可读性。以下是 ES6 的核心特性及其用法详解：

1. let 和 const

• let：用于声明块级作用域的变量，解决了 var 的函数作用域问题。
• const：用于声明常量，值不能被重新赋值（但对象或数组的内容可以修改）。

let a = 10;
a = 20; // 允许重新赋值

const b = 30;
b = 40; // 报错：Assignment to constant variable

2. 箭头函数（Arrow Functions）

• 提供了一种更简洁的函数语法。
• 箭头函数没有自己的 this，this 继承自外层作用域。

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

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

// 无参数
const greet = () => "Hello!";

// 多行函数体
const multiply = (a, b) => {
    return a * b;
};

3. 模板字符串（Template Literals）

• 使用反引号（`）定义字符串，支持多行字符串和嵌入表达式。

const name = "Alice";
const age = 25;

// 传统字符串拼接
console.log("My name is " + name + " and I am " + age + " years old.");

// 模板字符串
console.log(`My name is ${name} and I am ${age} years old.`);

// 多行字符串
const message = `
  Hello,
  Welcome to ES6!
`;

4. 解构赋值（Destructuring Assignment）

• 从数组或对象中提取值并赋值给变量。

数组解构

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

对象解构

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

5. 默认参数（Default Parameters）

• 允许为函数参数设置默认值。

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest!
greet("Alice"); // Hello, Alice!

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

• 扩展运算符（...）：用于展开数组或对象。
• 剩余参数（...）：用于将多个参数合并为一个数组。

扩展运算符

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);
}

console.log(sum(1, 2, 3)); // 6

7. 类（Classes）

• 提供了更接近传统面向对象编程的语法。

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

8. 模块化（Modules）

• 使用 import 和 export 实现模块化。

导出模块

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

导入模块

// app.js
import { add, subtract } from './math.js';

console.log(add(2, 3)); // 5

9. Promise 和异步编程

• Promise：用于处理异步操作，避免回调地狱。

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
};

fetchData()
    .then(data => console.log(data)) // Data fetched!
    .catch(error => console.error(error));

10. 新的数据结构

• Map：键值对集合，键可以是任意类型。
• Set：存储唯一值的集合。

// Map
const map = new Map();
map.set("name", "Alice");
map.set(1, "One");
console.log(map.get("name")); // Alice

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

11. 迭代器和生成器

• 迭代器（Iterators）：提供了一种遍历数据结构的统一方式。
• 生成器（Generators）：使用 function* 定义，可以暂停和恢复执行。

// 生成器
function* generateSequence() {
    yield 1;
    yield 2;
    yield 3;
}

const generator = generateSequence();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2

12. Symbol 类型

• 用于创建唯一的标识符。

const id = Symbol("id");
const user = {
    [id]: 123,
    name: "Alice"
};

console.log(user[id]); // 123

总结

ES6 引入了许多强大的特性，使得 JavaScript 更加现代化和高效。掌握这些特性可以显著提升开发效率和代码质量。建议在实际项目中逐步应用这些特性，以加深理解。