前端面试模拟：常见的3个JavaScript经典考题

在一次备受期待的前端开发高级岗位面试中，你紧张地走进了会议室，对面坐着的是一位经验丰富的技术面试官。窗外阳光明媚，屋内却有一丝令人紧张的静谧。

第一问：如何使用JavaScript实现事件委托？

面试官微微一笑，开门见山地抛出了第一个问题：“假设你有一个包含多个按钮的父元素，如何通过事件委托来高效地管理这些按钮的点击事件？”

实现步骤

接下来，面试官展示了一个简单的HTML结构，其中包含一个div元素作为父容器，内部有三个按钮。你的任务是在这个div元素上使用事件委托来处理所有按钮的点击事件。

你开始思考，决定通过三个步骤来完成这个任务。于是你在面试官的注视下开始编写代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation</title>
</head>
<body>
    <div id="button-container">
        <button id="btn1">Button 1</button>
        <button id="btn2">Button 2</button>
        <button id="btn3">Button 3</button>
    </div>

    <script>
        // Step 1: 选择父元素
        const buttonContainer = document.getElementById('button-container');

        // Step 2: 添加事件监听器到父元素
        buttonContainer.addEventListener('click', function(event) {
            // Step 3: 使用事件委托来判断点击的目标元素
            if (event.target.tagName === 'BUTTON') {
                alert(event.target.textContent + ' clicked!');
            }
        });
    </script>
</body>
</html>

什么是事件委托？

在编写代码的过程中，你停下来向面试官解释道，事件委托是一种非常有效的技术，特别适用于动态生成或删除子元素的场景。通过在父元素上注册一次事件监听器，所有的子元素都可以通过这个监听器来处理事件，从而避免为每个子元素重复添加监听器。

代码解释

接下来，你向面试官逐步解释了每一行代码的逻辑：

选择父元素：首先，通过getElementById选择父元素buttonContainer。这个元素包含了所有我们需要处理的按钮。
添加事件监听器：使用addEventListener方法在buttonContainer上注册一个click事件监听器。这样，当任意按钮被点击时，事件都会冒泡到buttonContainer，并触发这个监听器。
判断目标元素：在事件处理函数中，通过event.target.tagName判断实际点击的元素是否为按钮。如果是按钮，我们通过alert显示被点击按钮的文本内容。

面试官显然对你的解释感到满意，并请你运行代码展示实际效果。你自信地展示了点击任意按钮时弹出相应提示框的效果。

第二问：在JavaScript中，我能把对象作为另一个对象的键来使用吗？

在这场前端开发的面试中，你迎来了第二个挑战。这次，面试官提出了一个关于JavaScript对象的问题：“在JavaScript中，我能把一个对象作为另一个对象的键来使用吗？” 这个问题看似简单，却涉及到JavaScript底层的机制理解。如果回答不当，可能会暴露出你对JavaScript数据结构和类型转换机制的不熟悉。

问题分析

面试官首先展示了一段代码，让你预测其输出：

const person = { name: "Alice" };
const location = { city: "Wonderland" };

const data = {
    [person]: "Person Data",
    [location]: "Location Data"
};

console.log(data);

你观察代码后，认为这段代码尝试将person和location对象作为data对象的键，分别对应不同的值。但当你运行代码时，得到的结果却与预期不符：

{
  "[object Object]": "Location Data"
}

发生了什么？

在JavaScript中，当你尝试将一个对象作为另一个对象的键时，JavaScript会隐式地将这个对象转换为字符串。默认情况下，任何对象的字符串表示形式都是"[object Object]"，无论这个对象具体是什么。因此，当你将person和location对象作为键时，它们都被转换成了"[object Object]"，这导致了键的冲突。最终，location对应的值覆盖了person的值，data对象只保留了一个键值对。

如何解决这个问题？

