Web前端面试题(持续更新中)

一、闭包是什么

JS中内层函数可以访问外层函数的变量,使内部私有变量不受外界干扰,起到保护和保存的作用,我们把这个特性称作闭包。

好处:

隔离作用域,保护私有变量;有了闭包才有局部变量,要不然都是全局变量了。

让我们可以使用回调,操作其他函数内部;

变量长期驻扎在内存中,不会被内存回收机制回收,即延长变量的生命周期;

        坏处:内层函数引用外层函数变量,内层函数占用内存。如果不释放内存,过多时,易引起内存泄露。

        引用场景: for循环中的保留i的操作 / 防抖和节流

二、内存泄露、垃圾回收机制 

内存泄露:

        是指不再用的内存没有被及时释放出来,导致该段内存无法被使用就是内存泄漏,内存泄漏指我们无法在通过js访问某个对象,而垃圾回收机制却认为该对象还在被引用,因此垃圾回收机制不会释放该对象,导致该块内存永远无法释放,积少成多,系统会越来越卡以至于崩溃

垃圾回收机制:

        就是垃圾收集器按照固定的时间间隔,周期性地寻找那些不再使用的变量,然后将其清楚或释放内存。(标记清除/引用计数)

三、浅拷贝与深拷贝 

        浅拷贝:将原对象或原数组的引用直接赋给新对象,新数组,新对象只是对原对象的一个引用,而不复制对象本身,新旧对象还是共享同一块内存。(拓展运算符。。。)

        深拷贝:开辟一个新的栈,两个对象的属性完全相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。(JSON.stringify和JSON.parse / 递归/Object.assgin )

        优点:方便,将字符串parse后创建新对象(新地址)

        缺点:如果被拷贝的对象中某个属性的值为undefined,则拷贝之后该属性会丢失,如果被拷贝的对象中有正则表达式,则拷贝之后的对象正则表达式会变成Object

四、route和router的区别详解 

 router是用来操作路由的

 route是用来获取路由信息的。 $route.path $route.params route.query等 

五、如何改变this指向(call、apply与bind区别) 

    call、bind、apply 都是 JavaScript 中用于改变函数执行上下文(即 this 指向)的方法。

    传参 call、bind可以传递无数个参数,apply只有两个参数,第二个参数为数组返回 call和apply方法是直接调用函数并改变函数上下文,而bind方法则是返回一个新函数,稍后调用时绑定指定的上下文。

六、箭头函数和普通函数的区别 

箭头函数是普通函数的简写,但是它不具备很多普通函数的特性this指向问题,箭头函数的this指向它定义时所在的对象,而不是调用时所在的对象没有arguments对象,不能使用arguments不会进行函数提升,不能new

七、浏览器存储,他们的区别? 

localStorage:永久保存,以键值对保存,存储空间5M

sessionStorage:关闭页签/浏览器时清空

cookie:随着请求发送,通过设置过期时间删除

session:保存在服务端

(localStorage/sessionStorage是window的属性,cookie是document的方法)

八、常用的数组方法有哪些? 

改变原数组:push、pop、shift、unshift、sort、splice、reverse

不改变原属组:concat、join、map、forEach、filter、slice

(slice切片的意思,根据传入的起始和终止下标,获取该范围数组。splice可根据传入参数个数不同实现删除、插入操作,直接操作原数组。第1个参数为起始下标,第2个为删除个数,第3个为要增加的数据)

九、Vue的生命周期 

beforeCreate:会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。此时不能获得DOM节点

created:在这个阶段vue实例已经创建,以下内容已经设置完成:响应式数据、计算属性、方法和侦听器。然而,此时挂载阶段还未开始,因此 $el 属性仍不可用。仍然不能获取DOM元素。

beforeMount:在组件内容被渲染到页面之前自动执行的函数,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。

mounted:在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已被渲染出来。

beforeUpdate:数据变化的时候自动执行的函数,此时变化后的数据还未渲染到页面之上。.

updated:数据变化之后自动执行的函数,此时变化后的数据已经渲染到页面之上

beforeDestroy:当 Vue 应用被销毁时,自动执行的函数。

destroyed当 Vue 应用被销毁后,且 dom 完全销毁之后,自动执行的函数。

