JavaScript面试题手册

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 } 作为第三个参数传递，确保了监听器在捕获阶段执行，并且只执行一次。

在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 可以。

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中，继承是一个用来使一个类（子类）能够获取另一个类（父类）的属性和方法的机制。以下是在JavaScript中实现继承的几种方法：1. 原型链继承原型链继承是将子类的原型对象设置为父类的一个实例，从而实现继承。function Parent() { this.parentProperty = true;}Parent.prototype.getParentProperty = function() { return this.parentProperty;};function Child() { this.childProperty = false;}// 继承ParentChild.prototype = new Parent();var child = new Child();console.log(child.getParentProperty()); // true2. 构造函数继承构造函数继承通过在子类的构造函数中调用父类构造函数实现继承，并使用 .call()或 .apply()方法将子类的 this绑定到父类上。function Parent(name) { this.name = name;}function Child(name) { Parent.call(this, name);}var child = new Child('Alice');console.log(child.name); // Alice3. 组合继承（原型链 + 构造函数继承）组合继承结合了原型链继承和构造函数继承的优点，即子类的原型被设置为父类的一个实例，并且父类构造函数被用来增强子类实例。function Parent(name) { this.name = name; this.colors = ['red', 'blue', 'green'];}Parent.prototype.sayName = function() { console.log(this.name);};function Child(name, age) { Parent.call(this, name); this.age = age;}Child.prototype = new Parent();Child.prototype.constructor = Child;Child.prototype.sayAge = function() { console.log(this.age);};var child1 = new Child('Alice', 10);child1.colors.push('yellow');console.log(child1.name); // Aliceconsole.log(child1.age); // 10console.log(child1.colors); // ['red', 'blue', 'green', 'yellow']4. 原型式继承原型式继承是基于已有的对象创建新对象，使用 Object.create方法实现。var parent = { name: "Bob", getName: function() { return this.name; }};var child = Object.create(parent);child.name = "Alice";console.log(child.getName()); // Alice5. 寄生式继承寄生式继承创建一个封装继承过程的函数，这个函数在内部以某种方式增强对象然后返回。function createAnother(original) { var clone = Object.create(original); clone.sayHi = function() { console.log('Hi'); }; return clone;}var person = { name: 'Bob', getName: function() { return this.name; }};var anotherPerson = createAnother(person);anotherPerson.sayHi(); // Hi6. 寄生组合式继承寄生组合式继承通过使用寄生式继承来继承父类的原型，并将结果指定给子类的原型。function inheritPrototype(childObj, parentObj) { var prototype = Object.create(parentObj.prototype); prototype.constructor = childObj; childObj.prototype = prototype;}function Parent(name) { this.name = name;}Parent.prototype.sayName = function() { console.log(this.name);};function Child(name, age) { Parent.call(this, name); this.age = age;}inheritPrototype(Child, Parent);Child.prototype.sayAge = function() { console.log(this.age);};var child = new Child('Alice', 10);child.sayName(); // Alicechild.sayAge(); // 10

JavaScript 中的 number 类型是基于 IEEE 754 标准的双精度64位浮点数表示。这种表示方式导致了两类主要的精度问题：有限的位数： 64位中，有1位用于符号，11位用于表示指数，剩下的52位用于表示尾数（或分数）。这限制了可以精确表示的数字的范围和精度。当数字超出这个精确范围时，就会出现舍入误差。二进制浮点数的局限性： 并非所有的十进制小数都能被二进制系统精确地表示。例如，十进制的0.1在二进制中是一个无限循环的分数，就像十进制中的1/3不能精确表示一样。在二进制浮点数中，这样的十进制数会被近似为一个有限位数的二进制数，因此会有精度损失。例子：在 JavaScript 中计算 0.1 加 0.2 时，预期结果是 0.3，但实际结果往往是 0.30000000000000004，这展示了精度损失的问题。为了避免这种精度损失，可以使用以下策略：整数运算： 将浮点数转换为整数，进行运算后再转换回去。这适用于简单的加减乘除运算。 // 例子：使用整数运算来避免精度损失 let result = (0.1 * 10 + 0.2 * 10) / 10; // 结果为0.3使用第三方库： 为了处理更复杂的数学运算和避免精度损失，可以使用如 BigNumber.js 或 decimal.js 等第三方库，这些库提供了更为精确的数值计算能力。 // 使用 BigNumber.js 示例 BigNumber.config({ DECIMAL_PLACES: 10 }) let a = new BigNumber(0.1); let b = new BigNumber(0.2); let result = a.plus(b); // '0.3'内置 BigInt 类型： 对于整数运算，ES2020 引入了 BigInt 类型，它支持任意精度的整数。使用 BigInt 可以避免大整数计算中的精度损失，但它不适用于浮点数。 // 例子：使用 BigInt 进行大整数计算 let bigInt1 = BigInt("9007199254740993"); let bigInt2 = BigInt("1"); let result = bigInt1 + bigInt2; // 9007199254740994n总而言之，为了解决 JavaScript 中的 number 类型的精度问题，开发者需要根据实际情况选取适合的方法来保证数值的精确度。对于常规的小数点精度问题，转换为整数运算通常是最简单的解决办法；对于更复杂的场景，则可能需要使用第三方库或者 BigInt 类型。

