整理关于ES6的问题，需要涵盖ES6的主要新特性以及常见的问题。
首先，列出ES6的重要特性，然后针对每个特性给出可能的题和解析。
注意：问题要具有代表性，解析要简洁清晰。
ES6 主要新特性
let 和 const：块级作用域变量声明
箭头函数：
() => {}，简化函数写法，不绑定this模板字符串：使用反引号
`和${}嵌入表达式解构赋值：从数组或对象中提取值
默认参数：函数参数默认值
Rest 参数：
...用于获取函数的多余参数Spread 操作符：
...展开数组或对象类（Class）：基于原型的面向对象的语法糖
模块化：
import和exportPromise：异步编程的解决方案
迭代器和生成器：
Iterator和GeneratorSet和Map：新的数据结构
Symbol：唯一且不可变的数据类型
Proxy 和 Reflect：元编程
新的数组方法：如
Array.from,Array.of,find,findIndex,includes等对象字面量增强：属性简写、方法简写、计算属性名
函数参数尾逗号：允许函数参数列表最后有逗号
高频及解析
1. let、const 和 var 的区别？
var：函数作用域，存在变量提升（声明提升，赋值不提升）let：块级作用域，不存在变量提升，存在暂时性死区（TDZ），不可重复声明const：块级作用域，声明时必须初始化，值不可修改（但对于对象，属性可修改）
// 示例
console.log(a); // undefined（变量提升）
var a = 10;
console.log(b); // ReferenceError（暂时性死区）
let b = 20;
2. 箭头函数和普通函数的区别？
语法：更简洁
this：箭头函数没有自己的this，继承外层作用域的this（定义时决定）不能作为构造函数：不能使用
new没有
arguments对象：需用Rest参数代替没有
prototype属性
const obj = {
name: 'Alice',
greet: function() {
setTimeout(() => {
console.log(this.name); // 'Alice'（箭头函数继承外层greet的this）
}, 100);
}
};
3. 解构赋值的使用？
// 数组解构
const [a, b] = [1, 2]; // a=1, b=2
// 对象解构
const { name, age } = { name: 'Bob', age: 30 };
// 默认值
const { color = 'red' } = {};
// 重命名
const { name: userName } = { name: 'Alice' };
4. Promise 是什么？有哪些状态？
定义：异步编程的解决方案，避免回调地狱
状态：
pending：初始状态fulfilled：操作成功完成rejected：操作失败方法：
then()：处理成功状态catch()：处理失败状态finally()：无论成功失败都执行Promise.all()：所有成功才成功Promise.race()：第一个完成的状态决定结果
// 示例
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('成功'), 1000);
});
promise
.then(res => console.log(res))
.catch(err => console.error(err));
5. Set 和 Map 是什么？
-
Set：值唯一的集合
const set = new Set([1, 2, 2, 3]);
set.size; // 3
set.has(1); // true
-
Map：键值对集合，键可以是任意类型
const map = new Map();
map.set('name', 'Alice');
map.get('name'); // 'Alice'
6. 模板字符串的优势？
支持多行字符串
支持嵌入表达式
标签模板（用于函数调用）
const name = 'Alice';
const str = `Hello, ${name}!
How are you?`; // 多行
7. 类的继承（extends）和 super 关键字？
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name); // 调用父类构造函数
}
speak() {
super.speak(); // 调用父类方法
console.log(`${this.name} barks.`);
}
}
8. async/await 是什么？（ES7，但常与ES6一起问）
基于Promise的语法糖，使异步代码像同步
async函数返回Promiseawait后跟Promise，等待其解决
async function fetchData() {
try {
const res = await fetch('url');
const data = await res.json();
return data;
} catch (error) {
console.error(error);
}
}
9. 模块化（import/export）？
- 导出：
// 命名导出
export const name = 'Alice';
export function hello() {};
// 默认导出
export default class MyClass {};
- 导入：
import MyClass, { name, hello } from './module.js';
10. 什么是 Symbol？使用场景？
- 唯一值，常用于避免属性名冲突
const sym = Symbol('key');
const obj = {
[sym]: 'value' // 作为属性名
};
11. Proxy 是什么？使用场景？
创建对象的代理，拦截基本操作（如属性查找、赋值等）
使用场景：数据绑定、验证、日志等
const target = {};
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : 37;
}
};
const p = new Proxy(target, handler);
p.a = 1;
console.log(p.a, p.b); // 1, 37
考点总结
作用域：
let/const的块级作用域函数：箭头函数的特性（尤其是
this）异步：
Promise和async/await的使用面向对象：
Class语法和继承数据结构：
Set/Map的使用场景模块化：
import/export的语法新API：数组和对象的新方法
掌握这些核心内容，即可应对大多数 ES6 相关的问题！
ES6 (ECMAScript 2015) 核心特性及高频问题解析
一、ES6 核心新特性
-
let/const：块级作用域变量声明 -
箭头函数：
() => {}，无自己的this -
模板字符串：
`Hello ${name}` -
解构赋值：
const {a, b} = obj -
默认参数：
function(a = 1) {} -
Rest/Spread：
...运算符 - 类(Class)：面向对象语法糖
-
模块化：
import/export - Promise：异步解决方案
- 新数据结构：Set、Map、Symbol
-
迭代器/生成器：
Iterator/Generator - 对象字面量增强：属性简写、计算属性名
-
新数组方法：
find()、includes()等
高频问题及解析
1. let/const vs var 区别？
{
var a = 1;
let b = 2;
const c = 3;
}
console.log(a); // 1 (函数作用域)
console.log(b); // ReferenceError (块级作用域)
console.log(c); // ReferenceError
-
var：函数作用域，变量提升 -
let：块级作用域，不可重复声明 -
const：块级作用域，声明时必须赋值，值不可改（对象属性可改）
2. 箭头函数的特性？
const obj = {
name: 'Alice',
greet: () => console.log(this.name), // this指向window
greet2: function() {
setTimeout(() => console.log(this.name), 100) // this继承外层
}
};
obj.greet(); // undefined
obj.greet2(); // 'Alice' (1秒后)
- 无自己的
this/arguments/super - 不能作为构造函数（不可
new） - 无
prototype属性
3. Promise 工作原理及方法？
const p = new Promise((resolve, reject) => {
setTimeout(() => resolve('Success'), 1000);
});
p.then(res => console.log(res))
.catch(err => console.error(err))
.finally(() => console.log('Done'));
// 组合方法
Promise.all([p1, p2]) // 全部成功
Promise.race([p1, p2]) // 第一个完成
Promise.any([p1, p2]) // 第一个成功 (ES2021)
4. 解构赋值的应用场景？
// 数组解构
const [first, , third] = [1, 2, 3];
// 对象解构
const { name, age = 18 } = user;
// 函数参数
function f({ id, type = 'text' }) {}
// 交换变量
[a, b] = [b, a];
5. Class 继承实现？
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 必须调用super
this.breed = breed;
}
speak() {
super.speak(); // 调用父类方法
console.log('Woof!');
}
}
6. Set/Map 使用场景？
// Set：值唯一性
const unique = new Set([1, 2, 2, 3]); // {1, 2, 3}
unique.has(2); // true
// Map：键值对集合（键可为任意类型）
const map = new Map();
map.set({}, 'value');
map.get(key);
7. 模块化导出/导入方式？
// 导出方式
export const name = 'ES6';
export default function() {};
export { name as myName };
// 导入方式
import myFunc, { name, myName } from './module';
import * as module from './module';
8. 生成器(Generator)工作原理？
function* idGenerator() {
let id = 0;
while(true) {
yield id++;
}
}
const gen = idGenerator();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
9. Proxy 的应用场景？
const target = {};
const handler = {
get: (obj, prop) => {
console.log(`访问属性: ${prop}`);
return prop in obj ? obj[prop] : 37;
},
set: (obj, prop, value) => {
console.log(`设置属性: ${prop}=${value}`);
obj[prop] = value;
return true; // 表示成功
}
};
const proxy = new Proxy(target, handler);
proxy.age = 18; // 日志: 设置属性: age=18
console.log(proxy.name); // 日志: 访问属性: name → 37
10. ES6 数组新增方法？
// 查找
[1, 2, 3].find(x => x > 1); // 2
[1, 2, 3].findIndex(x => x === 2); // 1
// 包含检查
['a', 'b'].includes('b'); // true
// 转换
Array.from('123'); // [1, 2, 3]
Array.of(1, 2, 3); // [1, 2, 3]
// 填充
new Array(3).fill(7); // [7, 7, 7]
核心考点总结
-
作用域管理：
let/const的块级作用域 -
函数特性：箭头函数的
this绑定规则 - 异步编程：Promise链式调用/错误处理
-
面向对象：Class继承与
super关键字 - 数据结构：Set去重/Map键值存储
- 模块化：ES Module的导入导出规则
- 元编程：Proxy拦截器应用
- 数据处理：解构赋值/Rest-Spread运算符
掌握这些核心特性，能解决90%的ES6相关问题。实际编码中推荐结合Babel使用，确保浏览器兼容性。
