前端面试题手册

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 支持。

在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 类型。

在JavaScript中改变 this指向的常见方式主要有以下几种：使用函数的 .bind()方法.bind()方法会创建一个新的函数，你可以传入一个对象来指定原函数中的 this。新函数的 this将被永久绑定到 .bind()的第一个参数上。 function greeting() { return `Hello, I'm ${this.name}`; } const person = { name: 'Alice' }; const boundGreeting = greeting.bind(person); console.log(boundGreeting()); // "Hello, I'm Alice"使用函数的 .call()和 .apply()方法.call()和 .apply()方法都是在特定的 this上调用函数，即可以直接指定 this的值。两者的区别在于如何传递函数的参数：.call()方法接受参数列表，而 .apply()方法接受一个包含多个参数的数组。 function introduction(name, profession) { console.log(`My name is ${name} and I am a ${profession}.`); } introduction.call(person, 'Alice', 'Engineer'); // "My name is Alice and I am a Engineer." introduction.apply(person, ['Alice', 'Engineer']); // "My name is Alice and I am a Engineer."箭头函数箭头函数不会创建自己的 this上下文，因此它的 this值继承自上一层作用域链。这是编写回调函数或闭包时常见的使用场景。 function Team(name) { this.name = name; this.members = []; } Team.prototype.addMember = function(name) { this.members.push(name); setTimeout(() => { console.log(`${name} has been added to the ${this.name} team.`); }, 1000); }; const team = new Team('Super Squad'); team.addMember('Hero'); // "Hero has been added to the Super Squad team." after 1 second在这个例子中，setTimeout中的箭头函数继承了 addMember方法的 this上下文。在回调函数中使用局部变量保存 this在 ES6 之前，由于函数的 this值在运行时确定，一个常见的模式是在闭包中用变量（通常是 self或 that）保存对外层 this的引用。 function Team(name) { this.name = name; this.members = []; var that = this; this.addMember = function(name) { that.members.push(name); setTimeout(function() { console.log(name + ' has been added to ' + that.name + ' team.'); }, 1000); }; } var team = new Team('Super Squad'); team.addMember('Hero'); // "Hero has been added to Super Squad team." after 1 second使用库或框架提供的功能一些JavaScript库和框架提供了自己的方法来绑定或者定义 this的上下文，比如在React组件的事件处理中，你可能会使用类似 .bind()的方法。在类中使用箭头函数定义方法在ES6类中，你可以使用箭头函数定义类的方法，这样就能确保方法内部的 this绑定到类的实例。 class Button { constructor(label) { this.label = label; } handleClick = () => { console.log(`Clicked on: ${this.label}`); } } const button = new Button('Save'); const btnElement = document.createElement('button'); btnElement.textContent = button.label; btnElement.addEventListener('click', button.handleClick); // 点击按钮时，会正确打印 "Clicked on: Save"以上就是JavaScript中改变 this指向的主要方式。

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"。