Part8.前端面试指南：面试技能强化(3/5)

首轮面试：编程基础能力评估

前端一面通常会着重考察候选人的编程基础能力，包括语言特性、数据结构与算法、浏览器工作原理等。以下是一些常见的考察题目以及相关的解析：

1. JavaScript 基础

题目：解释一下闭包（Closure）是什么，并举例说明。

解析：

• 闭包是指一个函数可以“记住”并访问其词法作用域中的变量，即使这个函数是在其词法作用域之外被执行。
• 这些常用于创建私有变量。

示例：

function outerFunction() {
    let outerVariable = 'I am outside!';

    return function innerFunction() {
        console.log(outerVariable); // 访问外部函数的变量
    };
}

const innerFunc = outerFunction();
innerFunc(); // 输出: I am outside!

2. 数组与对象操作

题目：如何合并两个对象？

解析：

• 可以使用 Object.assign() 方法或 ES6 引入的展开运算符（...）来合并对象。

实现示例：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

// 使用 Object.assign
const mergedObj1 = Object.assign({}, obj1, obj2);
console.log(mergedObj1); // { a: 1, b: 3, c: 4 }

// 使用 Spread 运算符
const mergedObj2 = { ...obj1, ...obj2 };
console.log(mergedObj2); // { a: 1, b: 3, c: 4 }

3. 异步编程

题目：解释 Promise 的状态，并实现一个简单的 Promise。

解析：

• Promise 有三种状态：pending（待定）、fulfilled（已成功）、rejected（已失败）。
• Promise 代表一个异步操作的最终完成（或失败）及其结果值。

实现示例：

class MyPromise {
    constructor(executor) {
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;

        const resolve = (value) => {
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
            }
        };

        const reject = (reason) => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
            }
        };

        executor(resolve, reject);
    }

    then(onFulfilled, onRejected) {
        if (this.state === 'fulfilled') {
            onFulfilled(this.value);
        } else if (this.state === 'rejected') {
            onRejected(this.reason);
        }
    }
}

4. 算法题

题目：请实现一个函数，找到一个数组中的最大值。

解析：

• 可以使用循环遍历数组，或使用内置的 Math.max() 函数。

实现示例：

function findMax(arr) {
    return Math.max(...arr);
}

// 用法示例
const numbers = [1, 3, 5, 7, 2, 4];
console.log(findMax(numbers)); // 输出: 7

5. DOM 操作

题目：创建一个简单的事件绑定函数，使其能够绑定一个按钮的点击事件。

解析：

• 使用 addEventListener 方法来绑定事件。

实现示例：

<button id="myButton">Click Me!</button>
<script>
    document.getElementById('myButton').addEventListener('click', function() {
        alert('Button clicked!');
    });
</script>

6. 防抖与节流

题目：实现防抖（Debounce）函数。

解析：

• 防抖是指在事件触发后一定时间内不再触发，该事件才会被执行。

实现示例：

function debounce(func, delay) {
    let timer;
    return function(...args) {
        const context = this;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

// 用法示例
window.addEventListener('resize', debounce(() => {
    console.log('Resize event triggered!');
}, 300));

7. 浏览器与网络

题目：解释一下浏览器的渲染过程。

解析：

• 浏览器渲染过程大致分为以下步骤：
  1. 构建 DOM 树：解析 HTML 构建立 DOM。
  2. 构建 CSSOM 树：解析 CSS 样式构建立 CSSOM。
  3. 合成渲染树：将 DOM 和 CSSOM 合并生成渲染树。
  4. 布局：计算每个节点的几何信息。
  5. 绘制：将信息绘制到屏幕。

8. 事件冒泡与捕获

题目：解释事件冒泡和事件捕获的区别。

解析：

• 事件冒泡：事件从最具体的元素开始，逐渐向上传播到较不具体的元素。
• 事件捕获：事件从最不具体的元素开始，向下传播到最具体的元素。

实现示例：

<div id="parent">
    <button id="child">Click Me!</button>
</div>

<script>
    document.getElementById('parent').addEventListener('click', () => {
        alert('Parent clicked!');
    }, true); // true 表示捕