ECMAScript 6新特性有哪些

# 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转译配置建议