ES6的新特性 - 《JavaScript教程》 - 严富坤的知识库专栏(yanfukun.com)

1. 块级作用域声明：let 和 const
2. 箭头函数
3. 模板字符串
- 插值
- 多行字符串
4. 解构赋值
- 数组解构
- 对象解构
5. 默认参数值
6. 扩展运算符和剩余参数
- 扩展运算符
- 剩余参数
7. 增强的对象字面量
8. 类
- 定义类
- 继承
9. 模块
- 导出模块
- 导入模块
10. Promise
11. Symbol
12. Set 和 Map
- Set
- Map
13. 迭代器和生成器
总结

ES6，也称为 ECMAScript 2015，是 JavaScript 的第六版标准，带来了许多令人兴奋的新特性。这些新特性大大提升了 JavaScript 的开发体验和代码的可维护性。本文将深入探讨 ES6 的主要新特性，帮助你全面了解这些现代 JavaScript 工具。

1. 块级作用域声明：let 和 const

在 ES6 之前，JavaScript 只有 var 一种声明变量的方式，var 声明的变量具有函数作用域，但没有块级作用域。ES6 引入了 let 和 const，它们具有块级作用域。

if (true) {
    var x = 5;
}
console.log(x); // 输出 5
if (true) {
    let y = 10;
}
console.log(y); // ReferenceError: y is not defined

let 用于声明可以重新赋值的变量，而 const 用于声明只读常量。一旦用 const 声明了一个变量，就不能再重新赋值。

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.

2. 箭头函数

箭头函数是一种简洁的函数定义方式，并且不会绑定自己的 this，而是继承自外围作用域。

// 传统函数
function add(a, b) {
    return a + b;
}
// 箭头函数
const add = (a, b) => a + b;

如果函数体只有一条语句，可以省略大括号和 return 关键字：

const square = x => x * x;

箭头函数中的 this 继承自外层作用域：