Base64是一种基于64个可打印字符来表示二进制数据的编码方法。这种编码方式设计用来确保二进制数据在编码过程中能够通过不同的媒介，特别是那些只支持ASCII文本的媒介，不会因为字符解读错误而破坏。Base64编码方式的作用包括：数据编码：将二进制数据转换成ASCII字符串，这样数据就可以在文本环境下安全传输，比如通过电子邮件或者XML文件。提升兼容性：某些系统不支持所有的二进制数据或特殊字符，Base64编码后的数据可以在这些系统中无障碍传输。打印友好：Base64编码后的字符串包含的是可打印字符，方便打印和查看。Base64编码规则非常简单，基本过程如下：将原始二进制数据的每个字节分成6位一组，如果最后一组不足6位，则用0填充。对照Base64索引表将这些6位的组合转换成相应的字符。Base64索引表包含了大小写英文字母各26个，加上10个数字和+、/两个符号，共64个字符。如果编码后的字符数不是4的倍数，则用=字符填充，以确保最终的输出字符数是4的倍数。举个例子，如果我们要编码单词"Man"为Base64：原始ASCII码是"M"=77, "a"=97, "n"=110二进制表示为：01001101 01100001 01101110划分成6位一组：010011 010110 000101 101110对照Base64索引表转换：T W F u因此，"Man"这个单词用Base64编码后是"TWFu"。

setTimeout 的缺点setTimeout 函数是 Web API 的一部分，它可以在指定的毫秒数后执行一个函数或指定的代码。然而，setTimeout 有几个缺点：不精确的时间控制:setTimeout 并不能保证在指定时间后立即执行，因为它受到 JavaScript 事件循环的影响。如果事件队列中有其他任务，setTimeout 的回调可能会延迟执行。性能问题:使用 setTimeout 进行重复的或高频的任务（例如动画）可能会导致性能问题。因为它不会考虑浏览器的绘制帧。这可能会导致动画不流畅或者页面重绘。多个定时器的管理:如果页面上有多个 setTimeout 定时器，管理和清除这些定时器可能会变得复杂。资源消耗:即使浏览器窗口或页面不在前台时，setTimeout 也会继续执行，这可能会导致不必要的 CPU 和电力消耗。setTimeout 与 requestAnimationFrame 的区别setTimeout 和 requestAnimationFrame（简称 rAF）都可以用于延迟执行代码，但它们的用途和行为有显著的区别：目的:setTimeout 用于在设定的时间后执行一次回调函数。requestAnimationFrame 主要用于动画，它告诉浏览器在下次重绘之前执行一个函数，以便动画可以平滑地按照屏幕的刷新率运行。执行时机:setTimeout 的回调执行时间不一定与浏览器的绘制帧同步。requestAnimationFrame 的回调会在浏览器绘制下一帧之前执行，这通常意味着回调以 60 次/秒的频率执行（或者与显示器的刷新率相匹配）。性能:setTimeout 可能会导致掉帧，因为它不考虑浏览器的帧率。requestAnimationFrame 会与浏览器的帧率同步，减少掉帧的情况，因此动画更平滑，性能也更优。节能:setTimeout 在后台标签页或隐藏的 iframe 中仍然会运行，可能导致不必要的资源消耗。requestAnimationFrame 在页面不可见时会自动暂停，从而节省资源。使用场景:setTimeout 适用于不需要与帧率同步的一次性或非频繁的延迟任务。requestAnimationFrame 适用于需要高性能动画的场景，例如游戏或界面动效。

