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

目录一、分类总览二、详细解析1. 变量声明let / const2. 解构赋值3. 箭头函数4. 函数参数默认值 rest 参数5. 扩展运算符 ...6. 模板字符串7. 数组新增方法8. 字符串新增方法9. Set 与 Map10. WeakSet / WeakMap11. Symbol12. class 类与继承13. 模块化14. Promise15. for...of 循环16. Generator 函数17. Proxy 与 Reflect18. 其他小特性三、面试口述完整版四、补充arguments 和 GeneratorargumentsGenerator一、分类总览分类新增内容数量变量声明let、const2解构与扩展解构赋值、扩展运算符、rest参数3函数增强箭头函数、参数默认值、rest参数3字符串模板字符串、新增方法2数组新增方法6对象简写、属性名表达式2数据结构Set、Map、WeakSet、WeakMap、Symbol5异步编程Promise、Generator、async/await3模块化import、export2面向对象class、extends、super3代理反射Proxy、Reflect2循环for...of1其他指数运算符、尾逗号2二、详细解析1. 变量声明let / const特性letconst块级作用域✅✅变量提升❌有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] // a1, b2 // 对象解构 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. 不能用作 Generator4. 函数参数默认值 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特性WeakSetWeakMap键类型对象对象弱引用✅✅可遍历❌❌不阻止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.js14. 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 和 Generatorarguments// 类数组对象函数内部获取所有实参 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 }