javascript es6 新特性与核心技巧

封面图 • 2026-04-09 • JavaScript

JavaScript ES6（ECMAScript 2015）是 JavaScript 历史上一次重大更新，引入了许多新特性，使得代码更简洁、可读性更强、功能更强大。以下是 **ES6 的主要新特性和核心技巧**，帮助你快速掌握现代 JavaScript 编程。

---

## 🧩 一、ES6 新特性概览

### 1. **let 和 const 声明变量**
- `let`：块级作用域变量
- `const`：常量（不可重新赋值）

```javascript
let name = "Alice";
const age = 30;

// 不可重新赋值
// age = 31; // 报错
```

> ✅ 推荐使用 `let` 和 `const` 替代 `var`，避免变量提升和全局污染。

---

### 2. **箭头函数（Arrow Functions）**
简化函数写法，自动绑定 `this`。

```javascript
const add = (a, b) => a + b;
const sayHello = () => console.log("Hello");

// 简化回调函数
[1, 2, 3].forEach(num => console.log(num));
```

> ⚠️ 注意：箭头函数不绑定自己的 `this`，适合用于闭包或事件处理。

---

### 3. **模板字符串（Template Literals）**
用反引号（``）包裹字符串，支持多行和嵌入表达式。

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

const multiLine = `First line
Second line`;
console.log(multiLine);
```

---

### 4. **解构赋值（Destructuring Assignment）**
从数组或对象中提取值。

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

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

> 💡 适用于参数解构、对象/数组的赋值等。

---

### 5. **默认参数（Default Parameters）**
函数参数可以设置默认值。

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

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

---

### 6. **展开运算符（Spread Operator）**
将数组或对象展开为多个元素。

```javascript
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

const obj = { a: 1 };
const newObj = { ...obj, b: 2 }; // { a: 1, b: 2 }
```

---

### 7. **剩余参数（Rest Parameters）**
捕获函数中未命名的参数。

```javascript
function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

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

---

### 8. **类（Class）**
提供面向对象编程的语法糖。

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

greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const alice = new Person("Alice");
alice.greet(); // Hello, I'm Alice
```

---

### 9. **模块（Modules）**
通过 `import` 和 `export` 实现模块化开发。

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

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5
```

---

### 10. **Promise**
异步操作的标准化解决方案，替代回调函数。

```javascript
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

---

## 🧠 二、ES6 核心技巧

### 1. **使用 `const` 和 `let` 替代 `var`**
- 避免变量提升和块级作用域问题。
- 使用 `const` 表示不可变数据，`let` 表示可变数据。

### 2. **使用箭头函数简化回调**
- 特别适合事件处理、数组方法（如 `map`, `filter`, `reduce`）。
- 自动绑定 `this`，避免手动绑定。

### 3. **使用解构提升代码可读性**
- 从对象或数组中提取所需字段。
- 适用于 API 返回数据、函数参数等。

### 4. **使用展开运算符合并数组或对象**
- 比 `concat` 或 `Object.assign` 更简洁。

### 5. **使用类实现面向对象编程**
- 更清晰地组织代码结构。
- 支持继承、静态方法、私有属性等。

### 6. **使用模块管理代码**
- 分离不同功能模块，提高可维护性。
- 与打包工具（如 Webpack、Vite）结合使用更高效。

---

## 📌 三、常见 ES6 特性对比

| 特性              | 旧写法（ES5）         | 新写法（ES6）               |
|-------------------|------------------------|-----------------------------|
| 变量声明          | `var name = "Alice";`  | `let name = "Alice";`       |
| 函数              | `function add(a, b)`   | `const add = (a, b) => ...` |
| 模板字符串        | `'Hello ' + name`      | ``Hello ${name}``           |
| 解构赋值          | `var a = arr[0];`      | `const [a] = arr;`          |
| 默认参数          | `function add(a, b) { b = b || 0; }` | `function add(a, b = 0)` |

---

## 🧪 四、实战小例子

### 示例 1：使用 `map` 和箭头函数
```javascript
const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]
```

### 示例 2：使用 `rest` 和 `spread`
```javascript
function sumAll(...nums) {
  return nums.reduce((total, num) => total + num, 0);
}

const result = sumAll(1, 2, 3, 4);
console.log(result); // 10
```

### 示例 3：使用类和模块
```javascript
// person.js
export class Person {
  constructor(name) {
    this.name = name;
  }

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

// main.js
import { Person } from './person.js';

const p = new Person("Bob");
p.greet(); // Hello, Bob
```

---

## ✅ 五、总结

ES6 是现代 JavaScript 开发的基础，掌握这些特性能显著提升代码质量和开发效率。建议你在项目中优先使用 `let`、`const`、箭头函数、解构、展开/剩余参数等特性。

如果你需要进一步学习 ES7+ 的新特性（如 `async/await`、`Object.values`、`Array.from` 等），也可以继续问我 😊

是否需要我为你整理一份 ES6 快速参考表？