ES6面试题及答案：前端开发核心考点深度解析

随着JavaScript语言的不断演进，ES6（ECMAScript 2015）已经成为现代前端开发的基石。对于每一位求职者而言，掌握es6面试题及答案不仅是通过技术面试的敲门砖，更是提升代码质量、构建高性能应用的关键。本文将深入剖析面试官最常问到的ES6核心知识点，从基础语法到高级应用，为你提供一份详尽的备考指南。

许多开发者在学习ES6时，往往只停留在“会用”的层面，而忽略了其背后的原理。例如，为什么推荐使用let和const替代var？箭头函数在什么场景下不能使用？Promise是如何解决回调地狱的？通过对这些问题的深入解答，我们将帮助你建立起完整的es6面试题及答案知识体系。

变量声明与作用域：let、const与var的博弈

在es6面试题及答案中，变量声明的差异是必考题。面试官通常会要求你解释let、const和var之间的区别。这不仅仅是语法层面的差异，更涉及到JavaScript的作用域链和变量提升机制。

示例代码演示

// var 示例
console.log(a); // undefined (变量提升)
var a = 10;
// let 示例
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
// const 示例
const c = 30;
// c = 40; // TypeError: Assignment to constant variable.
                

面试题：以下代码输出什么？

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, 100);
}
// 输出：5, 5, 5, 5, 5
// 解析：var没有块级作用域，循环结束后i变为5，所有setTimeout回调共享同一个i。
for (let j = 0; j < 5; j++) {
    setTimeout(() => {
        console.log(j);
    }, 100);
}
// 输出：0, 1, 2, 3, 4
// 解析：let具有块级作用域，每次循环都会创建一个新的j绑定。
                

函数进阶：箭头函数与默认参数

箭头函数是ES6中最受欢迎的特性之一，它不仅简化了函数表达式的写法，还改变了this的指向逻辑。在es6面试题及答案中，箭头函数与普通函数的区别是高频考点。

// 普通函数
const obj1 = {
    name: 'Alice',
    sayName: function() {
        console.log(this.name);
    }
};
// 箭头函数
const obj2 = {
    name: 'Bob',
    sayName: () => {
        console.log(this.name); // undefined, this指向全局或外层作用域
    }
};
                        

function greet(name = 'Guest', greeting = 'Hello') {
    return `{name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet('Alice')); // "Hello, Alice!"
console.log(greet('Bob', 'Hi')); // "Hi, Bob!"
                        

function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15
                        

异步编程：Promise与Async/Await

异步编程是前端开发中的难点，也是es6面试题及答案中的重头戏。ES6引入了Promise，ES7引入了async/await，极大地简化了异步代码的编写。

Promise的状态

Promise对象代表一个异步操作的最终完成（或失败）及其结果值。它有三种状态：

• 〖 Pending 〗：初始状态，既不是成功，也不是失败。
• 〖 Fulfilled 〗：操作成功完成。
• 〖 Rejected 〗：操作失败。

面试题：解释Promise的工作原理

Promise是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。它通过链式调用.then()和.catch()来处理异步结果，避免了回调地狱。

Async/Await的优势

async/await是写异步代码的新方式，以前的方法有回调函数和Promise。async/await是基于Promise实现的，它不能用于普通的回调函数。但是，它让异步代码看起来像同步代码，更易读。

// Promise 链式调用
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
// Async/Await
async function fetchData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
                

面向对象：Class类与继承

ES6引入了class关键字，使得JavaScript的面向对象编程更加直观。虽然底层仍然是基于原型的继承，但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); // 调用父类构造函数
        this.breed = breed;
    }
    speak() {
        console.log(`${this.name} barks.`);
    }
}
const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // "Rex barks."
                

模块化：Import与Export

ES6模块系统（ES Modules）是JavaScript标准化的模块系统。它使得代码的组织更加清晰，依赖关系更加明确。在es6面试题及答案中，模块化的使用也是考察点之一。

导出 (Export)

// utils.js
export const PI = 3.14159;
export function add(a, b) {
    return a + b;
}
export default function multiply(a, b) {
    return a  b;
}
                

导入 (Import)

// main.js
import multiply, { PI, add } from './utils.js';
console.log(PI); // 3.14159
console.log(add(1, 2)); // 3
console.log(multiply(2, 3)); // 6
                

其他高频考点

除了上述核心内容，还有一些ES6特性在面试中也经常出现，我们需要逐一攻克。