前端面试题五Node 中 master 和 slave 是什么意思？在 Node.js 中，Master 和 Slav

Node 中 master 和 slave 是什么意思？

在 Node.js 中，Master 和 Slave（或 Worker）通常用于描述多进程编程模型，特别是在使用 Cluster 模块来创建多个 Node.js 子进程时。

Master（主进程）：Master 是主要的控制进程，负责管理子进程的创建、终止、通信以及负载均衡等任务。Master 进程通常会创建多个 Slave（Worker）进程，并通过进程间通信（IPC）机制与它们进行通信。
Slave（从进程，也称为 Worker）：Slave 进程是由 Master 进程创建的子进程，负责执行实际的任务。每个 Slave 进程都是独立运行的 Node.js 实例，可以处理客户端请求、执行业务逻辑等。Slave 进程通过与 Master 进程之间的通信来接收指令、发送结果和报告状态。

通过将工作任务分布到多个 Slave 进程中，可以充分利用多核 CPU 的能力，提高应用程序的性能和并发处理能力。Master 进程负责协调和管理这些 Slave 进程，确保它们正常工作并按预期运行。

需要注意的是，Master 和 Slave 这两个术语并不是 Node.js 核心概念，而是在多进程编程模型中常用的术语。在其他上下文中，也可以使用不同的术语来描述类似的角色，例如 Parent（父进程）和 Child（子进程），Manager 和 Worker 等。具体术语的使用取决于上下文和编程模型。

在script标签，defer 和 async 有什么区别？

在 <script> 标签中，defer 和 async 是用来控制脚本加载和执行的属性。它们有以下区别：

加载行为：

- defer：当浏览器遇到带有 defer 属性的脚本标签时，会立即下载脚本，但延迟执行脚本，直到文档解析完成之后再按照顺序执行。多个带有 defer 属性的脚本会按照它们在文档中出现的顺序进行执行。
- async：当浏览器遇到带有 async 属性的脚本标签时，会异步下载脚本，并在下载完成后立即执行脚本。多个带有 async 属性的脚本的加载和执行顺序是不确定的，取决于下载完成的时间。

执行时机：

- defer：脚本的执行被延迟到文档解析完成之后，但在 DOMContentLoaded 事件之前执行。这意味着在执行 defer 脚本之前，整个文档的结构已经构建完毕，因此可以安全地访问和操作文档元素。
- async：脚本在下载完成后立即执行，与文档解析的进度无关。这意味着 async 脚本的执行可能发生在文档的任何阶段，包括在文档解析之前或之后。

依赖关系：

- defer：如果存在多个带有 defer 属性的脚本标签，它们将按照它们在文档中出现的顺序进行执行。这意味着可以使用 defer 属性来确保脚本按照正确的顺序加载和执行，以满足脚本之间的依赖关系。
- async：带有 async 属性的脚本标签在加载和执行时与其他脚本无关，它们不会阻塞页面的加载和渲染，并且没有脚本之间的依赖关系。

需要注意的是，使用 defer 或 async 属性并不适用于内联脚本（即直接在 <script> 标签中编写的脚本）。这两个属性主要用于外部脚本的加载和执行控制。在选择使用 defer 还是 async 时，要根据具体的需求和脚本之间的依赖关系来确定最合适的方式。

UDP 协议有什么优点？

UDP（User Datagram Protocol）是一种无连接的传输层协议，相对于 TCP（Transmission Control Protocol），UDP 具有以下优点：

低延迟：由于 UDP 不需要建立连接和维护状态，数据包的传输速度更快，减少了传输时延。这使得 UDP 适用于实时性要求较高的应用，如实时游戏、音视频传输等。
较小的开销：相对于 TCP，UDP 头部开销较小。UDP 头部只包含源端口和目标端口等基本信息，不包含序列号、确认应答、流量控制等额外的控制字段，因此数据包的开销较小。
无拥塞控制：TCP 通过拥塞控制算法来维护网络的稳定性和公平性，会根据网络情况自动调整发送速率。而 UDP 没有拥塞控制机制，不会对发送速率进行调整，适合在网络稳定的环境下使用。
简单、轻量：UDP 的设计相对简单，实现和处理的开销较小，使得它成为一种轻量级的协议。这对于资源有限的设备和网络环境下的应用非常有利。
支持多播和广播：UDP 支持多播（Multicast）和广播（Broadcast）通信，可以向多个目标主机发送相同的数据包，使得数据的分发更加高效和灵活。

尽管 UDP 具有这些优点，但它也存在一些缺点。由于 UDP 是无连接的，它不提供数据包的可靠性和顺序性，也无法进行重传和拥塞控制。因此，在需要可靠数据传输和完整性保证的应用场景下，如文件传输、HTTP 请求等，更常使用 TCP 协议。选择使用 UDP 还是 TCP 取决于具体的应用需求和对可靠性的要求。

协商缓存如何判断命不命中？

协商缓存是一种用于确定缓存是否命中的机制，它通过比较请求头和响应头的字段来判断缓存是否有效。在协商缓存中，主要使用以下两个字段来判断缓存命中：

If-Modified-Since 和 Last-Modified：

- 客户端在发起请求时，如果之前已经有缓存，会将上一次缓存的响应头中的 Last-Modified 值发送到服务器，通过 If-Modified-Since 请求头进行传递。
- 服务器接收到请求后，会将请求头中的 If-Modified-Since 值与当前资源的 Last-Modified 值进行比较。如果两者相同，则表示资源没有发生变化，可以返回 304 Not Modified 响应，客户端可以继续使用缓存副本。
- 如果两者不同，则表示资源已经发生变化，服务器会返回新的资源内容以及新的 Last-Modified 值。

If-None-Match 和 ETag：

- ETag 是服务器为每个资源生成的唯一标识符，通常使用哈希值或其他指纹算法生成。
- 客户端在发起请求时，如果之前已经有缓存，会将上一次缓存的响应头中的 ETag 值发送到服务器，通过 If-None-Match 请求头进行传递。
- 服务器接收到请求后，会将请求头中的 If-None-Match 值与当前资源的 ETag 值进行比较。如果两者相同，则表示资源没有发生变化，可以返回 304 Not Modified 响应，客户端可以继续使用缓存副本。
- 如果两者不同，则表示资源已经发生变化，服务器会返回新的资源内容以及新的 ETag 值。