面试官可能会问：“既然对象不能直接作为另一个对象的键，那如何才能避免这个问题？” 你可以提出一种更优的解决方案——使用Map数据结构。Map允许你直接使用对象作为键，而不会将其转换为字符串，因此可以避免键冲突的问题。

解决方案：使用Map来处理对象键

你在面试官的注视下，编写了以下代码：

const person = { name: "Alice" };
const location = { city: "Wonderland" };

const dataMap = new Map();
dataMap.set(person, "Person Data");
dataMap.set(location, "Location Data");

console.log(dataMap.get(person)); // 输出: "Person Data"
console.log(dataMap.get(location)); // 输出: "Location Data"

通过使用Map，你成功地将person和location对象作为键，分别存储并检索数据，避免了对象键冲突的问题。

此外，你还展示了如何遍历整个Map来打印所有的键值对：

dataMap.forEach((value, key) => {
    console.log(key, value);
});

输出结果

运行代码后，你会得到如下输出：

{ name: "Alice" } "Person Data"
{ city: "Wonderland" } "Location Data"

这个输出展示了Map正确地处理了对象键，使每个对象键都保留了其唯一性，并能够准确地存储和检索对应的值。

面试官：如何实现防抖功能？

在这场前端开发的面试中，你遇到了一个非常实用的场景：面试官要求你为一个搜索输入框实现防抖（Debounce）功能。这项技术对于优化性能至关重要，尤其是在用户输入时，避免过多的API调用或繁重的计算任务。

什么是防抖？

首先你向面试官解释了“防抖”的概念。防抖是一种技术，用于限制函数的频繁调用。具体来说，防抖会在函数调用时设定一个延迟时间，只有在延迟时间内没有再次触发，函数才会被执行。这对于处理用户输入特别有用，因为可以避免在用户每次输入时都触发搜索操作，而是在用户停止输入后才进行操作。

实现步骤

接下来，面试官给出了一段HTML结构，并要求你为输入框的input事件实现防抖功能。当用户停止输入300毫秒后才触发搜索操作。

你开始在面试官的注视下编写代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debounce Implementation</title>
</head>
<body>
    <div>
        <label for="searchInput">Search:</label>
        <input type="text" id="searchInput" placeholder="Type something...">
    </div>

    <script>
        // Step 1: 实现防抖函数
        function debounce(func, delay) {
            let timeoutId;
            return function(...args) {
                if (timeoutId) {
                    clearTimeout(timeoutId); // 清除之前的定时器
                }
                timeoutId = setTimeout(() => {
                    func(...args); // 延迟执行函数
                }, delay);
            };
        }

        // Step 2: 定义处理输入变化的函数
        function handleInputChange(event) {
            console.log('Input value:', event.target.value);
        }

        // Step 3: 将防抖函数应用到输入事件上
        const searchInput = document.getElementById('searchInput');
        searchInput.addEventListener('input', debounce(handleInputChange, 300));
    </script>
</body>
</html>

防抖函数的工作原理

在编写代码的过程中，你停下来向面试官解释道，防抖函数的核心在于使用setTimeout和clearTimeout来管理函数的执行时机。

设置定时器：在用户每次输入时，防抖函数都会清除之前的定时器并设置一个新的定时器。这样，只有在用户停止输入的300毫秒后，目标函数handleInputChange才会被调用。
延迟执行：如果用户继续输入，则会不断重置定时器，直到用户停止输入，延迟时间结束后才会执行目标函数。

代码解释

接下来，你向面试官逐步解释了每一行代码的逻辑：

实现防抖函数：防抖函数debounce接收两个参数：要执行的函数func和延迟时间delay。函数内部使用setTimeout和clearTimeout来控制函数的执行。
处理输入变化：handleInputChange函数负责处理输入框内容的变化，在每次输入后通过console.log输出当前输入的值。
应用防抖函数：通过addEventListener将防抖后的函数绑定到输入框的input事件上，这样就能在用户停止输入300毫秒后执行搜索操作。