【es6面试题知乎】为什么ES6是前端面试的必考项？
在当前的前端开发领域，es6面试题知乎平台上的讨论热度居高不下。随着Node.js的普及和现代前端框架（如React, Vue）的广泛应用，ES6（ECMAScript 2015）及其后续版本已经成为前端开发的基石。无论是初级工程师的校招面试，还是高级架构师的社招考核，对ES6新特性的深入理解都是衡量候选人技术深度的重要标尺。
许多开发者虽然日常使用ES6语法，但在面对“底层原理”、“执行上下文”、“闭包与箭头函数的区别”等深度问题时，往往难以给出令人信服的回答。本页面旨在通过系统化的梳理，结合网友关注的热点问题，为您提供一份详尽的es6面试题知乎攻略。
一、 变量声明：let、const 与 var 的本质区别
这是es6面试题知乎中被问及频率最高的基础题之一。许多开发者仅知道let和const可以块级作用域，但往往忽略了暂时性死区（TDZ）和变量提升的细节。
1. var 的缺陷
var 存在变量提升（Hoisting），允许重复声明，且作用域为函数级而非块级。这容易导致变量污染和意外覆盖。
2. let 的特性
let 同样存在变量提升，但在声明前访问会触发“暂时性死区”错误。它不允许在同一作用域内重复声明，且作用域严格限制在块级。
3. const 的常量性
const 声明的变量必须初始化，且不能重新赋值。但需要注意的是，对于对象类型，const保证的是引用地址不变，对象内部的属性是可以修改的。
示例代码对比：
// 错误示例：暂时性死区
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;
// 错误示例：重复声明
let b = 1;
let b = 2; // SyntaxError: Identifier 'b' has already been declared
// const 对象修改示例
const obj = { name: "Alice" };
obj.name = "Bob"; // 合法，修改属性
obj = {}; // 非法，重新赋值引用
二、 箭头函数：语法糖还是革命？
在es6面试题知乎的讨论中，箭头函数（Arrow Functions）因其简洁的语法和独特的this指向机制而备受关注。理解箭头函数与普通函数的区别，是掌握JavaScript闭包和面向对象编程的关键。
1. 语法简化
箭头函数省略了function关键字，支持隐式返回和参数简化。
// 普通函数
const add = function(a, b) {
return a + b;
};
// 箭头函数
const add = (a, b) => a + b; // 隐式返回
const greet = name => `Hello, ${name}`; // 单参数省略括号
2. this 指向
普通函数的this指向调用者，而箭头函数没有自己的this，它继承自外层作用域的this值。这意味着箭头函数不能用作构造函数，也不能使用call/apply/bind改变this。
const person = {
name: 'Alice',
// 普通函数
sayName: function() {
setTimeout(function() {
console.log(this.name); // undefined, this指向window
}, 100);
},
// 箭头函数
sayNameArrow: function() {
setTimeout(() => {
console.log(this.name); // 'Alice', 继承外层this
}, 100);
}
};
3. 使用限制
- ⚡ 不能作为构造函数：不能使用new关键字。
- ⚡ 没有arguments对象：需要使用rest参数（...args）代替。
- ⚡ 没有原型链：箭头函数没有prototype属性。
- ⚡ 不适合对象方法：如果方法需要动态绑定this（如DOM事件处理），应避免使用箭头函数。
三、 Promise 与 Async/Await：异步编程的演进
异步编程是前端面试的重灾区。es6面试题知乎上的高分回答往往能清晰阐述从回调地狱到Promise，再到Async/Await的演变逻辑及其底层原理。
1. Promise 的核心状态
Promise对象代表一个异步操作的最终完成或失败。它有三个状态：Pending（进行中）、Fulfilled（已成功）和Rejected（已失败）。状态一旦改变，就不会再变。
2. Async/Await 的优势
Async/Await是ES7引入的语法，基于Promise构建。它让异步代码看起来像同步代码，极大地提高了可读性。
| 特性 | Promise | Async/Await |
|---|---|---|
| 可读性 | 中等，链式调用可能嵌套 | 高，同步风格写法 |
| 错误处理 | 使用 .catch() | 使用 try/catch |
| 并行执行 | Promise.all() 方便 | 需结合 Promise.all() |
| 调试 | 堆栈跟踪可能不清晰 | 堆栈跟踪更直观 |
示例：使用 Async/Await 获取数据
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Fetch error:', error);
}
}
四、 模块化（Module）与 Class 类
ES6引入了原生的模块化系统（import/export）和类（class）语法，取代了CommonJS和AMD/CMD等第三方方案。这是构建大型前端应用的基础。
使用 export 关键字导出变量、函数或类。支持默认导出（default）和命名导出（named export）。
使用 import 关键字导入模块。默认导入无需大括号，命名导入需使用大括号。
Class是ES6引入的类定义语法糖，基于原型链实现。支持构造函数、实例方法、静态方法和getter/setter。
类继承示例：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
五、 其他高频ES6+新特性
除了核心语法，es6面试题知乎还经常考察一些实用工具类的新特性，如解构赋值、扩展运算符、模板字符串等。
- 解构赋值（Destructuring）：允许从数组或对象中提取数据并赋值给变量，简化代码。
- 扩展运算符（Spread Operator ...）：用于数组和对象的拷贝、合并，以及函数调用时的参数展开。
- 模板字符串（Template Literals）：使用反引号定义，支持多行字符串和嵌入表达式 ${}。
- Symbol：ES6引入的新原始类型，表示独一无二的值，常用于防止对象属性名冲突。
- Map 和 Set：新的数据结构，Map用于键值对，Set用于唯一值集合，比对象和普通数组更高效。
六、 网友还关心：es6面试题知乎高频问答
以下问题来自es6面试题知乎社区的高频搜索和讨论，涵盖了开发者在实际面试中最容易踩坑的点。
Q: let/const 真的消除了变量提升吗？
A: 并没有。let和const也存在变量提升，但它们在声明前处于“暂时性死区”（TDZ），访问会报错。而var提升后初始化为undefined。
Q: 为什么箭头函数不能做构造函数？
A: 因为箭头函数没有自己的this，也没有prototype属性，而new操作符需要构造一个带有prototype的对象实例。
Q: Promise.all 和 Promise.race 的区别？
A: Promise.all 等待所有Promise完成，任一失败则立即失败；Promise.race 只要有一个Promise完成或失败就返回结果。
Q: 什么是尾调用优化？
A: 尾调用指函数作为另一个函数的最后一步操作。如果编译器支持，可以复用调用栈帧，防止栈溢出。ES6标准建议支持尾调用优化。