十、Vue的Key的作用 

key主要用在虚拟Dom算法中,每个虚拟节点VNode有一个唯一标识Key,通过对比新旧节点的key来判断节点是否改变,用key就可以大大提高渲染效率 

十一、diff算法 

diff算法是指对新旧虚拟节点进行对比,并返回一个patch对象,用来存储两个节点不同的地方,最后利用patch记录的消息局部更新DOM 

十二、虚拟DOM的优缺点 

优点:减少了dom操作,减少了回流与重绘 

缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢

十三、回流和重绘 

render树中一部分或全部元素需要改变尺寸、布局、或着需要隐藏而需要重新构建,这个过程叫做回流,回流必将引起重绘 

十四、为什么避免 v-if 和 v-for 用在一起 

当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中,带来性能方面的浪费。 

十五、什么是Promise 

Promise异步编程的一种解决方案。Promise是一个构造函数,接收一个函数作为参数,返回一个 Promise 实例。

Promise对象有三种状态,他们分别是 pending(等待中) resolved(已完成)rejected(拒绝)

Promise.all哪怕一个请求失败了也能得到其余正确的请求结果的解决方案

promise 的then会返回一个新的 promise 对象,能保证 then 方 可以进行链式调用

十六、async、await 

Async 和 await 是一种同步的写法,但还是异步的操作,两个必须配合一起使用 

十七、宏任务和微任务有哪些?执行顺序 

宏任务:script,setTimeout,setInterval。

微任务:Promise,process.nextTick。

微任务会优先于宏任务执行。这意味着在当前任务执行结束后,所有微任务都会被立即执行,而宏任务只有在所有微任务执行完毕后才会执行。

十八、var  let  const的区别 

var声明的变量存在变量提升,即变量可以在声明之前调用,var允许重复声明变量var不存在块级作用域

let和const不存在变量提升,即它们所声明的变量一定要在声明后使用,否则报错

let和const存在块级作用域

let和const在同一作用域不允许重复声明变量

十九、从浏览器输入url后都经历了什么 

先进行DNS域名解析,先查看本地hosts文件,查看有没有当前域名对应的ip地址,若有直接发起请求,没有的话会在本地域名服务器去查找,没找到的话就去根服务器查找最后查找到对应的ip地址后把对应规则保存到本地的hosts文件中。

进行http请求,三次握手四次挥手建立断开连接。服务器处理,可能返回304也可能返回200

客户端自上而下执行代码渲染页面

二十、HTTP与HTTPS有什么区别 

HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全,为了保证这些隐私数据能加密传输,于是网景公司设计了SSL(Secure Sockets Layer)协议用于对HTTP协议传输的数据进行加密,从而就诞生了HTTPS。 

二十一、如何解决前端跨域问题 

JSONP跨域,CORS,nginx代理跨域,nodejs中间件代理跨域,WebSocket协议跨域

二十二、Webpack是什么 

Webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件(图片,字体)等,让开发更高效。对于不同类型的依赖,Webpack有对应的模块加载器,而且会分析模块间的依赖关系,最后合并生成优化的静态资源

二十三、Webpack的基本功能? 

代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等

文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等

代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件

自动刷新:监听本地源代码的变化,自动构建,刷新浏览器

代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过

自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

二十四、冒泡算法排序 

// 冒泡排序

1.比较相邻的两个元素,如果前一个比后一个大,则交换位置。

2.第一轮的时候最后一个元素应该是最大的一个。

3.按照步骤一的方法进行相邻两个元素的比较,这个时候由于最后一个元素已经是最大的了,所以最后一个元素不用比较。

    function bubbleSort(arr) {

      for (var i = 0; i < arr.length; i++) {

        for (var j = 0; j < arr.length; j++) {

          if (arr[j] > arr[j + 1]) {

            var temp = arr[j]

            arr[j] = arr[j + 1]

            arr[j + 1] = temp

          }

        }

      }

    }

    var Arr = [3, 5, 74, 64, 64, 3, 1, 8, 3, 49, 16, 161, 9, 4]

    console.log(Arr, "before");

    bubbleSort(Arr)

    console.log(Arr, "after")

