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

简介: No115.精选前端面试题,享受每天的挑战和学习

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

在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)

所有的异步任务都会被放入事件队列中,而同步任务则直接放入执行栈中。

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

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

  1. 执行全局同步代码,将同步任务放入执行栈中执行。
  2. 当遇到异步任务时,将其放入事件队列中,并继续执行后续的同步任务。
  3. 当执行栈为空时,事件循环会从事件队列中取出一个任务,并将其放入执行栈中执行。
  4. 重复步骤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()来同时等待fetchPromisetimeoutPromise,并返回最先完成的Promise。

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

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

强缓存和协商缓存的区别

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

强缓存:

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

协商缓存:

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

区别:

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

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

token可以放在cookie里吗?

摘抄:不建议,因为安全问题。因为存在CSRF(跨站请求伪造)风险,攻击者可以冒用Cookie中的信息来发送恶意请求。

为了解决CSRF问题,可以设置同源检测(OriginReferer认证),也可以设置SamesiteStrict

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

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

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

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

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

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

相关文章
|
1月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
121 26
|
3月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
75 4
|
3月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
88 1
|
4月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
84 0
|
4月前
|
Java 应用服务中间件 程序员
JVM知识体系学习八:OOM的案例(承接上篇博文,可以作为面试中的案例)
这篇文章通过多个案例深入探讨了Java虚拟机(JVM)中的内存溢出问题,涵盖了堆内存、方法区、直接内存和栈内存溢出的原因、诊断方法和解决方案,并讨论了不同JDK版本垃圾回收器的变化。
57 4
|
4月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
185 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
4月前
|
算法 前端开发 Java
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
这篇文章总结了单链表的常见面试题,并提供了详细的问题分析、思路分析以及Java代码实现,包括求单链表中有效节点的个数、查找单链表中的倒数第k个节点、单链表的反转以及从尾到头打印单链表等题目。
53 1
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
|
4月前
|
前端开发 JavaScript 小程序
前端新机遇!为什么我建议学习鸿蒙?
【10月更文挑战第4天】前端新机遇!为什么我建议学习鸿蒙?
186 0
前端新机遇!为什么我建议学习鸿蒙?
|
4月前
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
323 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    智能编码在前端研发的创新应用
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目