function Person() {
    this.age = 0;
    setInterval(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}
const p = new Person();

3. 模板字符串

模板字符串使用反引号（` ）定义，可以包含嵌入的表达式和多行文本。

插值

模板字符串中的插值使用 ${} 语法：

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

多行字符串

模板字符串支持多行文本：

const message = `This is a
multi-line
string.`;
console.log(message);

4. 解构赋值

解构赋值是一种从数组或对象中提取值并赋给变量的语法，使代码更加简洁和可读。

数组解构

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

对象解构

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

5. 默认参数值

ES6 允许在函数定义时为参数指定默认值：

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

6. 扩展运算符和剩余参数

扩展运算符

扩展运算符用于展开数组或对象：

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // 输出 [1, 2, 3, 4, 5, 6]

剩余参数

剩余参数用于将不定数量的参数表示为一个数组：

function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出 10

7. 增强的对象字面量

ES6 对对象字面量的语法进行了增强，使定义对象更加简洁。

属性简写

当对象的属性名和变量名相同时，可以使用属性简写：

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

方法简写

定义方法时，可以省略 function 关键字：

const person = {
    name: 'Bob',
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};
person.greet(); // 输出 "Hello, my name is Bob"

计算属性名

ES6 允许使用表达式作为属性名：

const propName = 'age';
const person = {
    name: 'Charlie',
    [propName]: 30
};
console.log(person); // 输出 { name: 'Charlie', age: 30 }

8. 类

ES6 引入了类语法，使定义和继承类更加简单和直观。

定义类

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}
const person = new Person('David', 20);
person.greet(); // 输出 "Hello, my name is David and I am 20 years old."

继承

通过 extends 和 super 实现继承：

class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
    }
    study() {
        console.log(`${this.name} is studying.`);
    }
}
const student = new Student('Eve', 22, 'A');
student.greet(); // 输出 "Hello, my name is Eve and I am 22 years old."
student.study(); // 输出 "Eve is studying."

9. 模块

ES6 引入了模块系统，使代码模块化更加简单和规范。

导出模块

使用 export 关键字导出变量、函数或类：

// utils.js
export function add(a, b) {
    return a + b;
}

导入模块

使用 import 关键字导入模块：

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

10. Promise

Promise 是一种用于处理异步操作的新方式，避免了回调地狱。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});
promise.then(result => {
    console.log(result); // 输出 "Success!"
}).catch(error => {
    console.error(error);
});

11. Symbol

Symbol 是一种新的原始数据类型，表示独一无二的值，常用于定义对象的唯一属性名。

const sym1 = Symbol('foo');
const sym2 = Symbol('foo');
console.log(sym1 === sym2); // 输出 false
const obj = {
    [sym1]: 'value1',
    [sym2]: 'value2'
};
console.log(obj[sym1]); // 输出 "value1"
console.log(obj[sym2]); // 输出 "value2"

12. Set 和 Map

ES6 引入了新的集合类型：Set 和 Map，用于存储唯一值和键值对。

Set

Set 是一种集合，存储唯一值：

const set = new Set([1, 2, 3, 3, 4]);
console.log(set); // 输出 Set { 1, 2, 3, 4 }
set.add(5);
console.log(set.has(5)); // 输出 true
set.delete(5);
console.log(set.has(5)); // 输出 false

Map

Map 是一种键值对集合，键可以是任意类型：

const map = new Map();
map.set('name', 'Alice');
map.set(1, 'one');
console.log(map.get('name')); // 输出 "Alice"
console.log(map.get(1)); // 输出 "one"
map.delete('name');
console.log(map.has('name')); // 输出 false

13. 迭代器和生成器

迭代器和生成器是 JavaScript 中非常强大的工具，它们为遍历和生成序列提供了灵活而优雅的解决方案。本文将详细解释它们的概念、用法及其在实际开发中的应用。

迭代器（Iterator）

迭代器是一种对象，它为集合提供了一种机制，能够逐个访问集合中的每个元素。迭代器对象实现了 Iterator 接口，该接口包含一个 next 方法，返回一个包含 value 和 done 属性的对象。

value：当前遍历到的元素的值。
done：一个布尔值，表示迭代是否完成。

创建迭代器

我们可以通过实现 Iterator 接口来创建自己的迭代器。以下是一个简单的迭代器示例：

function createIterator(array) {
    let index = 0;
    return {
        next: function() {
            if (index < array.length) {
                return { value: array[index++], done: false };
            } else {
                return { value: undefined, done: true };
            }
        }
    };
}
const iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // 输出 { value: 1, done: false }
console.log(iterator.next()); // 输出 { value: 2, done: false }
console.log(iterator.next()); // 输出 { value: 3, done: false }
console.log(iterator.next()); // 输出 { value: undefined, done: true }

内置迭代器

在 JavaScript 中，许多内置对象都实现了 Iterator 接口，例如数组、字符串、Map 和 Set 等。我们可以使用 Symbol.iterator 来获取这些对象的迭代器。

const array = [1, 2, 3];
const arrayIterator = array[Symbol.iterator]();
console.log(arrayIterator.next()); // 输出 { value: 1, done: false }
console.log(arrayIterator.next()); // 输出 { value: 2, done: false }
console.log(arrayIterator.next()); // 输出 { value: 3, done: false }
console.log(arrayIterator.next()); // 输出 { value: undefined, done: true }

for…of 循环

for...of 循环是一种遍历迭代器对象的简洁语法，适用于所有实现了 Iterator 接口的对象。

const array = [1, 2, 3];
for (const value of array) {
    console.log(value); // 依次输出 1, 2, 3
}

生成器（Generator）

生成器是一个返回迭代器的函数，它使用 function* 语法定义，并可以通过 yield 关键字生成多个值。生成器函数执行时不会立即执行，而是返回一个生成器对象，通过调用生成器对象的 next 方法，逐步执行函数体。

创建生成器函数

生成器函数使用 function* 语法定义：

function* generatorFunction() {
    yield 1;
    yield 2;
    yield 3;
}
const generator = generatorFunction();
console.log(generator.next()); // 输出 { value: 1, done: false }
console.log(generator.next()); // 输出 { value: 2, done: false }
console.log(generator.next()); // 输出 { value: 3, done: false }
console.log(generator.next()); // 输出 { value: undefined, done: true }

使用 for…of 遍历生成器

生成器对象也是可迭代的，可以使用 for...of 循环遍历生成器生成的值。

function* generatorFunction() {
    yield 1;
    yield 2;
    yield 3;
}
for (const value of generatorFunction()) {
    console.log(value); // 依次输出 1, 2, 3
}

生成无限序列

生成器的一个强大特性是可以生成无限序列，例如斐波那契数列：

function* fibonacci() {
    let [prev, curr] = [0, 1];
    while (true) {
        yield curr;
        [prev, curr] = [curr, prev + curr];
    }
}
const gen = fibonacci();
console.log(gen.next().value); // 输出 1
console.log(gen.next().value); // 输出 1
console.log(gen.next().value); // 输出 2
console.log(gen.next().value); // 输出 3
console.log(gen.next().value); // 输出 5
console.log(gen.next().value); // 输出 8

生成器的高级用法

生成器不仅仅用于简单的序列生成，还可以用于异步编程和复杂的迭代逻辑。

使用生成器处理异步操作

生成器和 Promise 结合，可以用来简化异步操作的写法，例如：

function* fetchData() {
    const data1 = yield fetch('https://api.example.com/data1').then(res => res.json());
    console.log(data1);
    const data2 = yield fetch('https://api.example.com/data2').then(res => res.json());
    console.log(data2);
}
function run(generator) {
    const gen = generator();
    function handle(result) {
        if (result.done) return;
        result.value.then(data => handle(gen.next(data)));
    }
    handle(gen.next());
}
run(fetchData);

生成器中抛出和捕获错误

生成器函数可以在执行过程中抛出和捕获错误：

function* generatorFunction() {
    try {
        yield 1;
        yield 2;
        yield 3;
    } catch (error) {
        console.log('Error caught:', error);
    }
}
const generator = generatorFunction();
console.log(generator.next()); // 输出 { value: 1, done: false }
console.log(generator.next()); // 输出 { value: 2, done: false }
generator.throw(new Error('Something went wrong')); // 输出 "Error caught: Error: Something went wrong"
console.log(generator.next()); // 输出 { value: undefined, done: true }

总结

迭代器和生成器是 JavaScript 中功能强大且灵活的工具。迭代器提供了一种统一的方式来遍历集合，而生成器则为生成序列和异步操作提供了强大的支持。通过理解和掌握它们，你可以编写出更加优雅和高效的代码。希望通过本文的介绍，你能够更好地理解和应用这些强大的特性，在实际开发中发挥它们的优势。