ES6 入门详解：必会语法

ES6 是 JavaScript 的一个重大更新版本（2015 年发布）。  
它给 JS 带来了很多新特性，让代码更简洁、更强大。 

一、let 与 const

let：块级作用域变量

for (let i = 0; i < 3; i++) {
  console.log(i)
}
// console.log(i) // 报错，let 作用域只在块内

const：常量（不可重新赋值）

const PI = 3.14
// PI = 3.15 // 报错

📌 解释：用 let 替代 var，避免作用域混乱。const 用于不会被重新赋值的变量。

二、模板字符串

用反引号 ` 包裹，支持 变量插值 和 多行字符串。

const name = 'Alice'
const age = 18

console.log(`我叫 ${name}，今年 ${age} 岁。`)

三、解构赋值

1. 数组解构

const arr = [1, 2, 3]
const [a, b] = arr
console.log(a, b) // 1 2

2. 对象解构

const user = { name: 'Tom', age: 20 }
const { name, age } = user
console.log(name, age) // Tom 20

📌 解释：解构赋值能快速取值，避免 user.name 这样重复写。

四、函数改进

1. 默认参数

function greet(name = '游客') {
  console.log(`你好，${name}`)
}
greet() // 你好，游客

2. 箭头函数

const add = (x, y) => x + y
console.log(add(2, 3)) // 5

📌 解释：箭头函数更简洁，并且 不会改变 this 指向，常用于回调函数。

五、扩展运算符（...）

1. 展开数组

const arr1 = [1, 2]
const arr2 = [...arr1, 3, 4]
console.log(arr2) // [1,2,3,4]

2. 合并对象

const user = { name: 'Tom' }
const info = { age: 20 }
const person = { ...user, ...info }
console.log(person) // {name:'Tom', age:20}

六、Promise（异步编程）

解决回调地狱的问题。

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

delay(1000).then(() => console.log('1秒后输出'))

七、Class 类

语法糖，便于面向对象编程。

class Person {
  constructor(name) {
    this.name = name
  }
  sayHi() {
    console.log(`Hi, 我是 ${this.name}`)
  }
}

const p = new Person('Alice')
p.sayHi()

八、模块化 import / export

math.js

export const add = (x, y) => x + y
export const sub = (x, y) => x - y

main.js

import { add, sub } from './math.js'
console.log(add(1, 2)) // 3

📌 解释：ES6 模块化比以前的 require() 更清晰，前端打包工具（Vite/Webpack）都支持。

九、其他常用语法

1. for...of（遍历可迭代对象）

for (const item of [1, 2, 3]) {
  console.log(item)
}

2. Set / Map（新数据结构）

const set = new Set([1, 2, 2, 3])
console.log(set) // {1,2,3}

const map = new Map()
map.set('a', 1)
console.log(map.get('a')) // 1

3. async / await（更优雅的异步）

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function run() {
  await wait(1000)
  console.log('1秒后执行')
}
run()

小结

• 用 let / const 替代 var，作用域更清晰

• 模板字符串、解构赋值、箭头函数让代码更简洁

• 扩展运算符、模块化提升了工程化能力

• Promise / async / await 改善异步写法

• Class / Set / Map 带来了更现代的编程方式