当前位置：首页 > news >正文

No115.精选前端面试题，享受每天的挑战和学习

news 文章来源：https://blog.csdn.net/weixin_42554191/article/details/132397476 2024/11/17 7:17:58

在这里插入图片描述

文章目录

- 变量提升和函数提升的顺序
- Event Loop
- 封装 FetchAPI，要求超时报错的同时，取消执行的 promise（即不继续执行）
- 强缓存和协商缓存的区别
- token可以放在cookie里吗？

变量提升和函数提升的顺序

在JavaScript中，变量提升和函数提升是JavaScript引擎在代码执行之前进行的一种行为。变量提升是指在代码执行之前，JavaScript引擎会将变量的声明提升到作用域的顶部，而函数提升是指JavaScript引擎会将函数的声明提升到作用域的顶部。

在变量提升中，变量的声明会被提升，但是赋值操作不会被提升。这意味着在变量被赋值之前，它的值是undefined。例如：

console.log(x); // 输出 undefined
var x = 5;

在上面的例子中，变量x的声明被提升到作用域的顶部，但是赋值操作并没有被提升，所以在变量被赋值之前，它的值是undefined。

函数提升则是将整个函数的声明提升到作用域的顶部。这意味着可以在函数声明之前调用函数。例如：

foo(); // 输出 "Hello"function foo() {console.log("Hello");
}

在上面的例子中，函数foo的声明被提升到作用域的顶部，所以可以在函数声明之前调用函数。

需要注意的是，变量提升和函数提升只适用于使用关键字var和function声明的变量和函数。使用let和const声明的变量不会被提升，而使用函数表达式声明的函数也不会被提升。

总结起来，变量提升和函数提升的顺序是：函数提升优先于变量提升，而在同一类声明中，按照它们在代码中出现的顺序进行提升。

Event Loop

事件循环（Event Loop）是JavaScript中处理异步操作的一种机制。它负责管理调度和执行异步任务，以确保它们按照正确的顺序执行。

事件循环的核心思想是基于一个事件队列（Event Queue）和一个执行栈（Execution Stack）。
所有的异步任务都会被放入事件队列中，而同步任务则直接放入执行栈中。

当执行栈为空时，事件循环会从事件队列中取出一个任务，并将其放入执行栈中执行。这个过程会不断重复，形成一个循环，即事件循环。

事件循环的执行过程如下：

执行全局同步代码，将同步任务放入执行栈中执行。
当遇到异步任务时，将其放入事件队列中，并继续执行后续的同步任务。
当执行栈为空时，事件循环会从事件队列中取出一个任务，并将其放入执行栈中执行。
重复步骤2和步骤3，直到事件队列为空。

需要注意的是，事件循环是单线程的，意味着在同一时间只能执行一个任务。当一个任务正在执行时，其他任务需要等待。

常见的异步任务包括定时器（setTimeout、setInterval）、事件监听（addEventListener）和网络请求（Ajax、fetch等）。这些任务会被放入事件队列中，等待事件循环的执行。

通过事件循环，JavaScript能够处理异步任务，避免阻塞主线程，提高程序的响应性能。同时，事件循环也确保了异步任务按照正确的顺序执行，避免了竞争条件和数据不一致的问题。

封装 FetchAPI，要求超时报错的同时，取消执行的 promise（即不继续执行）

要封装Fetch API并实现超时报错并取消执行的功能，你可以使用Promise.race()和AbortController来实现。下面是一个示例代码：

function fetchWithTimeout(url, options, timeout = 5000) {const controller = new AbortController();const { signal } = controller;const timeoutPromise = new Promise((_, reject) => {setTimeout(() => {controller.abort();reject(new Error('请求超时'));}, timeout);});const fetchPromise = fetch(url, { ...options, signal });return Promise.race([fetchPromise, timeoutPromise]);
}// 使用示例
fetchWithTimeout('https://api.example.com/data', { method: 'GET' }).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

在上面的示例中，我们定义了一个名为fetchWithTimeout的函数，它接受三个参数：url表示要请求的URL，options表示请求的选项，timeout表示超时时间（默认为5000毫秒）。

在函数内部，我们创建了一个AbortController对象和一个signal对象，用于取消请求。然后，我们创建了一个timeoutPromise，它会在指定的超时时间后调用controller.abort()来取消请求，并抛出一个超时错误。

接下来，我们使用fetch函数发起请求，并传入signal作为请求的信号。最后，我们使用Promise.race()来同时等待fetchPromise和timeoutPromise，并返回最先完成的Promise。

这样，如果请求在超时时间内完成，那么fetchPromise会先完成，返回请求的结果。如果请求超时，那么timeoutPromise会先完成，抛出一个超时错误。

你可以根据需要调整超时时间和其他请求选项。同时，记得在使用fetchWithTimeout函数时，使用.catch()来捕获错误并处理取消执行的情况。

强缓存和协商缓存的区别

强缓存和协商缓存是用于在客户端和服务器之间进行缓存控制的两种机制。它们有以下区别：

强缓存：

当客户端请求资源时，如果该资源的缓存标识符（如Cache-Control或Expires）满足条件，客户端将直接从本地缓存中获取资源，而不向服务器发送请求。
强缓存的优点是可以减少服务器的负载，加快资源加载速度。
但缺点是如果资源在客户端缓存过期之前有更新，客户端无法得知，仍然使用旧版本。

协商缓存：

当客户端请求资源时，如果该资源的缓存标识符满足条件，客户端会发送一个请求到服务器验证该资源是否仍然有效。
服务器会根据资源的缓存标识符（如ETag或Last-Modified）进行验证，判断资源是否已经改变。
如果资源没有改变，服务器将返回一个304 Not Modified状态码，并告诉客户端继续使用本地缓存。
如果资源已经改变，服务器将返回新的资源。

区别：

强缓存是根据缓存标识符直接使用本地缓存，不向服务器发送请求，而协商缓存需要向服务器发送请求进行验证。
强缓存相对来说比较快，因为它减少了网络请求的次数，而协商缓存需要与服务器进行通信。
强缓存的缺点是不能检测资源的更新情况，只能依赖资源的缓存过期时间来判断，可能导致使用过期的资源。
协商缓存通过与服务器进行验证，可以获取到最新的资源，但会增加一次额外的网络请求。

在实际应用中，可以综合使用强缓存和协商缓存来控制资源的缓存，以达到更好的性能和用户体验。

token可以放在cookie里吗？

摘抄：不建议，因为安全问题。因为存在CSRF（跨站请求伪造）风险，攻击者可以冒用Cookie中的信息来发送恶意请求。
为了解决CSRF问题，可以设置同源检测（Origin和Referer认证），也可以设置Samesite为Strict。

可以将一个令牌（token）存储在一个cookie中。Cookie是浏览器保存在用户设备上的一小段文本信息，这些信息会在每次浏览器发送请求时通过HTTP头部自动发送到服务器。

将令牌存储在Cookie中具有一些优点：

它对于客户端来说是透明的，无需手动添加头部信息。
Cookie存储在浏览器中，与用户会话相关联，因此在不同的页面和请求中都可以使用。
Cookie具有过期时间的设置，可以控制令牌的有效期。

然而，需要注意的是，将令牌存储在Cookie中也存在一些安全风险：

客户端可能对Cookie进行修改、删除或伪造，从而引发安全漏洞。
由于Cookie存储在用户设备上，可能会被其他恶意脚本或跨站脚本攻击获取到。

因此，在使用Cookie存储令牌时，需要采取一些安全措施，如使用HTTPS协议进行通信，设置HttpOnly和Secure标记来限制脚本访问，以及定期更新和验证令牌等。