ECMAScript 2015（也称为ES6）是JavaScript语言的一个重要版本，它引入了许多新特性和增强功能，极大地改善了JavaScript的开发体验。以下是对ECMAScript 6主要特性的详解，并附带一些示例代码。
1. 块级作用域（Block Scope）
let 和 const
在ES6之前，JavaScript只有函数作用域和全局作用域。ES6引入了块级作用域，通过`let`和`const`关键字定义变量，取代了传统的`var`。
```javascript { let a = 10; const b = 20; console.log(a); // 10 console.log(b); // 20 } // console.log(a); // ReferenceError: a is not defined // console.log(b); // ReferenceError: b is not defined ```
`let`和`const`的主要区别在于：`let`声明的变量可以重新赋值，而`const`声明的变量声明后不能重新赋值。
2. 模板字面量（Template Literals）
模板字面量使用反引号（`` ` ``）包围，可以包含嵌入表达式的字符串。
```javascript let name = 'World'; let greeting = `Hello, ${name}!`; console.log(greeting); // Hello, World! ```
模板字面量支持多行字符串和内嵌表达式：
```javascript let multiLine = `This is a multi-line string.`; console.log(multiLine); let a = 5; let b = 10; console.log(`The sum of ${a} and ${b} is ${a + b}.`); ```
3. 箭头函数（Arrow Functions）
箭头函数提供了更简洁的语法来定义函数，并且不绑定自己的`this`，它会捕获其所在上下文的`this`值。
```javascript // 传统函数写法 function add(x, y) { return x + y; } // 箭头函数写法 const add = (x, y) => x + y; console.log(add(2, 3)); // 5 // 捕获this function Person() { this.age = 0; setInterval(() => { this.age++; console.log(this.age); }, 1000); } let p = new Person(); ```
4. 解构赋值（Destructuring Assignment）
解构赋值允许从数组或对象中提取值，并将其赋给多个变量。
数组解构
```javascript let [a, b, c] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 let [x, , y] = [1, 2, 3]; console.log(x); // 1 console.log(y); // 3 ```
对象解构
```javascript let person = { name: 'Alice', age: 25 }; let { name, age } = person; console.log(name); // Alice console.log(age); // 25 ```
5. 默认参数（Default Parameters）
ES6允许为函数参数设置默认值。
```javascript function greet(name = 'Guest') { console.log(`Hello, ${name}!`); } greet(); // Hello, Guest! greet('Alice'); // Hello, Alice! ```
6. 展开运算符（Spread Operator）
展开运算符（`...`）用于展开数组或对象。
展开数组
```javascript let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4, 5, 6]; console.log(arr2); // [1, 2, 3, 4, 5, 6] ```
展开对象
```javascript let obj1 = { a: 1, b: 2 }; let obj2 = { ...obj1, c: 3 }; console.log(obj2); // { a: 1, b: 2, c: 3 } ```
7. 类（Classes）
ES6引入了类语法，使得面向对象编程更加直观。
```javascript 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.`); } } let alice = new Person('Alice', 25); alice.greet(); // Hello, my name is Alice and I am 25 years old. ```
8. 模块（Modules）
ES6模块系统允许你从一个文件中导出对象、函数、变量，并在另一个文件中导入使用。
导出（export）
```javascript // math.js export const pi = 3.14159; export function add(x, y) { return x + y; } ```
导入（import）
```javascript // main.js import { pi, add } from './math'; console.log(pi); // 3.14159 console.log(add(2, 3)); // 5 ```
9. Promise
Promise是一种用于处理异步操作的对象。
```javascript let promise = new Promise((resolve, reject) => { let success = true; if (success) { resolve('Operation successful'); } else { reject('Operation failed'); } }); promise.then((message) => { console.log(message); }).catch((error) => { console.log(error); }); ```
10. Symbol
Symbol是ES6引入的一种新的原始数据类型，表示独一无二的值。
```javascript let sym = Symbol('description'); console.log(sym); // Symbol(description) let obj = { [sym]: 'value' }; console.log(obj[sym]); // value ```
结论
ECMAScript 6引入了许多新的特性和改进，使JavaScript变得更加强大和易用。这些特性不仅提升了代码的可读性和可维护性，同时也提供了更多的工具来编写现代化的JavaScript代码。通过掌握这些新特性，可以更高效地进行JavaScript开发，实现更复杂的功能和更优雅的代码结构。
