前端面试题手册

事件代理是一种常用于处理事件监听的技术，通过这种技术，我们可以将事件的监听器（Event Listener）绑定到一个父级元素上，而不是直接绑定到实际的目标元素上。这样，当子元素的事件冒泡到父级元素时，就可以在父级元素上处理这些事件。优点：减少内存消耗： 由于只需要在父元素上绑定单一的事件监听器，而不需要为每个子元素单独绑定，减少了内存使用，提高了性能。动态内容的事件处理： 对于动态添加到页面的元素，比如通过Ajax加载的内容，无需重新绑定事件监听器，事件代理可以自动处理这些新元素的事件。简化事件管理： 当有大量元素需要相同的事件处理时，事件代理可以大大简化事件管理工作。缺点：事件冒泡依赖： 事件代理依赖于事件冒泡机制，如果事件不冒泡或者被中间某个节点的事件处理函数停止冒泡，则事件代理将不会生效。可能的性能影响： 如果父元素中有非常多的子元素或者事件处理逻辑较为复杂时，每次事件冒泡到父元素都需要进行事件对象的属性检查，可能会对性能造成影响。限制了某些事件的使用： 并不是所有的事件都能冒泡，例如focus、blur和load等，因此并不能利用事件代理处理这些事件。主要解决问题：事件代理主要解决了以下几个问题：内存和性能问题： 如上所述，减少了绑定在多个子元素上的事件监听器数量，从而节省了内存消耗，提高了性能。动态元素事件监听问题： 对于后来动态添加到页面的元素，不需要单独为它们添加事件监听器，因为它们会自然地冒泡到已经设置了事件代理的父元素。事件管理复杂性问题： 简化了事件处理逻辑，特别是当你有大量需要相似事件处理的元素时，只需要维护一个公共的事件监听器即可。例子：假设我们有一个任务列表，每个任务项都有一个"删除"按钮，可以删除对应的任务项。如果没有使用事件代理，我们可能需要为每个"删除"按钮绑定一个点击事件监听器。但是，如果使用事件代理，我们可以在任务列表的容器元素上绑定一个点击事件监听器，然后检查点击事件的目标是否是"删除"按钮，如果是，则执行删除操作。这样就无论任务列表如何变化，我们都只需要一个事件监听器。// HTML 结构<ul id="taskList"> <li>任务 1 <button class="delete-btn">删除</button></li> <li>任务 2 <button class="delete-btn">删除</button></li> // 更多任务项...</ul>// JavaScript 代码document.getElementById('taskList').addEventListener('click', function(event) { if (event.target.className === 'delete-btn') { event.target.parentNode.remove(); }});这个例子展示了如何实现一个简单的事件代理来处理动态内容。

