前端八股JS---ES6新增内容

目录

• 一、分类总览
• 二、详细解析
• [1. 变量声明：let / const](#1. 变量声明：let / const)
• [2. 解构赋值](#2. 解构赋值)
• [3. 箭头函数](#3. 箭头函数)
• [4. 函数参数默认值 & rest 参数](#4. 函数参数默认值 & rest 参数)
• [5. 扩展运算符 ...](#5. 扩展运算符 ...)
• [6. 模板字符串](#6. 模板字符串)
• [7. 数组新增方法](#7. 数组新增方法)
• [8. 字符串新增方法](#8. 字符串新增方法)
• [9. Set 与 Map](#9. Set 与 Map)
• [10. WeakSet / WeakMap](#10. WeakSet / WeakMap)
• [11. Symbol](#11. Symbol)
• [12. class 类与继承](#12. class 类与继承)
• [13. 模块化](#13. 模块化)
• [14. Promise](#14. Promise)
• [15. for...of 循环](#15. for...of 循环)
• [16. Generator 函数](#16. Generator 函数)
• [17. Proxy 与 Reflect](#17. Proxy 与 Reflect)
• [18. 其他小特性](#18. 其他小特性)
• 三、面试口述完整版
• [四、补充：arguments 和 Generator](#四、补充：arguments 和 Generator)
• arguments
• Generator

---

一、分类总览

分类	新增内容	数量
变量声明	let、const	2
解构与扩展	解构赋值、扩展运算符、rest参数	3
函数增强	箭头函数、参数默认值、rest参数	3
字符串	模板字符串、新增方法	2
数组	新增方法	6
对象	简写、属性名表达式	2
数据结构	Set、Map、WeakSet、WeakMap、Symbol	5
异步编程	Promise、Generator、async/await	3
模块化	import、export	2
面向对象	class、extends、super	3
代理反射	Proxy、Reflect	2
循环	for...of	1
其他	指数运算符、尾逗号	2

---

二、详细解析

1. 变量声明：let / const

特性	let	const
块级作用域	✅	✅
变量提升	❌（有TDZ）	❌（有TDZ）
重复声明	❌	❌
必须赋值	❌	✅
修改值	✅	❌（基本类型不可改，引用类型可改属性）

// let
let a = 1
a = 2  // ✅

// const
const b = 1
b = 2  // ❌ 报错

const obj = { name: '张三' }
obj.name = '李四'  // ✅ 可以修改属性

2. 解构赋值

// 数组解构
const [a, b] = [1, 2]  // a=1, b=2

// 对象解构
const { name, age } = { name: '张三', age: 18 }

// 默认值
const { name, age = 18 } = user

// 函数参数解构
function fn({ name, age }) { }

// 交换变量
[a, b] = [b, a]

3. 箭头函数

const fn = (a, b) => a + b

// 特点
// 1. 没有自己的 this，继承外层
// 2. 没有 arguments
// 3. 不能 new
// 4. 不能用作 Generator

4. 函数参数默认值 & rest 参数

// 参数默认值
function fn(a = 1, b = 2) { }

// rest 参数（真数组）
function fn(...args) {
  args.forEach(item => console.log(item))
}

// 对比 arguments（类数组）
function fn() {
  console.log(arguments)  // 类数组，没有 forEach
}

5. 扩展运算符 ...

// 数组展开
const arr2 = [...arr1]

// 对象浅拷贝
const newObj = { ...obj }

// 函数传参
Math.max(...[1, 2, 3])

// 合并数组/对象
const combined = [...arr1, ...arr2]
const merged = { ...obj1, ...obj2 }

6. 模板字符串

const str = `姓名：${name}，年龄：${age}`
// 支持换行
const html = `
  <div>
    <span>${name}</span>
  </div>
`

7. 数组新增方法

方法	作用
Array.from()	类数组 → 真数组
Array.of()	创建数组
find()	找第一个满足条件的元素
findIndex()	找下标
includes()	是否包含
flat() / flatMap()	数组扁平化

Array.from(arguments)  // 类数组转数组
[1, [2, [3]]].flat(Infinity)  // [1, 2, 3]

8. 字符串新增方法

方法	作用
includes()	是否包含子串
startsWith()	是否以某字符开头
endsWith()	是否以某字符结尾
repeat()	重复字符串

9. Set 与 Map

// Set：无重复值
const set = new Set([1, 2, 2, 3])  // {1, 2, 3}
// 数组去重
const unique = [...new Set(arr)]

// Map：键可以是任意类型
const map = new Map()
map.set('key', 'value')
map.set({}, '对象键')

10. WeakSet / WeakMap

特性	WeakSet	WeakMap
键类型	对象	对象
弱引用	✅	✅
可遍历	❌	❌
不阻止GC	✅	✅

11. Symbol

// 独一无二的值
const s1 = Symbol('id')
const s2 = Symbol('id')
console.log(s1 === s2)  // false

// 用作对象私有属性
const _private = Symbol('private')
const obj = {
  [_private]: '外部无法直接访问'
}

12. class 类与继承

class Person {
  constructor(name) {
    this.name = name
  }
  say() {
    console.log(this.name)
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name)  // 必须调用 super
    this.grade = grade
  }
}

13. 模块化

// 导出
export const name = '张三'
export default function fn() { }

// 导入
import fn, { name } from './module.js'

14. Promise

// 三种状态：pending → fulfilled / rejected
new Promise((resolve, reject) => {
  // 异步操作
}).then(res => {
  // 成功
}).catch(err => {
  // 失败
}).finally(() => {
  // 无论成功失败都执行
})

// 静态方法
Promise.all([p1, p2, p3])   // 全部成功才成功
Promise.race([p1, p2, p3])  // 最快的一个决定结果
Promise.allSettled([p1, p2, p3])  // 等待全部完成

15. for...of 循环

// 遍历可迭代对象（数组、Set、Map、字符串）
for (let val of arr) {
  console.log(val)
}

// 对比 for...in（遍历对象属性）
for (let key in obj) {
  console.log(key)
}

16. Generator 函数

function* gen() {
  yield 1
  yield 2
  return 3
}

const g = gen()
g.next()  // { value: 1, done: false }
g.next()  // { value: 2, done: false }
g.next()  // { value: 3, done: true }

// async/await 本质就是 Generator + Promise 的语法糖

17. Proxy 与 Reflect

// Proxy：代理对象，拦截操作
const proxy = new Proxy(target, {
  get(target, key) { },
  set(target, key, value) { }
})

// Reflect：统一操作对象的 API
Reflect.get(obj, 'name')
Reflect.set(obj, 'name', '张三')

18. 其他小特性

// 指数运算符
2 ** 3  // 8

// 尾逗号
const arr = [1, 2, 3,]

// 严格模式默认开启

---

三、面试口述完整版

ES6 主要新增内容包括：

变量声明 ：let、const 块级变量，解决变量提升与全局污染；

解构与扩展：解构赋值、扩展运算符、rest 参数，简化代码；

函数增强：箭头函数改变 this 指向，参数默认值；

字符串：模板字符串，方便字符串拼接；

数据结构：新增 Set、Map、Symbol 数据类型；

面向对象：class 类与继承，让面向对象更清晰；

模块化：export/import；

异步编程：Promise 解决回调地狱，Generator 可暂停执行，async/await 是语法糖；

代理反射：Proxy 和 Reflect；

循环：for...of 遍历可迭代对象。

---

四、补充：arguments 和 Generator

arguments

// 类数组对象，函数内部获取所有实参
function sum() {
  console.log(arguments)  // 类数组，无 forEach
  return [...arguments].reduce((a, b) => a + b, 0)
}

// 箭头函数没有 arguments
const fn = () => console.log(arguments)  // 报错

// ES6 推荐用 ...rest
function sum(...args) {  // args 是真数组
  return args.reduce((a, b) => a + b, 0)
}

Generator

// 可暂停执行的函数
function* gen() {
  yield 1
  yield 2
  return 3
}

// async/await 本质就是 Generator + Promise 的语法糖
async function fn() {
  const res = await fetch('/api')
  return res
}
// 等价于
function* fn() {
  const res = yield fetch('/api')
  return res
}