💡 核心价值：‌

• 提升开发效率
• 增强代码可读性
• 现代化编程范式
• 功能全面升级

‌✨ 你将掌握：‌

• 10+关键特性
• 真实场景应用
• 最佳实践方案
• 常见问题解析

🔥 一、变量声明新方式

1.1 let/const 对比 var

// ES5
var count = 10
var count = 20 // 允许重复声明

// ES6
let price = 99
price = 199    // 允许重新赋值
const PI = 3.14
PI = 3.1415   // 报错：常量不可修改

‌作用域对比表：‌

🏹 二、箭头函数

2.1 基本语法

// ES5
function sum(a, b) {
  return a + b
}

// ES6
const sum = (a, b) => a + b

// 多行语句
const getUser = id => {
  const user = fetchUser(id)
  return processUser(user)
}

2.2 this绑定特性

// ES5
document.addEventListener('click', function() {
  console.log(this) // 指向document
})

// ES6
document.addEventListener('click', () => {
  console.log(this) // 继承外层this（通常是window）
})

🧩 三、解构赋值

3.1 对象解构

const user = {
  name: 'Alice',
  age: 28,
  address: {
    city: 'Beijing'
  }
}

const { 
  name: userName, 
  age, 
  address: { city } 
} = user

console.log(userName) // 'Alice'
console.log(city)     // 'Beijing'

3.2 数组解构

const rgb = [255, 200, 0]
const [red, green, blue] = rgb

// 交换变量
let a = 1, b = 2;
[a, b] = [b, a]

📦 四、模块化开发

4.1 导出模块

// math.js
export const PI = 3.14159

export function sum(...nums) {
  return nums.reduce((a, b) => a + b)
}

// 默认导出
export default class Calculator {
  // ...
}

4.2 导入模块

import Calculator, { PI, sum } from './math.js'

console.log(sum(PI, 10)) // 13.14159

⚡ 五、Promise异步处理

5.1 基本用法

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.onload = () => resolve(xhr.responseText)
    xhr.onerror = () => reject(new Error('请求失败'))
    xhr.open('GET', url)
    xhr.send()
  })
}

fetchData('/api/data')
  .then(data => console.log(data))
  .catch(error => console.error(error))

5.2 async/await

async function getData() {
  try {
    const data = await fetchData('/api/users')
    const result = await processData(data)
    return result
  } catch (error) {
    console.error('请求失败:', error)
  }
}

🎯 六、其他实用特性

6.1 模板字符串

const user = { name: 'Bob' }
const message = `
  欢迎您，${user.name}!
  当前时间：${new Date().toLocaleTimeString()}
`

6.2 展开运算符

// 数组合并
const arr1 = [1, 2]
const arr2 = [3, 4]
const merged = [...arr1, ...arr2] // [1,2,3,4]

// 对象合并
const defaults = { color: 'red', size: 'medium' }
const config = { ...defaults, ...userSettings }

‌🔗 推荐资源：‌

• Babel转换工具 ‌