addEventListener 方法是 JavaScript 中常用来为元素添加事件监听器的方法。这个方法可以让开发者指定当某个事件在目标元素上触发时，应该调用的回调函数。addEventListener 方法通常接收三个参数：type: 字符串，表示监听事件类型的名称，比如 click, mouseover 等。listener: 函数，事件触发时浏览器调用的函数。options or useCapture: （可选）布尔值或者是一个对象。这是第三个参数，它指定了事件处理的更多选项。当第三个参数是布尔值时，它指的是 useCapture。如果 useCapture 设置为 true，则表示在捕获阶段触发事件处理函数；如果设置为 false 或者省略，则表示在冒泡阶段触发事件处理函数。在 DOM 事件处理中，事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。默认情况下，事件监听器只在冒泡阶段被调用。如果第三个参数是一个对象，它可以包含多个属性，如下所示：capture: 布尔值，和直接提供 useCapture 作为布尔值的效果一样。once: 布尔值，如果为 true，监听器会在添加之后第一次触发时自动移除。passive: 布尔值，如果为 true，表明监听器永远不会调用 preventDefault()。如果监听器确实调用了这个函数，客户端将会忽略它并且可能给出一个警告。例如，如果我们想要在用户第一次点击按钮时做出反应，并且希望在捕获阶段而不是冒泡阶段处理事件，我们可以这样写代码：const button = document.querySelector('#myButton');button.addEventListener('click', (event) => { // 处理点击事件 console.log('Button clicked!');}, { capture: true, once: true });在这个例子中，{ capture: true, once: true } 作为第三个参数传递，确保了监听器在捕获阶段执行，并且只执行一次。

CORS，即跨源资源共享（Cross-Origin Resource Sharing），是一种允许在一个源（origin）上的网页获取访问另一个源上资源的机制。它是一种安全特性，可以让网站的前端代码安全地进行跨域请求，而不会暴露用户数据。CORS 请求分为两类：简单请求（simple requests）和复杂请求（preflighted requests）。它们之间的区别主要体现在请求的方式和所发送内容上。简单请求简单请求满足以下条件：请求方法是以下三种方法之一：GETPOSTHEADHTTP的头信息不超出以下几种字段：AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type（只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）简单请求的例子：GET /some/resource HTTP/1.1Host: api.example.comAccept-Language: en-USContent-Type: text/plain当浏览器判断一个请求为简单请求时，它会直接发起跨域请求，并在请求中携带Origin头部信息。服务端会检查这个Origin，决定是否允许这个跨域请求。复杂请求复杂请求通常指不满足以上简单请求条件的所有其他请求，例如：使用了 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH 等 HTTP 方法。发送的 HTTP 头部信息超出了简单请求允许的范围。Content-Type 的值不属于简单请求中允许的三个值。在发送复杂请求之前，浏览器会先发起一个 OPTIONS 请求，这被称为“预检”请求（preflight request），用来确认真正的请求是否安全可被服务器接受。预检请求的例子：OPTIONS /data/resource HTTP/1.1Host: api.example.comOrigin: http://example.comAccess-Control-Request-Method: POSTAccess-Control-Request-Headers: X-Custom-Header如果服务器允许这样的请求，它会在响应的 HTTP 头部中包含Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等字段，明确告知客户端是否可以进行实际的请求。之后，浏览器才会发送实际的请求。总结简单来说，简单请求是对CORS更宽容的请求，直接发起并通过Origin头部判断是否允许跨域；而复杂请求需要先进行一次额外的预检通信以确认安全性，只有在预检通过后，实际的请求才会发起。这个机制确保了敏感操作（如对数据的修改）在跨域时能够得到恰当的安全检查。

在JavaScript中，map和for循环是遍历数组的两种常见方法，但在处理异步函数时，它们的行为有显著差异。使用map调用异步函数map函数是Array原型上的一个方法，它对数组中的每个元素执行一个由你提供的函数，并返回一个新的数组，该数组是由原数组中每个元素调用处理函数得到的结果组成的。当你在map内使用异步函数时，每次迭代都会立即发起异步操作，但不会等待上一个完成，这意味着所有异步操作几乎是同时发起的。map不会等待异步函数的解决，它会立即继续到下一次迭代。例如，如果你使用map遍历数组，并在每个元素上调用一个返回Promise的异步函数：let promises = [1, 2, 3].map(async (num) => { let result = await someAsyncFunction(num); return result;});这里，promises数组将包含三个Promise对象，这些Promise对象是someAsyncFunction返回的，并且他们将并行执行。使用for循环调用异步函数使用传统的for循环，你可以更容易地控制异步函数的执行顺序。如果在循环内部使用await，你可以确保每次迭代都等待上一个异步操作完成再继续。例如，使用for循环顺序执行异步操作：let results = [];for (let num of [1, 2, 3]) { let result = await someAsyncFunction(num); results.push(result);}在这段代码中，someAsyncFunction会为数组中的每个元素顺序执行。第二次迭代会等待第一次迭代中的异步操作完成，以此类推。这意味着异步操作是串行执行的。总结使用map调用异步函数时，所有异步操作几乎同时开始，它们是并行的，最后你得到一个Promise对象的数组。使用for循环（或其他类型的循环，如for...of、for...in、while等）并结合await调用异步函数时，操作将按顺序一个接一个地执行，即串行执行。因此，选择哪种方法取决于你是否需要并行或串行执行异步操作。如果操作之间没有依赖，并且你想最大限度地提高效率，可以使用map。如果操作必须按照一定的顺序执行，或者一个操作的输出是另一个操作的输入，那么使用for循环会更合适。

for...of 循环是在ES6中引入的，它专门用于遍历可迭代对象的元素，如数组、字符串、Map、Set 等这些实现了迭代器接口的数据结构。所谓的可迭代对象就是那些具有 Symbol.iterator 属性的对象。例如，数组是可迭代对象，可以使用 for...of 遍历其元素：let array = [10, 20, 30];for (let value of array) { console.log(value);}// 输出：// 10// 20// 30然而，普通对象不是可迭代的，没有实现 Symbol.iterator 方法，因此不能直接使用 for...of 遍历它的属性。尝试使用 for...of 直接遍历一个对象会导致一个错误：let obj = {a: 1, b: 2, c: 3};for (let value of obj) { console.log(value);}// TypeError: obj is not iterable另一方面，for...in 循环是用来遍历一个对象的所有可枚举属性的键，包括继承的可枚举属性。它不仅可以遍历普通对象的属性，还可以遍历数组（虽然通常不推荐这样做，因为它会返回数组索引，而且可能会遍历到原型链上的属性）。使用 for...in 遍历对象的例子：let obj = {a: 1, b: 2, c: 3};for (let key in obj) { console.log(key + ': ' + obj[key]);}// 输出：// a: 1// b: 2// c: 3总结一下，for...of 用于遍历可迭代对象的元素，而 for...in 用于遍历对象的所有可枚举属性的键。因此，for...of 不能直接遍历普通对象，而 for...in 可以。

事件冒泡 (Event Bubbling)事件冒泡是一种事件传播机制，在这种机制下，当一个元素上的事件被触发时，这个事件会从触发元素开始，逐级向上传播至最外层的父元素。这种传播方式允许在父元素上监听并处理来自子元素的事件。事件冒泡通常用于减少事件处理器的数量，并且简化事件管理。例子： 假设我们有一个按钮(<button>)位于一个段落(<p>)元素内，该段落又位于一个容器(<div>)元素内。如果用户点击了按钮，那么点击事件会首先在按钮元素上触发，然后依次向上冒泡至段落元素，最终到达容器元素。事件代理 (Event Delegation)事件代理是一种借助事件冒泡机制实现的事件处理模式。它通过在父元素上设置一个事件监听器来管理所有子元素的同类事件。这样可以避免在每个子元素上单独设置事件监听器，从而提高效率和性能，尤其是在动态添加或删除子元素的情况下。例子： 假如我们有一个任务列表，列表中的每一项任务都需要一个点击事件监听器。使用事件代理，我们可以在任务列表的容器元素上设置一个点击事件监听器，而不是在每个任务项上单独设置。当点击事件发生并冒泡到容器元素时，我们可以检查事件的目标元素(event.target)来确定是哪个任务项被点击，并进行相应的处理。事件捕获 (Event Capturing)事件捕获是DOM事件流的另一部分，与事件冒泡相对应。在事件捕获阶段，事件从最外层的父元素开始传递，一直向下直到触发元素。主要的区别在于事件的传播方向：事件捕获是从外到内，而事件冒泡是从内到外。例子： 再次使用上面的按钮、段落和容器元素的场景，当用户点击按钮时，在事件捕获阶段，点击事件会首先到达最外层的容器元素，然后到达段落元素，最后到达按钮元素。它们的关系事件捕获和事件冒泡是DOM事件流的两个阶段。在实际的事件处理中，浏览器首先经过捕获阶段，从最外层的父元素向下传递到目标元素，然后是目标元素上的事件处理，接着是冒泡阶段，事件从目标元素开始向上逐级传播。事件代理则是利用了事件冒泡原理来简化事件管理。通过在父元素上监听事件，可以管理所有子元素的事件，而无需在每个子元素上单独绑定事件监听器，使得代码更加简洁高效。在使用 addEventListener 方法时，我们可以指定第三个参数为 true 或 false 来明确选择是在捕获阶段还是冒泡阶段处理事件，默认值为 false，即在冒泡阶段处理。总之，事件捕获和事件冒泡共同构成了事件传播的完整过程，而事件代理则是一种利用这种传播机制的高效事件处理策略。

闭包（closure）的核心是能够捕获并包含自己创建时所在作用域中的变量，并在这个函数在其原始作用域之外被调用时仍然可以访问那些变量。闭包是函数和声明该函数时的词法环境的组合。在编程中，闭包常常用于以下几种场合：数据封装：闭包可以用来模拟私有变量，因为它的内部状态对外部代码是不可见的，只能通过闭包暴露的方法来访问。示例：function createCounter() { let count = 0; // `count` 是一个闭包中的私有变量 return { increment: function() { count++; }, getValue: function() { return count; } };}const counter = createCounter();counter.increment();console.log(counter.getValue()); // 输出 1在这个例子中，createCounter 返回了一个拥有两个方法的对象，而这两个方法都有权访问私有变量 count。count 变量是无法从外部直接访问的，只能通过闭包提供的 increment 和 getValue 方法来操作。回调函数和异步执行：闭包常用于回调函数，尤其是在异步操作中，它能够记住并访问其创建时的环境，即使在主执行流程已经完成之后。示例：function asyncGreeting(name) { setTimeout(function() { // 这个匿名函数就是一个闭包 console.log('Hello, ' + name); }, 1000);}asyncGreeting('World'); // 1秒后输出 "Hello, World"setTimeout 的回调是一个闭包，它记住了变量 name，即使 asyncGreeting 函数已经执行完毕。模块化代码：通过闭包，可以创建模块，这些模块拥有公开的方法和私有的数据，这是一种设计模式（即模块模式），可用于组织和管理 JavaScript 代码。在这些场景中，闭包的核心特性是记忆作用域中的变量，这使得函数在定义它的那个作用域之外执行时依然可以访问那些变量。这对于JavaScript等语言来说是一个极为强大的特性，因为它可以创造出在其他编程范式中难以实现的某些功能。

setTimeout 和 setInterval 都是 JavaScript 中用于控制时间和执行定时任务的函数，但它们的工作方式和用途有所不同。setTimeoutsetTimeout 函数用于设置一个定时器，该定时器将在指定的毫秒数后执行一次您指定的函数或代码块。一旦定时器完成任务（即执行了指定的函数或代码），它就会停止。用法示例:function sayHello() { console.log('Hello!');}// 调用 sayHello 函数，但是会在 2000 毫秒（2 秒）后执行setTimeout(sayHello, 2000);在这个例子中，sayHello 函数会在约 2 秒后执行一次，然后 setTimeout 就完成了它的任务。setInterval与 setTimeout 不同，setInterval 函数用于设置一个定时器，该定时器会无限次地以指定的时间间隔重复执行您指定的函数或代码块，除非您明确停止它。用法示例:function sayHelloRepeatedly() { console.log('Hello again!');}// 每隔 2000 毫秒（2 秒），调用一次 sayHelloRepeatedly 函数const intervalId = setInterval(sayHelloRepeatedly, 2000);// 当你想停止定时器时，可以调用 clearInterval// clearInterval(intervalId);在这个例子中，sayHelloRepeatedly 函数会每隔 2 秒执行一次，这将一直持续下去，直到调用 clearInterval(intervalId) 才会停止这个定时器。总结差异setTimeout 是执行一次延迟操作的函数。setInterval 是重复执行操作的函数，直到清除定时器。setTimeout 定时器执行完毕后自动清除。setInterval 定时器会持续运行，直到你调用 clearInterval。实际应用中，选择哪一个函数取决于你的具体需求：如果你需要延迟执行一次操作，使用 setTimeout；如果你需要以固定的时间间隔重复执行操作，使用 setInterval。

JavaScript 中判断一个对象是否为空对象，通常可以通过检查对象是否有自身的属性。最常见的方法是使用 Object.keys() 函数，它会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组。如果这个数组的长度为0，那么可以认定该对象为一个空对象。以下是一个函数示例，它可以用来判断一个对象是否为空：function isEmptyObject(obj) { return Object.keys(obj).length === 0 && obj.constructor === Object;}这个函数首先检查 Object.keys(obj) 返回的数组长度是否为0，确保没有枚举的自身属性。然后，通过 obj.constructor === Object 确保 obj 是由 Object 构造函数创建的，避免错误地将具有自身属性但不是普通对象的实例（比如 new Date()）判断为“空对象”。我们可以用以下例子来测试这个函数：// 空对象let obj1 = {};// 非空对象let obj2 = { prop: 'value' };// 空对象的另一种形式（通过 Object.create(null) 创建）let obj3 = Object.create(null);console.log(isEmptyObject(obj1)); // trueconsole.log(isEmptyObject(obj2)); // falseconsole.log(isEmptyObject(obj3)); // true, 但请注意这种对象没有原型链在这些例子中，obj1 是一个标准的空对象，所以 isEmptyObject(obj1) 返回 true。obj2 有一个自身属性 prop，所以 isEmptyObject(obj2) 返回 false。obj3 虽然是一个空对象，但它通过 Object.create(null) 创建，这意味着它没有原型链，而 isEmptyObject(obj3) 也返回 true。需要注意的是，这个函数不能检测那些没有可枚举属性但实际上不是空的对象，比如：let obj4 = Object.create(Object.prototype, { prop: { value: 'value', enumerable: false }});console.log(isEmptyObject(obj4)); // true，但实际上 obj4 有一个不可枚举的属性 prop在这种情况下，prop 属性是不可枚举的，因此 Object.keys(obj4) 不会包含 prop，导致 isEmptyObject(obj4) 错误地返回 true。如果需要考虑不可枚举的属性，可以使用 Object.getOwnPropertyNames() 替换 Object.keys()，它会返回所有自身属性的数组，无论它们是否可枚举。

Ajax (Asynchronous JavaScript and XML)、Axios 和 Fetch API 是前端开发中用于与服务器进行异步通信的不同技术。下面，我将详细介绍它们之间的主要区别：Ajax概念: Ajax 并不是一种独立的技术，而是一系列技术的集合，包括 HTML、CSS、JavaScript、DOM、XMLHttpRequest 等。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。XMLHttpRequest 对象: Ajax 通常依赖于 XMLHttpRequest 对象来进行通信。这是一个老旧的 API，可以用来执行异步请求。例子: var xhr = new XMLHttpRequest();xhr.open('GET', 'server.php', true);xhr.send();xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); }};兼容性: XMLHttpRequest 在老版本的浏览器中有很好的兼容性。缺点: 编写代码较繁琐，不支持 Promise，错误处理和编写异步代码可能比较复杂。Axios概念: Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了一个易于使用的 API，可以在客户端执行异步请求。特点: 支持 Promise，可以很容易地使用 .then() 和 .catch() 方法进行链式调用。Axios 还提供了请求取消、HTTP 自动转换 JSON 数据、客户端支持防御 XSRF 等功能。例子: axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });兼容性: Axios 可以用在浏览器和 node.js 中，并且基本上支持所有现代浏览器。缺点: 相对于 Fetch API，Axios 是一个额外的库，需要单独安装和配置。Fetch API概念: Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的部分，例如发起请求。它提供了一个全局 fetch() 方法，具有比 XMLHttpRequest 更加简洁和强大的功能。特点: Fetch API 基于 Promise 设计，使得异步请求代码更加简洁。它不是以形式参数的形式，而是以配置对象的形式接收请求信息，使得请求更加灵活。例子: fetch('https://api.example.com/data', { method: 'GET', headers: { 'Content-Type': 'application/json' }}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));兼容性: Fetch API 在现代浏览器中得到了良好的支持，但在一些老旧浏览器中可能不可用。缺点: Fetch API 默认不发送或接收 cookies，如果站点依赖于用户会话，则需要额外的配置。此外，即使请求失败，fetch 也不会拒绝 Promise，只有在网络故障时才会被拒绝。总结来说，Ajax、Axios 和 Fetch API 提供了实现前端 HTTP 通信的不同方法。Ajax 是最传统的方式，依赖于 XMLHttpRequest。Axios 是一个现代的库，提供了丰富的 API 和易于使用的 Promise 支持。