介绍 ES6 (ECMAScript 2015) 新特性

ES6，也称为 ECMAScript 2015，是 JavaScript 语言的一个重要升级。从 2015 年发布以来，它引入了许多新特性，使开发人员能够编写更易于阅读和维护的代码，同时也提供了一些强大的功能。本文将逐一介绍 ES6 的主要特性，并提供相应的代码示例。

1. let 和 const

let

let 声明了一个局部的变量，与 var 作用域类似，但 var 具有函数作用域，而 let 具有块级作用域。

{
  let x = 10;
  var y = 20;
}
console.log(x); // 报错
console.log(y); // 输出 20

const

const 声明了一个常量，一旦声明，常量的值就不能再改变。

const PI = 3.14159265359;
PI = 3.14 // 报错，一旦声明了常量，值就不能改变

2. 箭头函数

箭头函数是 ES6 引入的一种更加简洁的函数语法，它使用 => 符号来表示。

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

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

setTimeout(() => {
  console.log("箭头函数在定时器中的典型用法");
}, 1000);

3. 模板字符串

模板字符串使用反引号（`）包含，并且可以直接在其中插入变量和表达式。

const name = 'Alice'; 
const age = 25; 
// 传统字符串拼接方式 
const message = 'My name is ' + name + ', and I am ' + age + ' years old.'; 
// 模板字面量
const message = `My name is ${name}, and I am ${age} years old.`; 
console.log(message); // My name is Alice, and I am 25 years old.

4. 解构赋值

解构赋值允许我们从数组或对象中提取值并赋值给变量。

const arr = [10, 20, 30];
const [x, y, z] = arr;
console.log(x, y, z); // 输出 10 20 30

const obj = {
  name: 'Tom',
  age: 18
};
const {name, age} = obj;
console.log(name, age); // 输出 Tom 18

5. 增强的对象字面量

ES6 允许在对象字面量中直接使用变量和表达式。

const name = 'Tom';
const age = 18;
const obj = {
  name,
  age: age + 1
};
console.log(obj); // 输出 {name: "Tom", age: 19}

6. 模块化

ES6 引入了模块化语法，可以更好地组织和封装代码。

模块导入和导出：允许将代码组织成模块，并在其他模块中导入和导出模块的功能。

// math.js
export function sum(a, b) {
  return a + b;
}

// main.js
import { sum } from './math.js';
console.log(sum(10, 20)); // 输出 30

7. Promises 和 async/await

ES6 引入了 Promises 和 async/await，以解决 JavaScript 中的异步编程问题。Promises 是一种编程模式，用于处理异步操作，而 async/await 是基于 Promises 的语法糖，使得异步代码看起来更像同步代码，提高了可读性。

示例：

const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

const asyncExample = async () => {
  console.log("开始等待");
  await delay(1000);
  console.log("等待结束");
};

asyncExample(); // 输出 "开始等待"，1 秒后输出 "等待结束"

Promise.finally() 方法允许在 Promise 完成（无论成功还是失败）时执行一些操作。

   fetch("https://api.example.com/data")
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error(error))
     .finally(() => console.log("Request complete"));

8. 迭代器和生成器

ES6 引入了对迭代器和生成器的支持，可以更优雅地处理复杂的数据结构。迭代器允许您遍历数据结构，而生成器则是一种特殊的函数，可以生成迭代器。

迭代器

迭代器是一种具有以下两个方法的对象：next() 和 Symbol.iterator。next() 方法返回数据结构的下一个元素，Symbol.iterator 方法返回迭代器本身。

示例：

const myArray = [1, 2, 3, 4, 5];
const iterator = myArray[Symbol.iterator]();

console.log(iterator.next()); // 输出 { value: 1, done: false }
console.log(iterator.next()); // 输出 { value: 2, done: false }
console.log(iterator.next()); // 输出 { value: 3, done: false }

生成器

生成器是一种特殊的函数，可以使用 function* 声明。生成器函数的特点是它们可以被暂停执行，然后在稍后的时间点从暂停处继续执行。生成器函数可以使用 yield 关键字返回一个值，并将函数的执行状态保存起来。当生成器的 next() 方法被调用时，函数会从上次暂停的地方继续执行。

示例：

function* generatorFunction() {
  yield "Hello";
  yield "World";
}

const generator = generatorFunction();

console.log(generator.next()); // 输出 { value: "Hello", done: false }
console.log(generator.next()); // 输出 { value: "World", done: false }
console.log(generator.next()); // 输出 { value: undefined, done: true }

举例说明

假设我们有一个复杂的数据结构，例如一个二维数组，我们想要遍历其中的所有元素。使用迭代器和生成器，我们可以轻松地实现这个功能。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

function* matrixIterator(matrix) {
  for (const row of matrix) {
    for (const element of row) {
      yield element;
    }
  }
}

const iterator = matrixIterator(matrix);

for (const element of iterator) {
  console.log(element);
}

在这个例子中，我们定义了一个生成器函数 matrixIterator，它接受一个二维数组作为参数。生成器函数使用两个嵌套的 for...of 循环遍历二维数组的所有元素，并使用 yield 返回每个元素。然后我们创建了一个 matrixIterator 的实例，并使用 for...of 循环遍历迭代器，将每个元素打印到控制台。

9. 默认参数

函数参数可以设置默认值，如果调用函数时没有提供参数，将使用默认值。

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

greet(); // 输出 "Hello, World!"
greet("Alice"); // 输出 "Hello, Alice!"
```

10. 类

引入了基于类的面向对象编程。

```
class Person {
  constructor(name) {
    this.name = name;
  }

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

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