二十五、快速排序 

    快速排序是对冒泡排序的一种改进,第一趟排序时将数据分成两部分,一部分比另一部分的所有数据都要小。

    然后递归调用,在两边都实行快速排序。  

    function quickSort(arr) {

      if (arr.length <= 1) {

        return arr

      }

      var middle = Math.floor(arr.length / 2)

      var middleData = arr.splice(middle, 1)[0]

      var left = []

      var right = []

      

      for (var i = 0; i < arr.length; i++) {

        if (arr[i] < middleData) {

          left.push(arr[i])

        } else {

          right.push(arr[i])

        }

      }

      return quickSort(left).concat([middleData], quickSort(right))

    }

    var Arr = [3, 5, 74, 64, 64, 3, 1, 8, 3, 49, 16, 161, 9, 4]

    console.log(Arr, "before");

    var newArr = quickSort(Arr)

    console.log(newArr, "after");

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/588344.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【跟我学RISC-V】(一)认识RISC-V指令集并搭建实验环境

写在前面 现在计算机的体系架构正是发展得如火如荼的时候&#xff0c;占领桌面端市场的x86架构、占领移动端市场的arm架构、在服务器市场仍有一定地位的mips架构、国产自研的指令集loongarch架构、还有我现在要讲到的新型开源开放的RISC-V指令集架构。 我先说一说我的学习经历…

十二、视觉内容生成模型

1 判别式模型和生成式模型 1. 判别式模型 学习策略函数 Y f ( X ) Yf(X) Yf(X)或者条件概率 P ( Y ∣ X ) P(Y|X) P(Y∣X)不能反映训练数据本身的特性学习成本低&#xff0c;需要的训练样本少无法转为生成式 2. 生成式模型 学习联合概率密度分布 P ( X ∣ Y ) P(X|Y) P(X∣…

C++ 矩阵

目录 了解矩阵的数学原理&#xff08;大学线性代数&#xff09; 矩阵及转置矩阵 矩阵乘法 矩阵快速幂 相伴矩阵模板 [相伴矩阵,快速矩阵幂]CSES1722 Fibonacci Numbers 了解矩阵的数学原理&#xff08;大学线性代数&#xff09; 矩阵及转置矩阵 这里A就是一个矩阵&…

动态数据结构中的表扩张性:摊还分析、伪代码与C语言实现

动态数据结构中的表扩张性&#xff1a;摊还分析、伪代码与C语言实现 引言表扩张性的概念摊还分析在表扩张性中的应用伪代码示例&#xff1a;TABLE-INSERT操作C语言实现结论 引言 在处理数据结构时&#xff0c;尤其是表&#xff08;或数组&#xff09;&#xff0c;我们经常面临…

Swift - 可选项(Optional)

文章目录 Swift - 可选项&#xff08;Optional&#xff09;1. 可选项&#xff08;Optional&#xff09;2. 强制解包&#xff08;Forced Unwrapping&#xff09;3. 判断可选项是否包含值4. 可选项绑定&#xff08;Optional Binding&#xff09;5. 等价写法6. while循环中使用可选…

DVWA 靶场命令注入通关解析

介绍 命令注入&#xff08;Command Injection&#xff09;是一种常见的安全漏洞&#xff0c;它允许攻击者通过在应用程序中执行恶意命令来获取系统权限或执行非授权操作。 命令注入通常发生在需要将用户输入作为命令执行的地方&#xff0c;例如Web应用程序的输入框、参数传递…

制作一个RISC-V的操作系统十五-软件定时器

文章目录 定时器分类定时器相关分类软件定时器设计初始化创建删除触发流程图形示意 优化代码 定时器分类 硬件定时器&#xff1a;由硬件频率和触发限制的大小决定&#xff0c;只有一个&#xff0c;精度高 软件定时器&#xff1a;基于硬件定时器实现&#xff0c;精度大于等于硬…

搭建vue3组件库(三): CSS架构之BEM

文章目录 1. 通过 JS 生成 BEM 规范名称1.1 初始化 hooks 目录1.2 创建 BEM 命名空间函数1.3 通过 SCSS 生成 BEM 规范样式 2. 测试 BEM 规范 BEM 是由 Yandex 团队提出的一种 CSS 命名方法论&#xff0c;即 Block&#xff08;块&#xff09;、Element&#xff08;元素&#xf…

