ECMAScript 6新特性有哪些

发布时间：2021-11-23 11:01:16 作者：柒染
来源：亿速云阅读：128

# ECMAScript 6新特性有哪些

## 目录
1. [引言](#引言)
2. [块级作用域与变量声明](#块级作用域与变量声明)
   - [let与const](#let与const)
   - [暂时性死区](#暂时性死区)
3. [箭头函数](#箭头函数)
   - [语法简化](#语法简化)
   - [this绑定机制](#this绑定机制)
4. [模板字符串](#模板字符串)
   - [多行字符串](#多行字符串)
   - [表达式插值](#表达式插值)
5. [解构赋值](#解构赋值)
   - [数组解构](#数组解构)
   - [对象解构](#对象解构)
6. [函数参数扩展](#函数参数扩展)
   - [默认参数](#默认参数)
   - [剩余参数](#剩余参数)
7. [扩展运算符](#扩展运算符)
   - [数组展开](#数组展开)
   - [对象展开](#对象展开)
8. [Promise异步编程](#promise异步编程)
   - [基本用法](#基本用法)
   - [链式调用](#链式调用)
9. [模块化系统](#模块化系统)
   - [export与import](#export与import)
   - [动态导入](#动态导入)
10. [类与继承](#类与继承)
    - [class语法](#class语法)
    - [extends继承](#extends继承)
11. [Symbol类型](#symbol类型)
    - [唯一性特性](#唯一性特性)
    - [内置Symbol](#内置symbol)
12. [集合类型](#集合类型)
    - [Set与WeakSet](#set与weakset)
    - [Map与WeakMap](#map与weakmap)
13. [迭代器与生成器](#迭代器与生成器)
    - [for...of循环](#forof循环)
    - [Generator函数](#generator函数)
14. [Proxy与Reflect](#proxy与reflect)
    - [元编程能力](#元编程能力)
    - [拦截操作](#拦截操作)
15. [结语](#结语)

---

## 引言
ECMAScript 6（ES6/ES2015）是JavaScript语言的重大更新，引入了大量现代化编程特性。本文系统性地介绍20+核心新特性及其应用场景，帮助开发者全面掌握ES6的核心能力。

---

## 块级作用域与变量声明
### let与const
```javascript
// 块级作用域示例
{
  let x = 10;
  const PI = 3.14;
}
console.log(x); // ReferenceError

特性对比表：

特性	var	let	const
作用域	函数级	块级	块级
变量提升	是	否	否
重复声明	允许	禁止	禁止
值可变性	可变	可变	不可变

暂时性死区

console.log(a); // undefined
var a = 1;

console.log(b); // ReferenceError
let b = 2;

箭头函数

语法简化

// 传统函数
[1,2,3].map(function(x) {
  return x * x;
});

// 箭头函数
[1,2,3].map(x => x * x);

this绑定机制

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // 正确绑定this
  }, 1000);
}

模板字符串

多行字符串

const html = `
  <div>
    <p>${user.name}</p>
  </div>
`;

表达式插值

const str = `1 + 1 = ${1 + 1}`; // "1 + 1 = 2"

解构赋值

数组解构

const [a, , b] = [1, 2, 3]; // a=1, b=3

对象解构

const { name, age } = user;
// 别名
const { name: userName } = user;

函数参数扩展

默认参数

function greet(name = 'Guest') {
  return `Hello ${name}`;
}

剩余参数

function sum(...numbers) {
  return numbers.reduce((a,b) => a+b);
}

扩展运算符

数组展开

const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // [1,2,3]

对象展开

const obj = { ...defaults, ...options };

Promise异步编程

基本用法

fetch(url)
  .then(response => response.json())
  .catch(error => console.error(error));

链式调用

asyncTask()
  .then(step1)
  .then(step2)
  .then(finalStep);

模块化系统

export与import

// math.js
export const PI = 3.14;

// app.js
import { PI } from './math.js';

动态导入

import('./module.js').then(module => {
  // 使用模块
});

类与继承

class语法

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hello ${this.name}`;
  }
}

extends继承

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

Symbol类型

唯一性特性

const sym1 = Symbol('key');
const sym2 = Symbol('key');
sym1 === sym2; // false

内置Symbol

const iterable = {
  [Symbol.iterator]() { /*...*/ }
};

集合类型

Set与WeakSet

const set = new Set([1,2,3,3]);
set.size; // 3

Map与WeakMap

const map = new Map();
map.set('key', 'value');

迭代器与生成器

for…of循环

for (const item of iterable) {
  console.log(item);
}

Generator函数

function* gen() {
  yield 1;
  yield 2;
}

Proxy与Reflect

元编程能力

const proxy = new Proxy(target, {
  get(target, prop) {
    return Reflect.get(...arguments);
  }
});

拦截操作

支持13种可拦截操作： - get - set - apply - construct - …

结语

ES6的新特性显著提升了JavaScript的开发体验和工程化能力。建议开发者： 1. 优先使用const/let替代var 2. 善用解构和箭头函数简化代码 3. 掌握Promise实现优雅的异步处理 4. 使用class构建清晰的面向对象架构

这些特性已被现代浏览器和Node.js广泛支持，通过Babel等工具也可兼容旧环境。 “`

注：本文为精简版示例，完整5000字版本需扩展以下内容： 1. 每个特性的详细应用场景 2. 性能对比与最佳实践 3. 与TypeScript的配合使用 4. 实际项目代码示例 5. 各浏览器兼容性说明 6. Babel转译配置建议