自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

yz的博客

专注于web前端技术分享、笔试面试记录

  • 博客(37)
  • 收藏
  • 关注

原创 【面试常考】JS如何检测数组?

instanceofconst arr = [1, 2]console.log(arr instanceof Array) // trueArray.isArray()const arr = [1, 2]console.log(Array.isArray(arr)) // truetoString()const arr = [1, 2]console.log(Object.prototype.toString.call(arr) === '[Object Array]') /.

2020-12-28 15:59:36 146

原创 【面试常考】CSS3常考面试题

CSS3常考面试题:positiondisplayBFC浮动与清除浮动垂直、水平、垂直水平居中元素margin重合问题及解决方法CSS常用选择器以及优先级伪元素与伪类盒模型动画2D、3D转换弹性盒布局重绘与重排(回流)overflowCSS3新特性CSS常见的可继承的样式last-child与nth-of-child的区别?css引入的方式有哪些?优先级?区别?css隐藏元素的方式有哪些?区别是什么?css sprites如何用CSS进行性能优化?a标签的伪类:

2020-12-26 22:29:44 379 1

原创 【面试常考】CSS3新特性

CSS3新特性:选择器边框 border背景 background渐变 gradient文本效果 文本属性CSS3 字体 @font-face转换和变形 transformtransform属性可用于元素的2D 或 3D 转换,该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew。过渡属性 transition动画 animation @keyframe规则多媒体查询弹性盒布局参考阮大大的学习一波:flex布局多列布局盒模型

2020-12-26 18:59:29 378

原创 【面试常考】HTML5常考面试题

1. DOCTYPE的作用是什么?DOCTYPE声明用于告诉浏览器使用哪种模式来进行HTML文档解析。DOCTYPE声明有两种:标准模式和怪异模式(混杂模式)。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式与混杂模式的区别请参考第3道面试题。2. img标签的alt属性和title属性的区别alt属性作为图片的替代文字出现,比如图片加载失败的时候;title是图片的解析性文字,告诉用户当前图片的功能、意义等。3. 浏览器标准模式和怪异模式之间的区别所谓标准模式,是

2020-12-26 15:15:45 160

原创 【面试常考】H5新特性

HTML5新特性:1. 语义化标签(1)比如:header、conent、footer、aside、nav、section、article等语义化标签。(2)语义化标签的好处:结构清楚,易于阅读,可维护性更高,有利于SEO的优化。2. 表单新特性(1)input控件新增输入类型:date,color,month,email,tel,url、search、number等。(2) 新增表单元素:keygen(公钥私钥),datalist,progress,meter,output等。(3)新增表单

2020-12-26 14:37:21 1453

原创 【面试常考】vue中的data函数

问题:vue中的data为何一定要是函数?官方答案:当一个组件被定义,data必须声明为一个返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果data仍是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供data函数,每次创建一个新实例后,我们能够调用data函数,从而返回初始数据的一个全新副本数据对象。前置知识:JS浅拷贝、组件复用的实质...

2020-12-26 11:49:18 687

原创 【面试常考】vue中的key的作用

问题:当我们在用的vue的v-for命令时,总是搭配key去使用,其中key的作用是什么?答案:为了更准确的DOM Diff算法。通过给相同层级的节点设置key属性,其中key是标识每个节点的唯一值,这就避免了实际项目中在DOM更新的时候"就地更新”而带来的意外bug。前置知识:DOM Diff算法详细内容见官网->...

2020-12-26 11:49:05 1290

原创 【面试常考】vue.$nextTick()函数

1.vue.$nextTick()函数的作用:vue.$nextTick()函数用于延迟执行一段代码vue.$nextTick()函数的使用场景:(1)假设在钩子函数created()中,要进行DOM操作,那一定要将这段逻辑放在vue.$nextTick()函数中,因为此时DOM还没有挂载,就去操作DOM是拿不到DOM的。(2)vue中DOM的更新是异步的。如果一段代码依赖于某处DOM更新后的结果,那么这段代码要放在vue.$nextTick()函数中。前置知识vue生命周期.

2020-12-26 11:48:56 209 1

原创 聊聊前端本地存储

1.有哪些?FE常用到的前端本地存储包括:cookie、localStorage、sessionStorage。2.区别是什么?3.怎么用?开发过程中,我们经常会用到的就是cookie和localStorage了。凡是用到身份认证的网站或者系统都会用到cookie,至于cookie是什么,怎么用?稍后我做解释。localStorage常用于存储项目中一些需要记忆用户操作的数据,比如快捷键、临时数据等,这是提高用户体验的一种好方法。4.注意(1)localStorage在Safri浏览器无痕