事件的触发过程事件的触发过程，通常指的是在Web浏览器中，当用户与网页上的元素交互时（如点击按钮、移动鼠标等），将会触发相应的事件（如click, mousemove等）。此过程遵循一个特定的模式，称为“事件流”，它描述了从浏览器到DOM元素再回到浏览器的过程。事件流有两种模型：事件冒泡和事件捕获。事件捕获（Capturing）: 事件开始于window对象，然后向下传递到目标元素的父元素，最终到达目标元素自身。这个过程是从外向内逐层捕获事件的过程。目标阶段（Targeting）: 事件到达目标元素，执行绑定在该元素上的事件处理器。事件冒泡（Bubbling）: 在目标阶段完成后，事件又会从目标元素开始，逐层向上冒泡，直到window对象。举个例子，假设我们有一个按钮元素，它位于一个表单内，该表单又位于HTML页面的body元素内。当用户点击按钮时，如果所有这些元素都对点击事件定义了处理函数：在捕获阶段：首先window对象检查是否有onclick事件处理器，然后是body元素，接着是form元素，最后是按钮本身。目标阶段：事件到达按钮元素，触发绑定在按钮上的点击事件处理器。在冒泡阶段：事件从按钮开始向上冒泡，先到form元素，然后是body元素，最后是window对象。开发者可以通过JavaScript控制事件监听器是在捕获阶段还是冒泡阶段触发。事件代理事件代理是一种常用于减少内存使用并避免为多个子元素绑定监听器的技术。事件代理的基本原理是利用了事件冒泡的特性。而不是在每个子元素上单独设置事件监听器，我们在其父元素上设置单个监听器，以监控所有子元素上的事件。在这个监听器中，我们可以使用 event.target属性来获取实际触发事件的元素，并据此执行相应的事件处理逻辑。事件代理的主要优势在于：内存效率：不必为每个子元素创建和维护独立的事件监听器，减少了内存的占用。动态元素：对于在运行时动态添加到DOM中的元素，我们不需要再单独为它们添加监听器，因为父元素上的代理监听器已经能够处理。简化管理：当有许多子元素需要相同的事件处理逻辑时，通过在父元素上设置单一监听器，简化了事件管理。举个例子，假设我们有一个待办事项列表（<ul>元素），它下面有多个列表项（<li>元素）。如果我们想要为每个列表项添加点击事件，使用事件代理的方式如下：// 假设ul元素有id="todo-list"var todoList = document.getElementById('todo-list');// 为ul元素添加点击事件监听器todoList.addEventListener('click', function(event) { if (event.target.tagName.toLowerCase() === 'li') { // 这里可以处理点击事件 console.log('你点击了列表项：' + event.target.textContent); }});

在浏览器和Node.js中，事件循环是实现非阻塞I/O操作的核心机制，尽管它们在高层面上非常相似，但具体实现上有几个主要区别。以下是我将回顾的几点关键差异及其例子：1. 任务源和处理方式浏览器：浏览器的事件循环主要处理来自Web API的任务，这些可以是DOM事件、Ajax回调、setTimeout等。它使用了宏任务（macro tasks）和微任务（micro tasks）的概念。宏任务包括script（整体代码）、setTimeout、setInterval和I/O，而微任务主要包括Promise.then、MutationObserver。在一个事件循环中，每次只会从宏任务队列中取出一个任务执行，然后执行所有可用的微任务。Node.js：Node.js的事件循环由libuv库实现，包括了多个阶段，如timers、I/O callbacks、poll、check、close callbacks等。Node.js中处理任务更为复杂，各个阶段几乎都有自己的队列。timers阶段处理setTimeout和setInterval回调，poll阶段负责I/O事件回调，而setImmediate的回调会在check阶段执行。例子：在浏览器中，Promise.resolve().then()会在当前宏任务完成后立即执行，因为微任务总是在宏任务之后清空。在Node.js中，由于事件循环的阶段性，可能会在执行微任务时插入其他类型的任务，例如，如果在I/O操作完成后添加了一个setImmediate，邑可能在当前阶段的微任务和下一阶段的微任务之间执行。2. 定时器的精度浏览器：浏览器的定时器（如setTimeout和setInterval）的精度相对较低，早期定时器至少有4ms的延迟（根据HTML5标准规定），而现代浏览器偶尔会有更高的延迟，以帮助减少后台标签页的能耗。Node.js：Node.js定时器的精度通常更高，因为服务器端的环境对实时性和性能有更高的要求。Node.js的事件循环可以精确到毫秒。例子：在浏览器中设置 setTimeout(fn, 1)可能实际上在4ms后才执行回调，而在Node.js中，相同的设置会尽量接近1ms执行回调。3. 默认行为和扩展性浏览器：浏览器的事件循环通常是不可见和不可控制的，由浏览器内核管理。Node.js：Node.js的事件循环可以通过C++插件和核心模块进行扩展，给开发者提供了更多控制。例如，使用libuv库，开发者能够接触到底层的事件循环机制。例子：Node.js的开发者可以编写本地插件，通过直接与libuv交互来修改或增强事件循环的行为，而这在浏览器端是做不到的。4. 性能和优化浏览器：浏览器的事件循环是为了优化用户界面和用户互动设计的，因此，许多优化都是围绕用户体验和界面响应性进行的。Node.js：Node.js的事件循环是针对I/O密集型操作进行优化的，特别是网络和文件系统操作。