通过比较这些字段的值，服务器可以判断缓存是否命中。如果命中，服务器返回 304 Not Modified 响应，客户端可以使用缓存的副本。如果未命中，服务器会返回新的资源内容。这样可以减少无效的数据传输，提高网络效率。

需要注意的是，具体使用哪种字段和机制来进行协商缓存取决于服务器和应用程序的配置。通常，ETag 的精度更高，但计算成本也更高；而 Last-Modified 是更为简单和常用的机制。

HTTP 的103是什么意思？

HTTP 103 是一个状态码，表示 "Early Hints"（提前提示）。它是在 HTTP/1.1 规范中定义的一种信息性状态码，用于在服务器准备好发送响应主体之前，提前发送一些相关的提示信息给客户端。

当服务器处理请求时，如果它已经知道将要发送的响应头部和响应主体之间存在一些与响应相关的提示信息，可以使用 HTTP 103 状态码来提前发送这些提示信息。这样，客户端就可以在接收到完整的响应之前，根据这些提示信息做一些预处理或决策。

需要注意的是，HTTP 103 状态码并不代表请求的响应结果，而是提供了一种机制，允许服务器在准备完整的响应之前，提前向客户端发送一些相关信息。实际的响应结果会在后续使用其他状态码（如 200、404 等）进行返回。

由于 HTTP 103 是 HTTP/1.1 的规范，并不是所有的服务器和客户端都支持该状态码。在实际应用中，需要根据具体的需求和兼容性考虑来决定是否使用 HTTP 103 状态码。

如何处理跨域呢？

处理跨域请求（Cross-Origin Request）可以使用以下几种常见的方法：

CORS（跨域资源共享）：CORS 是一种通过在服务器端设置响应头来实现跨域请求的机制。服务器可以通过设置响应头中的 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等字段，来控制允许的跨域请求来源、方法和头部信息。前端发送跨域请求时，浏览器会自动进行 CORS 预检请求（OPTIONS 请求），并根据服务器的响应头来决定是否允许请求。
JSONP（JSON with Padding）：JSONP 是一种利用 <script> 标签的跨域技术。通过动态创建 <script> 标签，将跨域请求的 URL 设置为 <script> 的 src 属性，并指定一个回调函数作为查询参数，服务器返回的响应会被包裹在该回调函数中，前端页面就可以通过回调函数来获取响应数据。需要注意的是，JSONP 只支持 GET 请求。
代理服务器：可以通过在同域名下创建一个代理服务器，将跨域请求转发到目标服务器上。前端将请求发送给代理服务器，代理服务器再将请求发送到目标服务器，接收响应后再返回给前端。这样，由于前端与代理服务器在同一域名下，就避免了跨域问题。
WebSocket：WebSocket 是一种双向通信协议，它使用单一的 TCP 连接来进行通信。由于 WebSocket 协议不受同源策略的限制，可以通过 WebSocket 建立跨域的双向通信。前端通过与服务器建立 WebSocket 连接，可以直接发送和接收数据，实现跨域通信。
反向代理：可以通过在服务器端配置反向代理服务器来实现跨域请求。反向代理服务器位于前端和目标服务器之间，前端发送请求给反向代理服务器，代理服务器再将请求转发到目标服务器，并将目标服务器的响应返回给前端。这样，由于前端与代理服务器在同一域名下，就避免了跨域问题。

需要根据具体的场景和需求选择合适的跨域解决方案。使用 CORS 是最常用和推荐的方法，因为它是标准化的跨域解决方案，并提供了更精细的控制和安全性。

iframe中，外面如何获取里面的真实高度？

在外部页面中获取嵌套的 <iframe> 内容的真实高度，可以使用以下方法之一：

跨域通信：

- 如果 <iframe> 和外部页面处于不同的域名或协议下，由于同源策略的限制，直接通过 JavaScript 访问 <iframe> 的内容会受到限制。可以使用跨域通信方法，如 postMessage API，在 <iframe> 内部的页面中将内部高度信息发送给外部页面。
- 在 <iframe> 内部的页面中，使用 postMessage 方法将内部高度信息发送给外部页面。在外部页面中监听 message 事件，通过获取到的高度信息更新外部页面的布局。

同源 <iframe> 内部内容访问：

- 如果 <iframe> 和外部页面在同一域名下，可以直接通过 JavaScript 访问 <iframe> 的内容，并获取其高度。
- 使用 contentWindow 属性获取 <iframe> 的 window 对象，然后通过 contentWindow.document 获取 <iframe> 内部的 document 对象。从 document 对象中获取内部内容的高度，如 document.documentElement.scrollHeight 或 document.body.scrollHeight。

以下是一个示例代码，演示了通过跨域通信的方式获取 <iframe> 内部内容的真实高度：

在 <iframe> 内部的页面中：

// 发送内部高度信息给外部页面
const height = document.documentElement.scrollHeight;
window.parent.postMessage({ height }, '*');

在外部页面中：

// 监听 message 事件，获取内部高度信息
window.addEventListener('message', event => {
  if (event.origin === 'http://iframe-origin.com') {
    const { height } = event.data;
    // 处理内部高度信息
    console.log('内部高度:', height);
  }
});

在上述示例中，通过 postMessage 方法将内部高度信息发送给外部页面，并在外部页面中监听 message 事件，获取到来自 <iframe> 的消息，并处理内部高度信息。

需要注意的是，跨域访问涉及到安全性问题，需要确保在正确的跨域通信设置下进行，遵循安全最佳实践。

浏览器内存泄漏是否可以通过开发者工具看到，如何看到？

浏览器内存泄漏通常不会直接在开发者工具中显示为明显的标记或指示，但开发者工具可以提供一些工具和功能来帮助检测和排查内存泄漏问题。下面是一些开发者工具中的功能，可以帮助发现潜在的内存泄漏问题：