2020-12-24 15:41:56 514 3

原创 你了解postMessage吗?

前言:通常,对于两个不同页面的脚本,只有当执行它们的页面位于同源(同协议、同主机、同端口)情况下,这两个脚本才能相互通信。window.postMessage()方法可以安全地实现跨域通信(前提:正确使用)。使用:语法:otherWindow.postMessage(message, targeOrigin, [opt]);字段解释:(1)otherWindow:其他窗口的一个引用,比如执行window.open返回的窗口对象;(2)message:将要发送到其他window的消息,它将被结

2020-06-29 17:24:18 544

原创 【面试常考】JS节流与防抖

前言:浏览器的resize、scroll、keypress、mousemove等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。防抖和节流都是通过减少对事件绑定的回调函数的调用频率来实现的。函数防抖(debounce)概念:在事件被触发n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。应用场景如:以用户拖拽窗口大小,触发resize事件为例,在这个resize过程中窗口的大小一直在改变,所以如果我们在resize事件中绑定回调函数,这个函数将会不断被触发,而这

2020-06-29 16:13:00 250

原创 JS内存泄漏

1.什么是内存泄漏?本质上讲,内存泄漏就是当变量不再被需要的时候,由于某种原因,它所占用的内存空间无法被释放。2.JavaScript中存在两种变量:(1)全局变量(2)局部变量 全局变量的生命周期会一直到页面卸载,而局部变量声明在函数中,它的生命周期从执行函数开始,直到函数执行结束。在这个过程中,局部变量会在栈或栈上被分配相应的内存去存储它们的值,函数执行结束,这些局部变量也不再被使用,所以它们所占用的内存也就被释放。但有一种情况:局部变量所占用的内存并不会随着函数执行结束而被回收,那就是局部

2020-06-29 11:40:16 145

原创 JS垃圾回收机制

1.为什么要进行垃圾回收呢?内存是程序运行时所依赖的宝贵的资源,合理利用内存是每个程序员在编码过程中应该关注的事情。2.JS的垃圾回收机制:JavaScript具有自动垃圾回收机制,垃圾回收器会定期对那些我们不再使用的变量、对象所占用的内存进行释放。垃圾回收器,它的主要工作是跟踪内存的分配和使用,以便当分配的内存不再使用时自动释放它。3.JS垃圾回收的算法:(1)标记清除法 当变量进入执行环境时标记为“进入环境”,当变量离开执行环境时则被标记为“离开环境”,被标记为“进入环境”的变量是不能被回

2020-06-29 11:38:07 1106

原创 【面试常考】CSS清除浮动

话不多说,咱直接开门见山吧!清除浮动的方式:(1)利用clear属性对不想进行浮动的元素上添加clear属性,值根据情况可设置为left,right,both// HTML代码<div class="pra"> <div class="child1">child1</div> <div class="child2">child2<...

2019-10-18 22:52:50 458

原创 【面试常考】CSS实现水平垂直居中

1.margin:auto法//父元素.container { position:relative; ......}//子元素.container_item { position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; ......}2.弹性盒子法//父元素.container { d...

2019-10-09 14:36:03 162 3

原创 【面试常考】Vue组件通信方式

