
面试
文章平均质量分 62
前端OnTheRun
这个作者很懒,什么都没留下…
展开
-
2022-01-29 牛客网前端基础题目30题和相关知识扩展汇总(一)
设置子盒子的内外浮动并消除父盒子的浮动影响(重点)1.考点:子元素设置浮动后造成父元素高度塌陷,怎么解决?一.父元素设置固定高度二.在设置浮动的子元素后面创建一个空盒子撑住高度三.用伪元素::after的方法设置空盒子四.父元素设置overflow:hidden;原创 2022-01-29 20:29:10 · 7 阅读 · 0 评论 -
2022-01-05 overflow:hidden的作用有哪些?它解决高度塌陷的原理是什么?
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;外面的元素也不会影响到容器里面的子元素;<mark>计算BFC的高度时,浮动元素也参与计算。</mark>原创 2022-01-05 22:32:03 · 79 阅读 · 0 评论 -
2022-08-14 同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次?
文章目录0.结论1.事件冒泡是自下而上执行2.事件捕获是自上而下执行3.同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次?代码结果4.使用事件委托解决新插入的子标签没有绑定上事件的情况0.结论执行顺序:先捕获再冒泡执行次数:绑定了几个事件就执行几次即:祖先元素的捕获事件>点击元素的捕获事件>点击元素的冒泡事件>祖先元素的冒泡事件1.事件冒泡是自下而上执行示例,略2.事件捕获是自上而下执行示例,略3.同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次原创 2022-08-14 23:29:56 · 246 阅读 · 0 评论 -
2021-08-30 使用vue的v-for进行遍历时为什么要为遍历元素加上key?为什么不推荐数组的index当做key使用?
文章目录1.在vue中使用v-for,未添加key时可能会出现的问题示例出现的原因2.v-for加上key,并以item作为唯一key值代码v-for为什么要加上key?注意事项3.v-for的key值使用数组的索引index会造成什么影响?原因例子1.在vue中使用v-for,未添加key时可能会出现的问题示例html:原创 2021-08-30 21:42:50 · 94 阅读 · 0 评论 -
2022-09-11 面试题:vue(三) vue组件初次渲染和更新的过程,vue页面之间是如何传值的,为什么做首屏优化以及如何做首屏优化
1.描述一下vue组件渲染和更新的过程vue组件初次渲染的过程vue组件更新的过程2.什么是组件?为何要封装组件?封装组件的好处组件的定义3.vue页面组件之间是如何传值的?4.computed,watch和methods的区别是什么?4.为什么要做首屏优化?如何做首屏优化?做首屏优化的原因实现首屏优化的做法原创 2022-09-11 20:05:33 · 209 阅读 · 0 评论 -
2022-03-05 vue面试题:methods,computed和watch的区别和各自的使用场景是什么?
watch和computed的异同相同点都是观察页面数据变化的不同点computed只能当依赖的数据变化时才会计算,当数据没有变化时会读取缓存数据watch每次都需要执行函数,适用于数据变化时的异步操作methods,computed和watch的定义和用法回顾computed计算属性,会根据所依赖的数据,动态显示新的计算结果并缓存该计算结果computed的值在getter执行后缓存,若所依赖的数据发生改变会重新调用getter来计算最新结果watch是一个对data数据的监听原创 2022-03-05 20:22:14 · 194 阅读 · 0 评论 -
2022-02-05 window,html,body和document的区别,BOM和DOM相关知识点
1.window,html,body和document的定义htmlbodywindowdocument2.window,html,body和document的区别3.document.body 和 document.documentElement的区别4.document.body.clientWidth、document.documentElement.clientWidth和window.innerWidth的区别示例结论5.复习:BOM和DOMBOM(Browser Objec原创 2023-02-05 21:22:02 · 394 阅读 · 0 评论 -
2023-01-05 对vue生命周期的理解,父组件和子组件生命周期钩子执行顺序,第一次页面加载会触发哪几个钩子,vue获取数据在一般在哪个周期函数
总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。创建前/后: 在beforeCreated阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el还没有。载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.messa原创 2023-01-05 07:15:00 · 302 阅读 · 0 评论 -
2023-01-01 Promise常见机试题和答案,主要考察:执行顺序,值透传,错误处理,返回值,链式调用
Promise 构造函数是同步执行的,then方法是异步执行的var p = new Promise((resolve, reject) => { console.log(1) resolve(3) console.log(2)})p.then(res => { console.log(res)})console.log(4)//输出结果:1 2 4 3new 一个Promise示例后,立即执行executor函数,它是同步的,一直遇到resolve函数,把它原创 2023-01-01 14:16:03 · 602 阅读 · 2 评论 -
2022-03-14 Object.create的定义和用法,Object.create和new的区别
object.create和new的区别最明显的区别是两者对__proto__属性的操作不同,Object.create是手动设置的,使用一个现有对象来作为的__proto__(实例对象的原型对象),new创建的实例对象,其__proto__会自动指向其构造函数的原型对象new创建的实例对象会继承构造函数的属性和方法,Object.create创建的实例对象不包含属性和方法,要通过第二个参数来给新对象添加新属性原创 2022-03-14 20:31:48 · 132 阅读 · 0 评论 -
2022-12-19 [汇总] 字符串方法,数组方法,数组遍历,数组去重,判断数据类型是数组还是对象,forEach的return,v-for的key使用数组的索引index,数组中出现最多的字符
文章目录一.数组方法和数组遍历1.unshift/shift,pop/push方法2.some和every方法3.slice和splice方法3.1.数组arr.slice(start,end)方法不会改变原数组而是返回一个子数组3.2.数组arr.splice(index, n, item1,...itemx)方法会改变原数组语法[重要] splice方法可以删除,添加,替换4.concat方法5.使用forEach和for..in遍历数组二.字符串方法1.substr和subst原创 2022-12-19 19:48:17 · 446 阅读 · 0 评论 -
2022-03-10 [总结]JS的常见设计模式的定义和用法(待编辑)
1.定义: 设计模式是一套多人知晓,经过分类,反复使用的代码设计经验的总结2.使用目的:(软件工程的基础知识点) 增加代码的复用性,易读性,可靠性 使代码的编写真正的工程化3.种类(23种): 工厂模式,抽象工厂模式,原型模式, 单例模式,组合模式,观察者模式,代理模式,适配器模式, 构造器模式,迭代器模式,模块化模式,暴露模块模式,中介者模式,命令模式, 外观模式,Mixin模式,装饰模式,亨元(Flyweight)模式,MVC模式,MVP模式,MVVM模式,惰性原创 2022-03-10 23:04:13 · 138 阅读 · 0 评论 -
2022-03-15 [总结]JS继承的常见几种方式和优缺点:原型链继承,构造函数继承,组合继承,原型式继承,寄生式继承,寄生组合式继承,class继承
0.object.create分类一:不使用Object.create的继承1.原型链继承原理:给原型对象增加一层指向优缺点格式和示例2.构造函数继承原理:使用bind改变某个功能的this指向从而实现继承优缺点格式和示例3.组合继承(原型链+构造函数)原型链继承和构造函数继承的缺点组合继承的原理改变this指向+原型对象优缺点语法和示例分类二:使用Object.create的继承4.原型式继承定义优缺点语法和示例:原型式继承是浅拷贝使用Object.create进行原创 2022-03-15 21:42:43 · 336 阅读 · 0 评论 -
2021-05-16 bind,call和apply的异同与用法
1.bind,call和apply的共同点:1.1.第一个形参改变当前this指向,第二个(以及之后的)形参用来传参1.2.三者只有格式的不同,功能是相同的2.bind,call和apply的不同点:2.1.bind需要执行语句(在后面额外加括号),call和apply是自执行2.2.bind和call第二个(和之后的)形参用来传参,apply的第二个参数是一个数组2.3.bind和call第二个参数可以是arguments,而apply不可以—————————————原创 2021-05-17 08:16:09 · 121 阅读 · 0 评论 -
2022-09-16 前后端交互方式总结:Promise定义和用法以及基于Promise 接口调用方式:ajax fetch axios async/await
文章目录零.Promise1.什么是Promise?2.使用Promise有什么好处?3.pending,fullfilled和rejected是什么?3.resolved和rejected是什么?4.then和catch是什么?3.Promise的基本用法零.Promise1.什么是Promise?Promise是JS中进行异步编程的一种新的解决方案,(旧方案是单纯使用回调函数)语法上,Promise是一个对象,从Promise对象可以获取异步操作的消息2.使用Promise有什原创 2022-09-16 23:45:34 · 746 阅读 · 0 评论 -
2022-12-12 如何判断一个变量是一个对象还是一个数组?
2.instanceOfinstanceof运算符返回一个布尔值,表示对象是否为某个构造函数的实例var obj = {name: "zhangsan"};var arr = [1, 2, 3];console.log(arr instanceof Array); //trueconsole.log(arr instanceof Object); //true(万物皆对象)console.log(obj instanceof Array); //falseconsole.log(obj in原创 2022-12-12 15:44:27 · 364 阅读 · 0 评论 -
2021-07-19 深浅拷贝的区别以及实现深拷贝的几种方法,Object.assign()是什么拷贝,自定义递归深拷贝函数的封装
深拷贝&浅拷贝以及实现深拷贝的四种方法:补:遍历和… //浅拷贝 var obj1 = { age: 18 }; var obj2 = obj1; obj2.age = 20; console.log(obj1.age); //深拷贝 //1.Object_assign //1.1.Object.assign用法1:(三个)错误格式:object_assgin var obj3 = { num2: 2, num3: 4 };原创 2021-07-19 09:05:12 · 334 阅读 · 0 评论 -
2021-05-14 [汇总]数组去重的几种方法
1.使用ES6的SET方法写法一写法二2.使用双层for循环写法一写法二3.查重,若无重复就push进空数组写法一:arr[i] == array[j]写法二:indexOf写法三:includes4.利用对象的唯一性5.使用map去重知识点原创 2021-05-14 15:00:58 · 113 阅读 · 1 评论 -
2022-03-22 前端高频面试题整理汇总(持续更新)
一.html和css1.如何画一个三角形?回答补充2.如何画一条0.5px的直线?回答3.说说px,em,rem,vm的区别?回答4.如何设置一个不固定宽高的盒子的水平垂直居中?回答补充5.对于网页性能优化你有哪些方法?回答二.javascript和nodejs1.eval()的用法是什么?回答补充2.数组去重的方法有哪些?回答3.网页状态码401,403,404分别代表什么?回答三.vue1.v-if和v-show的区别?回答2.v-for为什么要加上k原创 2022-03-22 20:00:20 · 145 阅读 · 0 评论 -
2022-02-13 笔试题(三):父子组件传值,[‘1‘, ‘2‘, ‘3‘].map(parseInt)的值是,vue项目启动命令,$router和$route区别,js深拷贝
1.Vue框架中,子组件在使用 props 接收父组件的引用数据类型参数时,如何给参数设置默认值?2.['1', '2', '3'].map(parseInt)的值是?2.1.简答2.2.回顾map语法:`array.map(function(currentValue, index, arr), thisIndex)`2.3.分析3.vue项目的启动命令是?4.vue中`$router和$route有`什么区别?5.js实现深拷贝的方法有哪些?原创 2022-02-13 22:47:05 · 222 阅读 · 0 评论 -
2021-12-25 面试题:vue(二) v-for使用key的原因,组件渲染更新过程,MVVM的理解,组件和封装组件的意义,ajax放在哪个生命周期,$nextTick作用,vue常见性能优化方式
1.为什么v-for要使用key?2.描述组件渲染和更新的过程3.对MVVM的理解4.什么是组件?为什么要封装组件?5.ajax请求应该放在哪个生命周期里?6.vue为何是异步渲染,$nextTick何用?7.vue常见性能优化方式?原创 2021-12-25 23:16:42 · 350 阅读 · 0 评论 -
2021-12-24 面试题:vue(一) v-if和v-show的区别,nextTick,vue样式穿透,scoped的原理,路由导航守卫,ref,MVVM
文章目录1.v-if和v-show的区别2.this.$nextTick 是如何设计的?nextTIck是什么?回答使用场景3.vue是如何做样式穿透的?回答:为什么要样式参透scoped底层原理参考博文4.scope的原理回答5.路由导航守卫有哪些?回答注意事项参考博文6.ref是什么?回答7.什么是MVVM回答参考原创 2021-12-24 12:34:27 · 157 阅读 · 0 评论 -
2021-07-24 JS难点整理:函数防抖&函数节流,闭包和原型链的概念和用法
一.函数防抖和函数节流二.闭包定义描述原理1.计算机的回收机制2.函数的定义作用域形成闭包的三个条件示例闭包的特点优点:缺点:使用闭包的目的闭包的两个应用场景1.循环中的事件获取循环每次执行的计数器2.给内置方法的缓存调函数传参三.原型链1.对象的__proto__1.1.万物皆对象,每个对象都有一个属性,这个属性叫做隐式原型,即__proto__1.2.一个对象的隐式原型指向其构造函数的原型链属性(__proto__指向prototype)1.3.这种指向使得对象原创 2021-07-24 11:43:49 · 182 阅读 · 0 评论 -
2021-12-21 笔试题(一) 列举vue指令和用法,vue组件通信:父子组件传值
1.输出国籍2.输出程序的结果3.设置样式4.说出至少4种vue指令和它们的用法5.简要写出vue组件中父组件向子组件传值和子组件向父组件传值的过程原创 2021-12-20 23:16:39 · 206 阅读 · 0 评论 -
2021-12-13 面试(一) v-if/for优先级,toFixed,keep-alive,语义化,vuex,vue双向数据绑定原理,插槽种类和作用
文章目录1.v-if和v-for的优先级回答补充2.`0.1+0.2=0.3000000004`回答验证3.keep-alive回答复习4.语义化的理解回答5.vuex是什么?有什么用?使用场景是?回答补充复习6.`===`和`==`的区别回答7.vue 双向数据绑定的原理回答补充8.vue插槽种类和作用回答复习9.es6新增特性(10个以上)回答:10.简述封装vue组件的过程回答补充11.vue3都有什么12.说一下原型链回答复习13.输原创 2021-12-13 21:03:05 · 441 阅读 · 0 评论 -
2021-12-12 面试题:css(三) 浏览器的兼容性场景,li标签之间的空白间隔的产生原因和处理,为什么要初始化CSS样式,css定义的权重
1.经常遇到的浏览器的兼容性有哪些?原因与解决方法是什么?png24位的图片在iE6浏览器上出现背景解决方案:做成PNG8.浏览器默认的margin和padding不同解决方案:加一个全局的*{margin:0;padding:0;}来统一。2.li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。3.为什么要初始化CSS样原创 2021-12-12 21:26:54 · 278 阅读 · 0 评论 -
2021-12-01 面试题:css(二) div设置居中的几种方式,绝对定位和相对定位的区别,display有哪些值,CSS3新增特性
1.1.如何居中div?给div设置一个宽度然后设置margin:0 auto;position的值relative和absolute定位原点是?相对定位和绝对定位的区别相对定位是相对元素本身的位置,不会脱1.2.如何居中一个浮动元素?父元素设置相对定位,子元素设置绝对定位并让left和top设置为50%,margin:-(width/2) 0 0 -(height/2)1.3.如何让绝对定位的div居中?:父元素设置相对定位,子元素设置绝对定位,margin:auto,上右下左:0;原创 2021-12-01 19:54:02 · 132 阅读 · 0 评论 -
2021-10-25 面试题:css(一) 标准盒与怪异盒,css选择符,可以继承的属性有哪些,css优先级,css3新增伪类
1.介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同?2.标准盒子模型和怪异盒子模型的区别?3.CSS选择符有哪些?哪些属性可以继承?4.CSS优先级算法如何计算?5.CSS3新增伪类有哪些?原创 2021-10-25 23:50:13 · 121 阅读 · 0 评论 -
2021-10-22 面试题:html(四) Label的作用,CSS / JS 引入的位置,HTML和XHTML区别,title与h1的区别、b与strong的区别、i与em的区别
1.Label的作用是什么?是怎么用的?label标签用于绑定一个表单元素,当鼠标点击label标签内的文字时,浏览器会自动将焦点移到与label标签有关的表单控件上,增加用户体验理解:点击label标签中文字,它的下一个兄弟节点或子节点input会自动获得焦点,如果是单复选框会被选中原创 2021-10-21 23:00:00 · 118 阅读 · 0 评论 -
2021-10-09 面试题:html(三) 语义化标签的理解,cookie&localStorage&sessionStorage的区别.iframe的缺点
1.简述你对HTML语义化的理解语义化标签就是用正确的标签做正确的事,这样做的好处是可以让页面富有结构性,让html的结构更清晰,也方便后期的维护2.请描述一下 cookies,sessionStorage 和 localStorage 的区别cookie是网站为了识别用户身份信息而存在本地的存储标识,cookie信息会经过http请求中在服务器和客户端之间发送和接收,而localStorage和sessionStorage只会在本地储存cookie的大小只有4k,localStorag原创 2021-10-09 21:25:36 · 169 阅读 · 0 评论 -
2022-02-23 面试题:html(二) link和@import,浏览器内核,h5新增特性
1.用link标签引入css样式和用@import有什么不同?2.1.介绍一下你对浏览器内核的理解2.2.常见的浏览器内核有哪些?3.1html5有哪些新特性、移除了那些元素?新增特性移除元素(标签)3.2.如何处理HTML5新标签的浏览器兼容问题?3.3.如何区分 HTML 和 HTML5?原创 2022-02-23 19:11:58 · 81 阅读 · 0 评论 -
2022-04-22 面试题:html(一) Doctype的作用,标准模式和兼容模式的区别,块级元素和行内元素
1.1.Doctype的作用是什么?声明是HTML文件的第一行,在标签之前,它告诉浏览器的编辑器将以什么文档标准解析这个文档.如果没有此标签或格式错误,那么文档将以兼容模式展现理解:就是告诉浏览器的编辑器以什么文档标准进行解析1.2.标准模式和兼容模式的区别是什么?标准模式:排版和js运作模式都是以改浏览器支持的最高标准运行兼容模式:页面以宽松的向后兼容的方式显示,模拟老式浏览器的工作方式目的是防止站点无法工作理解:标准模式就是以当前支持的最高标准进原创 2022-04-22 22:46:39 · 134 阅读 · 0 评论 -
2022-07-30 面试题:Vue中的data为什么必须是一个函数而非对象
:data定义成一个函数的好处是可以让每个实例可以维护一份被返回对象的拷贝,若是对象,则会影响到其他实例原创 2022-07-30 16:54:12 · 207 阅读 · 0 评论 -
2021-09-06 解决高度塌陷的产生和解决方法总结
2021-09-06 解决高度塌陷的产生和解决方法总结27/100发布文章rowlet未选择任何文件new#### 高度塌陷的产生父盒子没有设置宽高导致其高度塌陷#### 解决方法1.给塌陷元素添加overflow:hidden2.给浮动元素下方添加一个空盒子3.万能清除法:```cssafter{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}```4.给父元素原创 2021-09-05 22:25:54 · 92 阅读 · 0 评论 -
2021-08-20 面试题:你在项目开发的过程中遇到哪些问题?都是如何解决的?
1.2021-06-11 解决异步问题:for循环中的点击事件无法获取自增中的i2.2021-07-20 解决vue无法在view层实现检测数组更新的问题原创 2021-08-20 13:55:26 · 1292 阅读 · 0 评论 -
2021-08-19 面试题:如何对网站进行性能优化
content ⽅⾯1.减少 HTTP 请求:合并⽂件、 CSS 精灵、 inline Image2.减少 DNS 查询: DNS 缓存、将资源分布到恰当数量的主机名、减少 DOM 元素数量Server ⽅⾯1.使⽤ CDN2.配置 ETag3.对组件使⽤ Gzip 压缩Cookie ⽅⾯减⼩ cookie ⼤⼩css ⽅⾯1.将样式表放到⻚⾯顶部2.不使⽤ CSS 表达式3.使⽤ 不使⽤ @importJavascript ⽅⾯1.将脚本放到⻚⾯底部2.将 javascri原创 2021-08-19 09:07:24 · 112 阅读 · 0 评论 -
2021-08-11 面试题:cookies,sessionstorage和localStorage的区别以及cookies,token和session的定义与区别
1.面试题:cookies,sessionstorage和localStorage有什么区别?1.定义:1.cookies是网站为了标示不同用户的身份而储存在用户本地终端上的数据2.cookies始终在同源的http中携带,在浏览器和服务器之间来回传递3.sessionStorage和localStorage不会自动发送数据给服务器,仅仅在本地保存2.存储大小1.cookie大小不能超过4k2.sessionStorage和localStorage可以达到5M3.有效时间1.coo原创 2021-08-11 08:06:08 · 349 阅读 · 0 评论 -
2021-08-13 面试题:new一个对象时发生了什么
new操作符实际上只做了四步1 新生成一个对象2 链接到原型3 绑定 this4 返回新的对象原创 2021-08-13 17:16:47 · 100 阅读 · 0 评论 -
2021-07-17 面试题:判断一个字符串中出现次数最多的字符,统计这个次数
代码:var str = 'sdfgkshlshifhfsfv';var arr = {};for (var i = 0; i < str.length; i++) { if (!arr[str.charAt(i)]) arr[str.charAt(i)] = 1; else arr[str.charAt(i)]++;};var max = 0;var index = '';for (var i in arr) { if (arr[i] > max) {原创 2021-07-17 21:57:56 · 157 阅读 · 0 评论 -
2021-07-16 面试题:用 js 实现随机选取 10–100 之间的 10 个数字,存入一 个数组并排序
思路:获取随机数组数组排序代码:var arr = [];//获取10-100之间的10个随机数,并存放在在数组arrfor (var i = 0; i < 10; i++) {arr[i] = getNum(10, 100);}console.log(arr); //排序前的随机数组arr = change(arr); //排序console.log(arr); //排序后的随机数组//封装获取随机数方法function getNum(min, max) {return Mat原创 2021-07-16 09:25:34 · 1008 阅读 · 0 评论