AngularJS 的生命周期和基础语法

AngularJS 的生命周期和基础语法 文章目录 AngularJS 的生命周期和基础语法1. 使用步骤2. 生命周期钩子函数3. 点击事件4. if 语句1. if 形式2. if else 形式 5. for 语句6. switch 语句7. 双向数据绑定 1. 使用步骤 // 1. 要使用哪个钩子函数&#xff0c;就先引入 import { O…

Flutter笔记:Widgets Easier组件库(4)使用按钮组

Flutter笔记 Widgets Easier组件库&#xff08;4&#xff09;&#xff1a;使用按钮组 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress…

vue3 vite 路由去中心化(modules文件夹自动导入router)

通过路由去中心化可实现多人写作开发&#xff0c;不怕文件不停修改导致的冲突&#xff0c;modules中的文件可自动导入到index.js中 // 自动导入模块 const files import.meta.globEager(./modules/**.js); const modules {} for (const key in files) {modules[key.replace…

【C语言加油站】字符函数与字符串函数

字符函数与字符串函数 导言一、字符分类函数1.1 字符分类函数的用法 二、字符转换函数2.1 字符转换函数的用法 三、字符串函数3.1 成员3.2 strlen函数3.2.1 size_t类型3.2.2 strlen的易错点3.2.2 strlen的使用3.2.3 strlen与sizeof 3.3 strcpy函数和strncpy函数3.3.1 strcpy和s…

Messari 报告摘要 :Covalent Network(CQT)2024 年第一季度表现

摘要&#xff1a; 尽管 CQT 代币流通供应量增加了 20%&#xff08;新增 1.04 亿枚 CQT&#xff09;&#xff0c;但 CQT 的质押百分比仅从 2023 年第一季度的 22% 增长到了 2024 年第一季度的 29%。 CQT 的市值季度环比增长了 28%&#xff0c;多次达到 2.75 亿美元&#xff0c…

脑筋急转弯在线问答

页面效果 点击“显示答案”按钮&#xff0c;显示参考答案。 页面代码 <% layout(/layouts/default.html, {title: 脑筋急转弯管理, libs: [dataGrid]}){ %> <div class"main-content"><div class"box box-main"><div class"bo…

【介绍下大数据组件之Storm】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

【Java】 对象的比较【比较器】

登神长阶 第七阶 Java对象的比较 &#x1f3b7;一.Java对象的比较 &#x1fa97;1.基于引用的比较 基于引用的比较在Java中使用运算符进行。它主要检查两个对象是否引用内存中的相同位置。以下是基于引用的比较的详细介绍&#xff1a; 使用运算符&#xff1a; 运算符用于比…

【Qt QML】Frame组件

Frame&#xff08;框架&#xff09;包含在&#xff1a; import QtQuick.Controls继承自Pane控件。用于在可视框架内布局一组逻辑控件。简单来说就是用来包裹和突出显示其他可视元素。Frame不提供自己的布局&#xff0c;但需要自己对元素位置进行设置和定位&#xff0c;例如通过…

vue3与js的router基本使用方式

title: vue3与js的router基本使用方式 tags: vue3js abbrlink: ‘57270957’ date: 2024-04-17 18:54:47 第一步快捷引入的别名 使用路由需要大量在src文件中引用所需要的地址&#xff0c;并且组件中也需要很多的包的引用&#xff0c;将快速跳转到src这一文件的步骤进行简化操…

如何从 iPhone 恢复已删除或丢失的联系人?

不小心删除了您的 iPhone 联系人&#xff1f;不用担心。我们将向您展示如何从 iPhone或 iPad恢复已删除或丢失的联系人。当您从 iPhone 中删除联系人时&#xff0c;您可能认为无法将其恢复。但事实是&#xff0c;您可以从 iPhone 或 iPad 恢复已删除的联系人&#xff0c;因为它…

模型智能体开发之metagpt-多智能体实践

参考&#xff1a; metagpt环境配置参考模型智能体开发之metagpt-单智能体实践 需求分析 之前有过单智能体的测试case&#xff0c;但是现实生活场景是很复杂的&#xff0c;所以单智能体远远不能满足我们的诉求&#xff0c;所以仍然还需要了解多智能体的实现。通过多个role对动…
最新文章