ES6详解

---

一、变量声明

1. let 与 const

   • 块级作用域：替代 var 的函数作用域

     • const 声明常量（不可重新赋值，但对象属性可修改）

   if (true) {let x = 10const PI = 3.14
   }
   console.log(x) // 报错

---

二、箭头函数

1. 简写语法与 this 绑定

   // 传统函数
   function add(a, b) { return a + b }// 箭头函数
   const add = (a, b) => a + b// this 继承上下文
   document.addEventListener('click', () => {console.log(this) // 指向外层 this
   })

---

三、模板字符串

1. 多行文本与变量插值

   const name = "Alice"
   console.log(`Hello ${name},
   Today is ${new Date().toDateString()}`)

---

四、解构赋值

1. 数组与对象解构

   // 数组
   const [a, b] = [1, 2]// 对象
   const { name, age } = user
   // 重命名
   const { name: userName } = user

---

五、函数增强

1. 默认参数与剩余参数

   function greet(name = 'Guest', ...args) {console.log(`Hello ${name}`)
   }

---

六、Class 类

1. 面向对象语法糖

   class Person {constructor(name) {this.name = name}sayHi() {console.log(`Hi, I'm ${this.name}`)}static create() {return new Person('Anonymous')}
   }

---

七、模块化

1. import/export 语法

   // math.js
   export const PI = 3.14
   export function sum(a, b) { return a + b }// app.js
   import { PI, sum } from './math.js'

---

八、Promise 与异步

1. 异步编程方案

   fetch('/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error))

---

九、其他重要特性

1. 展开运算符

   const arr = [1, ...[2,3], 4]

2. Symbol 类型

   const id = Symbol('unique identifier')

3. Map/Set 集合

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

---

十、兼容与工具

• Babel 转译：将 ES6+ 代码转为 ES5

• Polyfill：补充浏览器缺失 API（如 core-js）

---

ES6 极大提升了 JavaScript 的表现力与工程化能力，是现代前端开发的基石。建议通过实际项目练习掌握这些特性。