Memory（内存）面板：现代浏览器的开发者工具通常都提供了 Memory 面板或类似的功能，用于监控内存使用情况。在 Memory 面板中，可以执行堆快照（Heap Snapshot）、观察内存变化等操作。可以使用堆快照来检查内存中的对象和引用关系，判断是否存在无效的引用或对象未被释放的情况。
Performance（性能）面板：Performance 面板提供了一些功能，如记录和分析页面的性能数据，包括内存使用情况。通过查看 Performance 面板中的内存使用曲线，可以观察内存的变化和趋势，从而发现是否存在异常的内存增长。
垃圾回收（Garbage Collection）日志：某些浏览器的开发者工具提供了垃圾回收日志，可以帮助了解对象的生命周期和回收过程。通过查看垃圾回收日志，可以观察对象的创建、销毁和垃圾回收的情况，从而推断是否存在内存泄漏。
内存分配状况：开发者工具中的其他面板和工具，如 Heap Profiler、Allocation Profiler 等，可以提供关于内存分配情况的信息。通过这些工具，可以检查对象的分配情况、内存使用模式等，辅助发现潜在的内存泄漏问题。

需要注意的是，内存泄漏是一种隐蔽的问题，不同的内存泄漏情况可能具有不同的特征和表现。因此，开发者工具提供的功能只是辅助工具，需要开发人员结合代码分析和排查来确定和修复内存泄漏问题。定期检查内存使用情况，观察变化和趋势，结合其他性能优化技术，可以帮助发现和解决潜在的内存泄漏问题。

0.1 + 0.2 是否等于 0.3，如何解决？

在 JavaScript 中，0.1 + 0.2 的结果并不等于 0.3，这是由于浮点数的精度问题导致的。这是由于在计算机中使用二进制表示浮点数，而 0.1 和 0.2 无法精确表示为有限长度的二进制小数。因此，进行浮点数运算时可能会出现舍入误差。

为了解决这个问题，可以采用以下方法之一：

使用整数运算：将需要进行精确计算的数值转换为整数，并进行整数运算。例如，将 0.1 和 0.2 乘以一个相同的倍数（如 10），然后进行整数加法运算。最后再将结果除以倍数，以得到正确的结果。

const result = (0.1 * 10 + 0.2 * 10) / 10; // 0.3

使用专门的库或函数：可以使用一些专门处理精确计算的库，如 Decimal.js、Big.js 等。这些库提供了高精度的数值运算方法，可以避免浮点数精度问题。
使用近似比较：如果只需要进行近似比较，而不需要精确的计算结果，可以使用近似比较的方法。例如，使用一个小的误差范围来判断两个浮点数是否接近。

const num1 = 0.1 + 0.2;
const num2 = 0.3;
const epsilon = 0.000001; // 定义一个允许的误差范围
const areEqual = Math.abs(num1 - num2) < epsilon;

需要根据具体的需求和场景来选择合适的解决方案。对于一般的数值计算，使用整数运算或近似比较通常是常见的做法。如果需要更高的精度要求，可以考虑使用专门的库或函数来处理精确计算。

JS 严格模式有什么了解？

JavaScript 严格模式（Strict Mode）是一种在 JavaScript 中引入的可选特性，用于改变 JavaScript 的解析和运行行为。通过启用严格模式，开发者可以减少一些常见的错误，使代码更加严谨和可靠。以下是严格模式的一些特点和影响：

错误报告：严格模式对一些不规范或潜在错误的代码会产生更严格的错误报告，以提前发现问题并进行修复。例如，使用未声明的变量、对只读属性进行赋值、删除不可删除的属性等情况会引发错误。
限制的全局变量隐式创建：在非严格模式下，如果没有使用 var、let 或 const 声明变量，直接给变量赋值会隐式创建一个全局变量。而在严格模式下，对未声明的变量进行赋值会引发错误。
禁止删除变量、函数和函数参数：在严格模式下，使用 delete 操作符删除变量、函数和函数参数会引发错误。
函数中的 this 值：在非严格模式下，函数中的 this 值可能是全局对象（浏览器环境下是 window 对象），在严格模式下，函数中的 this 值将保持未定义或为 null。
重复参数名检测：在严格模式下，函数定义中重复的参数名将引发错误。
禁止使用八进制字面量：在非严格模式下，JavaScript 允许使用以 0 开头的数字字面量表示八进制数值，而在严格模式下，这种表示方式会被视为错误。

要在 JavaScript 中启用严格模式，可以在脚本或函数的开头添加 'use strict';（字符串形式）或使用 ECMAScript 5 的严格模式声明：'use strict';（实际声明形式）。例如：

// 字符串形式
'use strict';

// 声明形式
function myFunction() {
  'use strict';
  // 函数体
}

严格模式在某些情况下可能会导致现有代码的行为变化，因此在启用严格模式之前，需要仔细检查和测试代码的兼容性，并确保代码在严格模式下正常运行。

js中有什么方法可以改变 this 指针？

在 JavaScript 中，有几种方法可以显式地改变函数的 this 指向：

使用 call() 方法：call() 方法调用函数时，可以指定函数内部的 this 值，并传递参数列表作为函数的参数。第一个参数是要设置的 this 值，后续参数是函数的参数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.call(null, 'Alice'); // Hello, Alice!

使用 apply() 方法：apply() 方法与 call() 方法类似，不同之处在于参数的传递方式。apply() 方法接受一个数组作为函数的参数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.apply(null, ['Bob']); // Hello, Bob!

使用 bind() 方法：bind() 方法会创建一个新的函数，并将指定的 this 值绑定到新函数。不同于 call() 和 apply()，bind() 不会立即执行函数，而是返回一个绑定了指定 this 值的新函数，后续可以再次调用。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const boundGreet = greet.bind(null, 'Charlie');
boundGreet(); // Hello, Charlie!

使用箭头函数：箭头函数在定义时绑定了外层作用域的 this 值，无法通过 call()、apply() 或 bind() 改变它。箭头函数的 this 值是在创建时确定的，并且在函数的整个生命周期内保持不变。

