初识ECMAScript 6 (ES6)ECMAScript 6 (ES6)，也称为 ECMAScript 2015，是

ECMAScript 6 (ES6)，也称为 ECMAScript 2015，是 JavaScript 的一个主要更新，增加了许多新的特性和改进，使得编写 JavaScript 更加简洁、高效和易于维护。以下是 ES6 中的一些重要特性及其详细阐述：

1. 块级作用域 (Block Scope)

`let` 和 `const`

在 ES6 之前，JavaScript 只有函数作用域和全局作用域。let 和 const 引入了块级作用域，这意味着变量只在块内（如 {} 内）有效。

{
    let x = 10;
    const y = 20;
    console.log(x); // 10
    console.log(y); // 20
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

2. 箭头函数 (Arrow Functions)

箭头函数提供了一种更简洁的函数定义方式，并且不绑定自己的 this 值，this 保持为外层作用域的 this。

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

// Traditional function
function add(a, b) {
    return a + b;
}

3. 模板字面量 (Template Literals)

模板字面量使用反引号 (`) 创建，可以嵌入表达式和多行字符串。

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!

const multiLine = `This is
a string
spanning multiple lines.`;
console.log(multiLine);

4. 解构赋值 (Destructuring Assignment)

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

数组解构

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

对象解构

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

5. 默认参数 (Default Parameters)

函数参数可以有默认值，当没有传递参数或传递 undefined 时使用默认值。

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

6. 展开语法 (Spread Syntax)

展开语法用于展开数组或对象的元素。

数组展开

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

对象展开

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

7. 类 (Classes)

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 john = new Person('John', 30);
john.greet(); // Hello, my name is John and I am 30 years old.

8. 模块 (Modules)

ES6 模块允许将代码拆分为更小、更可管理的文件。

导出 (Export)

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

导入 (Import)

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

9. 迭代器和生成器 (Iterators and Generators)

迭代器

迭代器是一种对象，提供了一个 next 方法，每次调用返回一个包含 value 和 done 属性的对象。

const iterable = [1, 2, 3];
const iterator = iterable[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 }
console.log(iterator.next()); // { value: undefined, done: true }

生成器

生成器是用 function* 定义的，可以用 yield 返回多个值。

function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

10. Promise

Promise 提供了一种处理异步操作的方式，避免了回调地狱。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});

promise.then((message) => {
    console.log(message); // Success!
}).catch((error) => {
    console.error(error);
});

11. Symbol

Symbol 是一种新的基本数据类型，用来创建唯一的标识符。

const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false

12. 新的内置方法

字符串方法

const str = 'Hello, world!';
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true
console.log(str.includes('world')); // true

数组方法

const arr = [1, 2, 3, 4, 5];
console.log(arr.find(x => x > 3)); // 4
console.log(arr.findIndex(x => x > 3)); // 3

通过这些特性，ES6 大大增强了 JavaScript 的功能和开发体验，鼓励使用更现代的编程风格和更结构化的代码。

初识ECMAScript 6 (ES6)