1.常见组件通信场景大致有:(1)父子组件通信;(2)非父子组件通信。2.组件间通信方式有:(1)父组件向子组件:父组件通过props传递数据,包括一般数据、函数(2)子组件向父组件:术语:自定义事件父组件通过$on监听事件,子组件通过$emit触发事件(3)非父子组件通信(兄弟组件、跨级组件):通过事件总线Bus来通信你的点赞是对我最大的鼓励,ღ( ´・ᴗ・` )比...

2019-10-07 22:36:22 691

原创 【面试常考】React组件通信方式

1.React组件间通信场景大致有:(1)父子组件通信;(2)兄弟组件通信;(4)跨级组件通信。2.组件间通信使用的方式:(1)父组件向子组件父组件使用props属性向子组件传递数据(2)子组件向父组件父组件使用props属性向子组件传递一个函数,子组件携带自己的数据并通过调用该函数向父组件传递数据(3)兄弟组件通信发布-订阅模式,或者借助同一父组件通过props传递数据...

2019-10-07 22:28:56 471

原创 谈谈HTTP协议

1.HTTP协议的作用客户端发起请求,服务器响应请求,这个会话建立在HTTP协议上2.HTTP协议的缺点(1)使用明文(不加密)通信,通信过程中可能遭遇窃听;(2)通信过程中不确认通信方的身份,可能遭遇伪装;(2)无法确认报文完整性,在通信过程中报文可能已遭篡改。3.针对2中提出的HTTP协议的缺点,对应的解决方案有:(1)通信线路加密:使用隧道协议SSL或TLS来建立安全通信线路...

2019-10-04 20:55:16 169

原创 【面试常考】HTTP状态码

1.HTTP状态码的职责:当客户端向服务器端发送HTTP请求后,用于描述服务器端返回的请求结果。2.HTTP状态码的分类:(1)1xx 信息性状态码(2)2xx 成功状态码(3)3xx 重定向状态码(4)4xx 客户端错误状态码(5)5xx 服务器端错误状态码3.常用的状态码:(1)200 OK 请求响应成功(2)204 请求响应成功,但没内容返回(3)206 处理部分请求成...

2019-10-04 16:25:42 299

原创 【面试常考】JS的继承模式都有哪些?

JS的继承模式有:1.原型链继承function Person(name) { this.name = name}Person.prototype.showName = function() { console.log(this.name)}let p = new Person('zyy')//'zyy'//对象p自己没有showName函数,但它的原型上有所以它可以继承到这个方...

2019-10-02 23:22:45 138

原创 【面试常考】来你给我讲一下什么是闭包?

1.什么是闭包(Closure)?当嵌套的内部函数引用了其外部函数的变量(函数)时,就形成了闭包。2.闭包什么产生?嵌套的外部函数被调用的时候,也就是执行嵌套的内部函数的定义时。3.常见的闭包?(1)将嵌套的内部函数作为其外部函数的返回值;function fn() { var a = 1; function foo() { //闭包 a++ console.log(a...

2019-10-02 22:09:48 770 3

原创 【面试常考】JS原型链

1.理解(1)显式原型每个函数在定义的时候都有一个显式原型prototype,默认指向一个空的Object对象。function People() { //this.prototype = {}}(2)隐式原型每个对象实例都有一个隐式原型__proto__,指向创建它的构造函数的显示原型。let p = new People() //p.__proto__ = People....

2019-10-02 11:33:58 229

原创 JS的数据类型分类和判断

1.JS数据类型的分类(1)基本数据类型(值类型)String、Boolean、Number、Undefined、Null、Symbol(ES6引入)(2)对象数据类型(引用类型)Array、Function、Object2.JS数据类型的判断(1)typeof用来判断基本数据类型,它的返回值是一个代表数据类型的字符串。用法:typeof 变量名typeof的返回值有以下几种...

2019-09-30 15:21:53 388

原创 浅析ES6的Promise,Generator,Async

1.Promise,Generator,Async的相同之处:(1)都是用于解决异步编程(异步回调)的解决方案;(2)都是异步操作以同步操作的流程表达出来,避免早些时候回调函数的层层嵌套问题,即解决了“回调地狱”问题。2.Promise,Generator,Async的不同之处:(1)Promise,Generator是ES6提出的,Async是ES7提出的;(2)在编码上不同。Pr...

2019-09-30 11:41:25 184

原创 【面试常考】谈谈你对ES6中的Generator函数的认识

1.对Genetator函数的理解:(1)Generator函数是ES6提供的一种异步编程的解决方案;(2)Generator函数是一个状态机,封装了多个内部状态,执行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了是状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator函数内部的每一个状态。2.Generator函数的特征:(...

2019-09-30 10:13:22 834

原创 【面试常考】JS的深拷贝和浅拷贝

1.拷贝的理解拷贝,即copy,拷贝数据的意思。2.拷贝数据的方式:(1)直接赋值给一个变量(2)Object.assign()(3)Array.prototype.slice()(4)Array.prototype.concat()(5)JSON.parse(JSON.stringify())…3.拷贝数据应用(1)基本数据类型拷贝后会生成一份新的数据,修改拷贝后的数据不会...

2019-09-29 22:52:53 6292 1

原创 【面试常考】ES6之Promise

1.理解:(1)Promise是一个构造函数,用来生成promise实例;(2)promise实例代表了未来某个将要发生的事件(通常是异步操作);(3)引入promise,在编写代码的时候,异步操作可以以同步流程的代码书写,避免了层层嵌套的回调函数(‘回调地域’)。2.promise的3种状态:(1)pending:初始化状态(2)rejected:失败状态(3)fullfilled...

2019-09-29 16:24:41 225

原创 【面试常考】浅谈ES6中的Set和Map数据结构

1.Set(1)理解:Set本身是一个构造函数,用来生成Set数据结构。它类似于数组,但是成员的值是唯一的,不重复的。(2)用法:// 数组去重[...new Set([1,2,2,3])] //[1.2.3]// 字符串去重[...new Set['zyy']].join('') // 'zy'(3)注意:向 Set 加入值的时候,不会发生类型转换,所以5和"5"是两个不同...

2019-09-29 15:57:47 773

原创 【面试常考】你熟悉箭头函数吗?

1.箭头函数的作用定义匿名函数,回调函数2.箭头函数的特点:(1)写法简洁// 这是普通函数var fun1 = function() { alert('我是普通函数')}// 这是箭头函数var fun2 = () => alert('我是箭头函数')(2)箭头函数的this不是调用的时候决定的,而是定义的时候它所处的上下文环境决定的//这是普通函数var fun...

2019-09-29 13:49:45 304

原创 【面试常考】说说你对ES6中let关键字的理解

1.let关键字的作用:与ES5中的var类似,用来声明一个变量。2.let关键字的特点:(1)不能重复声明同一个变量let username = 'zyy'let username = 'qjw'console.log(username) // 会报错,提示username该变量已经声明过(2)在块级作用域内有效,如:循环遍历加监听案例(3)不存在预处理,即不存在变量提升的过程...

2019-09-29 12:17:42 1128

原创 【面试常考】apply,bind,call的作用和区别

1.apply,call,bind的作用:强制绑定this的指向2.apply,call,bind的区别/不同:(1)传参形式不同:apply第二个参数必须以数组的形式传参,否则会报错,如:[val1,val2…]call,bind第二个参数依次传入,如:val1,val2…(2)bind与apply,call的区别:apply,call是立即调用函数,绑定完this后并立即调用当前...

2019-09-29 11:50:18 192

原创 JavaScript严格模式

1.理解:JavaScript运行模式有两种:混杂模式、严格模式。顾名思义,严格模式使得JavaScript在更为严格的语法条件下运行。2.使用严格模式的目的/作用:(1)消除JavaScript语法的一些不合理、不严谨之处,减少一些怪异行为;(2)消除代码运行的一些不安全之处,为代码的安全运行保驾护航(比如:防止全局污染,内存泄漏等问题)(3)提高编译器效率,增加运行速度;(4)为未...

2019-09-29 10:38:13 238

原创 【面试常考】我终于明白事件循环(Event Loop)咋肥事了

在说事件循环之前,我们首先要搞清楚以下几个知识点。JavaScript为什么是单线程的?如果js不是单线程的,同时有两个方法操作一个DOM节点,一个做删除任务,一个做修改任务,那么此时浏览器该听谁的???JavaScript为什么是异步的?如果js不是异步的,由于代码的执行是自上而下的,那么如果一行代码需要执行很久,下一行的代码就会被阻塞。对用户来说,就是页面“卡死”,这样的话,用...

2019-09-29 10:23:24 371

原创 【面试常考】v-if与v-show的区别

在Vue中,实现条件渲染有两种指令,v-if与v-show。1.本质区别vue-show本质就是通过设置标签属性display为none,来控制隐藏vue-if是动态的向DOM树内添加或者删除DOM元素2.性能v-show只编译一次,后面的每次渲染其实就是控制css,开销较小v-if会根据值的真假不停的销毁和创建DOM,开销较大综上,故v-show性能更好一点应用场...

2019-02-28 16:29:15 377

原创 【干货】啦啦啦~再也不用担心webStorm激活码失效了

正如标题所示,楼楼再也不用担心webStorm激活码失效的问题了。因为楼楼就在刚刚30分钟前又一次遇见了webStorm激活码失效的问题,瞬间崩溃啊o然后,就是一波常规操作,到浏览器里找可用的激活码,以为能够像以前那样解决问题,结果找了半天也没用,艾玛气死我!接下里这波操作,6不6,你试试看接下来的步骤的前提是:你已经安装了webStorm复制补丁下载链接:http://idea.la...

2019-02-17 22:47:23 8021 2

原创 【面试常考】React面试常考知识点:React组件实例的生命周期

Hello!大家好,本文是楼楼总结自己2018年春招和秋招面试,被面试官问到的有关React频率最高的面试题,希望可以为19年参加春招的童鞋提供一些帮助!话不多说,干货来啦~1.首先,先介绍一下React组件实例是什么?组件实例是React组件类的实例化对象,它通常被用来管理内部状态、处理生命周期函数。大多数情况下,我们无需直接创建组件实例,React会负责创建它,ReactDOM.rende...

2019-02-09 16:42:53 2302

转载 很实用的MarkDown语法学习文章,快快收藏吧!

@很实用的MarkDown语法学习文章TOC欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博...

2019-02-08 12:19:36 218 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除