const obj = {
  name: 'David',
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}!`);
    }, 1000);
  }
};

obj.greet(); // Hello, David!

这些方法可以用于在函数调用时显式地设置函数内部的 this 值。根据具体的需求和场景，选择合适的方法来改变函数的 this 指针。

数组操作 map 和 forEach 有什么区别，是否可以打断循环？

map() 和 forEach() 都是 JavaScript 数组的迭代方法，它们在使用上有以下区别：

返回值：

- map() 方法会创建一个新的数组，其中包含对原始数组的每个元素应用回调函数后的结果数组。
- forEach() 方法没有返回值，仅用于遍历数组，对每个元素应用回调函数。

回调函数的参数：

- map() 方法的回调函数可以接受三个参数：当前元素的值、当前元素的索引和原始数组本身。回调函数可以使用这些参数来操作数组元素并返回新的值。
- forEach() 方法的回调函数可以接受三个参数：当前元素的值、当前元素的索引和原始数组本身。回调函数可以使用这些参数来操作数组元素。

循环中断：

- map() 方法会完整地遍历原始数组，并返回一个新的数组，无法在遍历过程中直接中断或跳出循环。
- forEach() 方法也会完整地遍历原始数组，无法在遍历过程中直接中断或跳出循环。如果需要中断循环，可以使用异常抛出来实现。

示例代码：

const numbers = [1, 2, 3, 4, 5];

const mappedNumbers = numbers.map((num) => num * 2);
console.log(mappedNumbers); // [2, 4, 6, 8, 10]

numbers.forEach((num) => {
  console.log(num);
  if (num === 3) {
    throw new Error('Loop is interrupted.');
  }
});
// 输出：
// 1
// 2
// 3
// 抛出异常 Error: Loop is interrupted.

需要注意的是，虽然可以使用异常来中断 forEach() 循环，但这不是推荐的做法。通常情况下，可以使用 for...of 循环或其他迭代方法来实现更精确的控制和中断。

js中filter 和 find 返回值有什么区别？

在 JavaScript 中，filter() 和 find() 都是数组方法，用于根据特定条件筛选数组元素，但它们的返回值有以下区别：

返回类型：

- filter() 方法返回一个新的数组，其中包含满足筛选条件的所有元素。返回的是一个数组，可能包含多个元素，甚至为空数组。
- find() 方法返回满足筛选条件的第一个元素。返回的是一个单个元素，或者如果没有找到满足条件的元素，则返回 undefined。

筛选条件：

- filter() 方法的回调函数会对数组中的每个元素进行调用，并根据回调函数的返回值（true 或 false）来确定元素是否被包含在结果数组中。如果回调函数返回 true，则该元素被保留；如果返回 false，则该元素被排除。
- find() 方法的回调函数同样会对数组中的每个元素进行调用，但它会在找到满足条件的第一个元素后立即返回该元素，并终止进一步的遍历。回调函数应返回一个布尔值来指示当前元素是否满足条件。

示例代码：

const numbers = [1, 2, 3, 4, 5];

const filteredNumbers = numbers.filter((num) => num > 3);
console.log(filteredNumbers); // [4, 5]

const foundNumber = numbers.find((num) => num > 3);
console.log(foundNumber); // 4

需要根据具体的需求选择使用 filter() 还是 find()。如果需要获取满足条件的所有元素，则使用 filter()；如果只关注满足条件的第一个元素，则使用 find()。

js中十万个数组取第1万和第6万个元素速度有什么区别吗？为什么？

在 JavaScript 中，取第 1 万和第 6 万个元素的速度通常没有明显的区别，因为数组的随机访问速度是近似常数时间的（O(1)）。这是因为 JavaScript 中的数组是使用连续的内存空间来存储元素的，通过索引访问数组元素的时间复杂度是恒定的。

当访问数组元素时，JavaScript 引擎会根据索引计算元素在内存中的位置，并直接进行访问。不论是访问第 1 个元素还是第 6 万个元素，引擎都可以通过索引计算出相应的内存位置，并立即获取元素的值。

需要注意的是，如果数组是稀疏的（即有很多未定义或空的元素），或者是关联数组（即使用字符串作为键的对象），这可能会影响访问的性能，因为在这种情况下，引擎需要更复杂的逻辑来处理索引计算。

此外，如果数组是大型数组且要频繁地进行随机访问，可能会受到内存缓存等因素的影响，对访问速度产生一定的影响。但对于只访问一次或少量次数的情况，通常不会明显影响访问速度。

总之，取第 1 万和第 6 万个元素的速度在常规情况下没有明显区别，因为数组的随机访问是近似常数时间的。

js中数组的 sort 默认是按什么排序的？使用的什么算法？

在 JavaScript 中，数组的 sort() 方法默认使用基于字符串的比较算法进行排序，并根据 Unicode 字符编码的顺序进行比较。这意味着，如果数组元素是字符串类型，它们会按照字典顺序进行排序。如果数组元素是数字类型，它们会首先被转换为字符串，然后按照字符串的比较规则进行排序。

具体来说，sort() 方法使用的排序算法可以是实现依赖的。规范并未指定具体的排序算法，因此不同的 JavaScript 引擎可能会使用不同的算法实现。常见的排序算法包括快速排序（QuickSort）和归并排序（MergeSort）。对于小型数组，通常使用快速排序，而对于大型数组，可能会使用归并排序或其他更高效的排序算法。

需要注意的是，由于默认的排序算法是基于字符串的比较，可能会导致某些情况下的排序结果不符合预期。例如，对于数字类型的数组，默认的字符串比较算法会将元素作为字符串进行排序，而不是按照数值大小排序。这时，可以通过提供自定义的比较函数来实现基于数值大小的排序。

以下是一个示例，展示了对数字数组进行排序时，使用自定义比较函数实现按数值大小排序：

const numbers = [5, 10, 2, 8, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); // [2, 3, 5, 8, 10]

在上述示例中，自定义的比较函数 (a, b) => a - b 用于按升序对数字进行排序。比较函数返回负值表示 a 应该排在 b 前面，返回正值表示 b 应该排在 a 前面，返回 0 表示两者相等，顺序保持不变。

总之，sort() 方法默认使用基于字符串的比较算法进行排序，并且具体的排序算法可能因实现而异。对于特定需求，可以使用自定义的比较函数来实现特定的排序方式。

js中generator 函数和 async 函数有什么区别？

Generator 函数和 Async 函数都是 JavaScript 中用于处理异步操作的特殊函数，但它们在语法和使用上有一些区别：

语法：

- Generator 函数使用 function* 关键字来定义，内部使用 yield 关键字来暂停函数执行，并通过 next() 方法来恢复执行和传递值。
- Async 函数使用 async 关键字来定义，内部使用 await 关键字来暂停函数执行，并等待异步操作的结果。在 Async 函数中，可以像编写同步代码一样处理异步操作，而不需要显式地使用回调函数或 Promise。

控制流：

- Generator 函数可以在每次调用 next() 方法时暂停执行，并将控制权交还给调用者。这使得 Generator 函数可以通过多次迭代来生成一系列的值。
- Async 函数通过使用 await 关键字来等待异步操作完成，从而实现暂停和恢复函数的执行。在遇到 await 表达式时，Async 函数会挂起执行，等待异步操作完成后继续执行。

返回值：

- Generator 函数返回一个迭代器（Iterator），通过调用 next() 方法来逐步获取生成的值。每次调用 next() 方法时，都会返回一个包含 value 和 done 属性的对象。
- Async 函数返回一个 Promise 对象，该 Promise 对象在异步操作完成后会被解析为函数的返回值。

错误处理：

- Generator 函数可以使用 throw() 方法在函数体内抛出异常，并在函数体外使用 try...catch 来捕获异常。
- Async 函数内部可以使用 try...catch 来捕获异步操作中的异常，并使用 catch 语句块处理错误。

示例代码：

function* generatorFunc() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generatorFunc();
console.log(generator.next().value); // 1

async function asyncFunc() {
  const result1 = await someAsyncOperation();
  const result2 = await anotherAsyncOperation();
  return result1 + result2;
}

asyncFunc().then((result) => {
  console.log(result);
});

需要根据具体的需求和场景选择使用 Generator 函数还是 Async 函数。Generator 函数适用于需要迭代生成多个值的情况，而 Async 函数适用于更直观地处理异步操作和异步代码流程。

Promise.all 如果有报错，是在 then 还是 catch 接收数据？接收的是什么样的数据？

当使用 Promise.all() 方法时，如果其中任何一个 Promise 对象被拒绝（rejected），则整个 Promise.all() 返回的 Promise 对象也会被拒绝。这意味着错误会在 catch() 方法中被捕获。

在 Promise.all().then() 中接收的数据是一个数组，包含所有 Promise 对象成功（已解决）的结果值，按照传递给 Promise.all() 的 Promise 对象数组的顺序排列。如果有任何一个 Promise 被拒绝，then() 方法不会执行。

在 catch() 方法中接收的数据是一个拒绝原因（通常是一个错误对象），表示 Promise.all() 中的任何一个 Promise 被拒绝的原因。catch() 方法中可以处理这个拒绝原因并采取相应的错误处理逻辑。

以下是一个示例：

const promise1 = Promise.resolve('Hello');
const promise2 = Promise.reject(new Error('Something went wrong'));
const promise3 = Promise.resolve('World');

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // 不会执行，因为 promise2 被拒绝
  })
  .catch((error) => {
    console.log(error.message); // 输出：Something went wrong
  });

在上述示例中，promise2 被拒绝，因此整个 Promise.all() 返回的 Promise 对象也会被拒绝。因此，then() 方法不会执行，而是进入 catch() 方法，并输出被拒绝的原因，即错误对象的消息属性。

需要注意的是，即使其中一个 Promise 被拒绝，其他 Promise 仍然会继续执行，但它们的结果不会被包含在返回的结果数组中。只有当所有 Promise 都成功解决时，then() 方法才会执行，并提供一个包含所有结果的数组。

订阅发布和观察者模式有什么区别？

订阅/发布模式（Publish/Subscribe Pattern）和观察者模式（Observer Pattern）是两种常见的软件设计模式，它们有一些区别：

主动与被动：

- 在订阅/发布模式中，发布者（或称为发布者）和订阅者之间没有直接的联系。发布者负责发布消息，而订阅者则自愿选择订阅感兴趣的消息，因此是被动的。
- 在观察者模式中，观察者（或称为订阅者）直接订阅主题（或称为可观察对象），并通过接收通知来被动地响应主题的状态变化。

关系：

- 在订阅/发布模式中，发布者和订阅者之间通过一个消息代理（或称为中介）进行通信，发布者发布消息到代理，然后代理将消息传递给所有订阅者。
- 在观察者模式中，观察者直接与主题进行交互，并注册为主题的观察者。当主题状态发生变化时，观察者会被通知并执行相应的操作。

松散耦合：

- 订阅/发布模式中的发布者和订阅者之间是松散耦合的。发布者无需知道订阅者的存在，而订阅者也无需知道发布者的具体细节。
- 观察者模式中的主题和观察者之间也是松散耦合的。主题只需保持对观察者的引用，观察者也只需知道主题的接口。

通信方式：

- 在订阅/发布模式中，发布者向所有订阅者发布消息，订阅者之间没有直接的通信。
- 在观察者模式中，主题通过触发通知的方式将状态变化通知给所有注册的观察者，观察者可以相互通信。

总之，订阅/发布模式和观察者模式在通信方式、关系和耦合度上有所区别。订阅/发布模式更加松散，发布者和订阅者之间通过消息代理进行通信；观察者模式更加紧密，观察者直接与主题交互并注册为观察者。选择使用哪种模式取决于具体的需求和设计上的考虑。

CommonJS 和 ES Module 有什么区别？

CommonJS（简称CJS）和ES Module（简称ESM）是两种不同的模块化规范，它们在语法和用法上有一些区别：

语法：

- CommonJS 使用 require() 来导入模块，使用 module.exports 或 exports 来导出模块。
- ES Module 使用 import 来导入模块，使用 export 来导出模块。

加载方式：

- CommonJS 采用同步加载模块的方式，即在运行时动态加载模块。
- ES Module 采用异步加载模块的方式，在解析阶段静态确定模块的依赖关系，以便更好地进行优化和静态分析。

导入和导出的值：

- CommonJS 导入的值是被拷贝的值的副本。在导入模块时，会将整个模块的值拷贝到新的变量中，并在之后使用这个拷贝的变量。这意味着对导出模块内的值进行的更改不会影响到导入的值。
- ES Module 导入的值是绑定的值的引用。导入模块时，实际上是在创建一个指向导出模块的引用，并且这个引用是只读的。这意味着对导出模块内的值进行的更改会直接反映在导入的值上。

动态性：

- CommonJS 允许在运行时动态导入和导出模块，也允许在任何地方使用 require() 和 module.exports。
- ES Module 在设计上更加静态，导入和导出的模块必须在模块的顶级作用域中进行，并且在编译时确定模块的依赖关系。

浏览器支持：

- CommonJS 最初是为服务器端开发而设计的，Node.js 是其主要实现者。在浏览器环境下，需要使用打包工具（如Webpack、Browserify）将 CommonJS 模块转换为浏览器可识别的模块。
- ES Module 是 ECMAScript 标准的一部分，现代浏览器原生支持 ES Module 的导入和导出语法，无需使用打包工具。

总的来说，CommonJS 和 ES Module 是两种不同的模块化规范，语法和加载方式上有一些区别。CommonJS 适用于服务器端和早期的前端开发，而 ES Module 是现代浏览器原生支持的标准模块化方案。具体使用哪种规范取决于目标平台和项目需求。

Vue Router 的原理，hash 和 history 有什么区别？

Vue Router 是 Vue.js 的官方路由管理器，它提供了在单页面应用中进行页面导航的功能。Vue Router 的原理主要基于监听 URL 变化和匹配路由规则来进行页面切换和组件渲染。

Vue Router 提供了两种路由模式：Hash 模式和 History 模式。它们之间的区别如下：

Hash 模式（默认）：

- Hash 模式使用 URL 的哈希部分（#）来模拟路由，即 URL 中会出现类似 http://example.com/#/path 的形式。
- 在 Hash 模式下，页面切换不会触发浏览器的页面刷新，而是监听 URL 中的哈希部分的变化，通过 JavaScript 的 hashchange 事件来进行相应的路由切换。
- Hash 模式具有良好的兼容性，可以在不支持 HTML5 History API 的浏览器中使用。

History 模式：

- History 模式使用 HTML5 History API，在 URL 中显示真实的路径，如 http://example.com/path。
- 在 History 模式下，页面切换会修改浏览器的 URL，但不会触发完整的页面刷新。通过使用 pushState() 或 replaceState() 方法来修改浏览器历史记录，以实现无刷新的页面切换。
- History 模式需要后端服务器的支持，以确保在直接访问通过路由管理的 URL 时返回正确的页面内容。

无论使用 Hash 模式还是 History 模式，Vue Router 都会监听 URL 的变化，并根据配置的路由规则来匹配对应的组件进行渲染。它还提供了丰富的导航守卫（Navigation Guards）功能，以便在页面切换前后执行相关逻辑。

需要注意的是，在使用 History 模式时，需要服务器配置来处理直接访问由路由管理的 URL 的情况。服务器应该始终返回应用的主页面，以便 Vue Router 能够接管路由并正确渲染相应的组件。

总之，Vue Router 是 Vue.js 的官方路由管理器，通过监听 URL 变化和匹配路由规则来实现页面切换和组件渲染。Hash 模式使用 URL 的哈希部分来模拟路由，而 History 模式使用 HTML5 History API 来实现真实路径的路由，但需要服务器配置支持。

history 服务端需要做哪些配置？

在使用 Vue Router 的 History 模式时，需要服务器进行一些配置，以确保在直接访问由路由管理的 URL 时能够返回正确的页面内容。以下是一些常见的服务器配置方案：

后端路由配置：

- 在服务器上配置一个通配符路由，使所有的路由都指向应用的主页面（index.html）。
- 这可以确保在直接访问由路由管理的 URL 时，服务器返回应用的主页面，由 Vue Router 接管路由并渲染正确的组件。

所有页面的路由都返回主页面：

- 配置服务器，当收到对任何页面的请求时，都返回应用的主页面。
- 这可以通过将服务器路由规则配置为“捕获所有”来实现。例如，在 Express.js 中，可以使用以下代码配置路由：

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

- 上述代码中的 * 通配符表示捕获所有请求，express.static() 用于指定静态资源目录，app.get() 用于返回应用的主页面。

使用服务器重写规则（Rewrite Rule）：

- 在某些服务器（如 Apache、Nginx）上，可以使用重写规则来配置路由。
- 通过使用适当的重写规则，将所有的请求都指向应用的主页面。

需要根据具体的服务器环境和配置方式，选择合适的方式来配置服务器，以确保在直接访问由路由管理的 URL 时能够返回正确的页面内容。以上提供的是一些常见的配置方案，具体的配置可能会因服务器环境和需求而有所不同。

vue中的KeepAlive 是什么？实现机制是什么呢。

在 Vue 中，<keep-alive> 是一个抽象组件，用于缓存动态组件（或组件的状态），以便在组件切换时保留它们的状态或避免重新渲染。它可以在包裹动态组件时使用，并通过缓存这些组件来提高性能。

<keep-alive> 的实现机制如下：

缓存组件实例：当 <keep-alive> 包裹的组件被切换隐藏时，组件实例并不会被销毁，而是被缓存起来。
缓存策略：默认情况下，<keep-alive> 使用 LRU（Least Recently Used）缓存策略来决定哪些组件应该被缓存，哪些应该被销毁。

- 当组件被切换出去时，将其实例缓存起来。
- 当组件被切换回来时，将其实例从缓存中取出并重新挂载到 DOM 上。
- 如果缓存中的组件数量超过了 max 属性所设置的最大缓存数，则最久未使用的组件会被销毁。

生命周期钩子：被缓存的组件在进入缓存和离开缓存时会触发一些生命周期钩子函数，例如 activated 和 deactivated。可以通过这些钩子函数来执行一些特定的操作，如加载数据或清理资源。

使用 <keep-alive> 组件可以提高组件的性能，特别是对于那些开销较大的组件，避免重复渲染和重新创建实例。但需要注意，<keep-alive> 仅适用于有状态的组件，对于那些没有状态的组件，如纯展示型组件，不应该被缓存。

以下是一个使用 <keep-alive> 的示例：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
};
</script>

在上述示例中，<keep-alive> 包裹的 <component> 会根据 currentComponent 的值动态切换显示不同的组件。当切换时，被隐藏的组件实例会被缓存，而不会被销毁，以便在切换回来时保留组件的状态。

Webpack 和 Vite 的构建流程有什么差异？

Webpack和Vite是两种常见的前端构建工具，它们在构建流程上有一些差异：

开发服务器：

- Webpack需要在开发过程中启动一个本地开发服务器来提供服务，通常使用webpack-dev-server或webpack-dev-middleware。这个服务器会监听文件的变化，并重新构建和刷新页面。
- Vite使用内置的开发服务器来提供服务，称为Vite服务器。Vite采用了一种基于ES模块的原生ES模块支持方式，可以实现快速的冷启动和按需编译，无需构建整个项目。

构建方式：

- Webpack在开发和生产环境中都需要将项目的源代码进行打包和编译，生成最终的构建结果。Webpack通过配置文件来定义构建过程，包括处理不同类型的资源、模块化打包、代码拆分、压缩等。
- Vite在开发环境中使用源代码作为本地服务器的直接输入，无需进行打包。而在生产环境中，Vite使用Rollup进行打包，并针对生产环境进行优化，生成最终的构建结果。

热模块替换（Hot Module Replacement）：

- Webpack支持热模块替换（HMR），即在开发过程中无需刷新整个页面，可以只替换修改的模块，保持应用的状态和运行状态。
- Vite借助ES模块的特性，实现了快速的热模块替换，通过原生的ES模块支持，无需额外的HMR配置。

依赖解析：

- Webpack使用静态依赖图来解析模块之间的依赖关系。它会根据配置文件中的规则，递归地解析和构建模块之间的依赖关系。
- Vite通过ES模块的特性，可以在运行时进行依赖解析。当需要加载某个模块时，Vite会根据浏览器的请求动态解析模块的依赖关系。

总的来说，Webpack是一个功能强大的构建工具，适用于复杂的项目和需求，它提供了广泛的配置和插件生态系统。Vite是一个专注于开发体验的构建工具，利用ES模块的特性，实现了快速的开发服务器和热模块替换。Vite在开发过程中具有更快的冷启动和按需编译的优势，适用于中小型项目或追求快速开发反馈的场景。

用js实现一个，给定由 []{}() 组成的字符串，判断括号是否正确匹配。

可以使用栈（Stack）数据结构来判断括号是否正确匹配。以下是用 JavaScript 实现的代码：

function isBracketValid(str) {
  const stack = [];
  const openingBrackets = ['[', '{', '('];
  const closingBrackets = [']', '}', ')'];

  for (let i = 0; i < str.length; i++) {
    const char = str[i];

    if (openingBrackets.includes(char)) {
      stack.push(char);
    } else if (closingBrackets.includes(char)) {
      const matchingOpeningBracket = openingBrackets[closingBrackets.indexOf(char)];
      if (stack.length === 0 || stack.pop() !== matchingOpeningBracket) {
        return false;
      }
    }
  }

  return stack.length === 0;
}

// 测试样例
console.log(isBracketValid('({})')); // true
console.log(isBracketValid('[{()}]')); // true
console.log(isBracketValid('({[]}])')); // false

在上述代码中，我们使用一个栈来存储遇到的开括号。遍历给定的字符串，当遇到开括号时，将其压入栈中。当遇到闭括号时，与栈顶的开括号进行匹配。如果栈为空或栈顶的开括号与当前闭括号不匹配，则括号不正确。最后，如果栈为空，则表示所有括号正确匹配。

注意，该实现假设给定的字符串只包含括号字符，并且括号的顺序正确。如果字符串包含其他字符或括号顺序不正确，可能会导致错误的判断结果。

一个数组中找到和等于指定值target的两个元素，并输出他们的下标。用js实现。

可以使用哈希表（Hash Table）来解决这个问题。遍历数组，将每个元素作为键，索引作为值存储在哈希表中。对于每个元素，检查是否存在与之配对的元素，使得两个元素的和等于目标值。以下是用 JavaScript 实现的代码：

function findTwoSum(arr, target) {
  const hashTable = {};

  for (let i = 0; i < arr.length; i++) {
    const complement = target - arr[i];

    if (complement in hashTable) {
      return [hashTable[complement], i];
    }

    hashTable[arr[i]] = i;
  }

  return [];
}

// 测试样例
const nums = [2, 7, 11, 15];
const target = 9;
console.log(findTwoSum(nums, target)); // [0, 1]

在上述代码中，我们使用哈希表 hashTable 来存储每个元素和其对应的索引。遍历数组，对于每个元素，计算其与目标值的差值 complement，然后检查该差值是否在哈希表中。如果存在，则说明找到了一对满足条件的元素，返回它们的索引；如果不存在，则将当前元素和索引存储在哈希表中。如果遍历完整个数组后仍然没有找到满足条件的元素，则返回一个空数组。

需要注意的是，上述实现假设输入的数组中存在且仅存在一对满足条件的元素。如果存在多个满足条件的元素对，上述代码只会返回其中一对。如果数组中可能存在多个满足条件的元素对，可以根据具体需求进行相应的修改。

题目 1.构造两个以整型数字为值的链表，其中的值是单调递增的。 2.将两个链表合并，保持递增。 3.要求空间复杂度O(1) 。用js实现这个函数。

下面是用 JavaScript 实现将两个有序链表合并为一个有序链表的函数：

function ListNode(val) {
  this.val = val;
  this.next = null;
}

function mergeTwoLists(l1, l2) {
  const dummy = new ListNode(0);
  let current = dummy;

  while (l1 && l2) {
    if (l1.val < l2.val) {
      current.next = l1;
      l1 = l1.next;
    } else {
      current.next = l2;
      l2 = l2.next;
    }
    current = current.next;
  }

  current.next = l1 ? l1 : l2;

  return dummy.next;
}

在上述代码中，我们定义了一个 ListNode 类用于表示链表的节点。mergeTwoLists 函数接收两个有序链表 l1 和 l2 作为输入，并返回合并后的有序链表。

我们使用了一个哑节点 dummy 来简化合并过程，并使用 current 变量来追踪合并后链表的尾部。

然后，我们使用一个循环来比较 l1 和 l2 的节点值，将较小的节点连接到合并后的链表中，并将相应的指针向后移动。

最后，我们检查剩余的节点，并将未遍历完的链表连接到合并链表的尾部。

最终返回 dummy.next 即为合并后的有序链表。

示例使用方法：

// 构造链表1：1 -> 3 -> 5
const l1 = new ListNode(1);
l1.next = new ListNode(3);
l1.next.next = new ListNode(5);

// 构造链表2：2 -> 4 -> 6
const l2 = new ListNode(2);
l2.next = new ListNode(4);
l2.next.next = new ListNode(6);

// 合并两个链表
const merged = mergeTwoLists(l1, l2);

// 输出合并后的链表
let current = merged;
while (current) {
  console.log(current.val);
  current = current.next;
}

输出结果为：1 -> 2 -> 3 -> 4 -> 5 -> 6，表示两个链表已成功合并并保持递增顺序。

标题单链表每隔k个元素做一次反转

题目描述：给定一个链表，每隔k个元素做一次反转

Example:

Inputs: 1->2->3->4->5->6->7->8->NULL and k = 3 Output: 3->2->1->6->5->4->8->7->NULL.

Inputs: 1->2->3->4->5->6->7->8->NULL and k = 5 Output: 5->4->3->2->1->8->7->6->NULL.

用js实现。

下面是用 JavaScript 实现单链表每隔k个元素进行反转的函数：

function ListNode(val) {
  this.val = val;
  this.next = null;
}

function reverseKGroup(head, k) {
  const dummy = new ListNode(0);
  dummy.next = head;

  let prev = dummy;
  let curr = head;

  let count = 0;
  while (curr) {
    count++;
    if (count % k === 0) {
      prev = reverse(prev, curr.next);
      curr = prev.next;
    } else {
      curr = curr.next;
    }
  }

  return dummy.next;
}

function reverse(prev, next) {
  let last = prev.next;
  let curr = last.next;

  while (curr !== next) {
    last.next = curr.next;
    curr.next = prev.next;
    prev.next = curr;
    curr = last.next;
  }

  return last;
}

在上述代码中，我们定义了一个 ListNode 类用于表示链表的节点。reverseKGroup 函数接收链表的头节点 head 和每隔k个元素进行反转的参数 k。

我们使用一个哑节点 dummy 来简化操作，并使用 prev 和 curr 指针来追踪反转的位置。

在 reverseKGroup 函数中，我们遍历链表，对每个k个元素进行反转。当 count 计数达到k的倍数时，调用 reverse 函数来反转 prev 到 curr 之间的节点，并将 prev 和 curr 指向相应的位置。如果不是k的倍数，我们继续遍历。

在 reverse 函数中，我们使用三个指针 prev、last 和 curr 来进行反转操作。我们将 last 指向当前段的第一个节点，curr 指向 last 的下一个节点。然后在循环中，不断将 curr 移动到下一个位置，并将节点的指针指向相应的位置来完成反转。

最终返回 dummy.next 即为反转后的链表。

示例使用方法：

// 构造链表：1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8
const head = new ListNode(1);
head.next = new ListNode(2);
head.next.next = new ListNode(3);
head.next.next.next = new ListNode(4);
head.next.next.next.next = new ListNode(5);
head.next.next.next.next.next = new ListNode(6);
head.next.next.next.next.next.next = new ListNode(7);
head.next.next.next.next.next.next.next = new ListNode(8);

// 每隔3个元素反转链表
const reversed = reverseKGroup(head, 3);

// 输出反转后的链表
let current = reversed;
while (current) {
  console.log(current.val);
  current = current.next;
}

输出结果为：3 -> 2 -> 1 -> 6 -> 5 -> 4 -> 7 -> 8，表示每隔3个元素进行了反转操作。

前端面试题五

Node 中 master 和 slave 是什么意思？

在script标签，defer 和 async 有什么区别？

UDP 协议有什么优点？

协商缓存如何判断命不命中？

HTTP 的103是什么意思？

如何处理跨域呢？

iframe中，外面如何获取里面的真实高度？

浏览器内存泄漏是否可以通过开发者工具看到，如何看到？

0.1 + 0.2 是否等于 0.3，如何解决？

JS 严格模式有什么了解？

js中有什么方法可以改变 this 指针？

数组操作 map 和 forEach 有什么区别，是否可以打断循环？

js中filter 和 find 返回值有什么区别？

js中十万个数组取第1万和第6万个元素速度有什么区别吗？为什么？

js中数组的 sort 默认是按什么排序的？使用的什么算法？

js中generator 函数和 async 函数有什么区别？

Promise.all 如果有报错，是在 then 还是 catch 接收数据？接收的是什么样的数据？

订阅发布和观察者模式有什么区别？

CommonJS 和 ES Module 有什么区别？

Vue Router 的原理，hash 和 history 有什么区别？

history 服务端需要做哪些配置？

vue中的KeepAlive 是什么？实现机制是什么呢。

Webpack 和 Vite 的构建流程有什么差异？

用js实现一个，给定由 []{}() 组成的字符串，判断括号是否正确匹配。

一个数组中找到和等于指定值target的两个元素，并输出他们的下标。用js实现。

题目 1.构造两个以整型数字为值的链表，其中的值是单调递增的。 2.将两个链表合并，保持递增。 3.要求空间复杂度O(1) 。 用js实现这个函数。

标题 单链表每隔k个元素做一次反转

题目 1.构造两个以整型数字为值的链表，其中的值是单调递增的。 2.将两个链表合并，保持递增。 3.要求空间复杂度O(1) 。用js实现这个函数。

标题单链表每隔k个元素做一次反转