前端面试必备技能(持续更新)_维丶的博客-爱代码爱编程
js
1.let 、const 、var 的区别
答:var会挂载到window,会存在全局变量污染,会存在变量提升,而let、const不会
let、const同一作用域内不可声明同变量、var可以 (特别说明,let其实也会变量提升,但是提升之后会存在一个暂时性死区,虽然提升了但是不可以使用)
const声明的是一个常量声明之后值不可以修改,如果声明的是一个对象,属性值是可以改变的
2.call、bind、apply的区别
答:三者的主要作用都是改变this的指向,就是在用法上有所区别,call和apply是立即执行的,主要区别是在传递参数上不同,call后面传递的参数是以逗号的形式分开的,apply传递的参数是数组形式,bind返回的是一个函数形式,如果要执行,则后面要再加一个小括号,例如:bind(obj,参数1,参数2,)(),bind只能以逗号分隔形式,不能是数组形式。
3.for in 和 for of的区别
答:在对数组或对象进行遍历时,我们经常会使用这两种方法,那么这两张方法之间的区别就是它们两种都可以遍历,不过for in遍历的是数组的索引 (index),而for in 遍历的是数组元素值(value) for in 更适合遍历对象,当然也可以遍历数组。
4.你对原型链的理解
答:每个函数都有prototype属性,改属性指向原型对象。使用原型对象的好处是所有对象实例共享它所包含的属性和方法。原型链:访问一个对象的属性时,如果改对象内部不存在这个属性,那么就会沿着它的__proto__属性所指向的那个对象(父对象)里找,直到为null为止,这样一层一层的就构成了原型链。主要解决了继承的问题。
5.函数柯力化
答:就是一个高阶函数的使用方法,假如一个函数接受三个参数并且计算结果输出,柯力化之后就是每个函数里只接收一个值,并把接受的结果返回,renturn return return.
第一个优点入口单一,便于测试与复用。
第二个就是易于定位测试bug,可以准确定位到那个参数在那个环节出了问题。
坏处主要就是函数嵌套函数,嵌套的层级太多了,占用内存,效率低,毕竟每个function都会生成一个单独的作用域,都会在调用栈中占据一块内存空间。
6.重绘和回流(也叫重绘和重排)
答:当DOM的修改导致了样式的变化,并且没有影响几何属性的时候,会导致重绘。
就是当我们对DOM结构修改引发DOM几何尺寸变化的时候,会发生回流的过程。比如一下情况:一个DOM元素的几何属性变化,常见的几何属性有width、height、padding、margin、left、top、border等等,使DOM节点发生增减或者移动都会导致回流。重绘只会改变某个DOM,比如某个元素的颜色,值背景、字体颜色等等,发生改变会发生重绘,所以我们要尽量避免回流,浪费资源。
总结:重绘不一定会导致回流,但是回流一定会发生重绘。
7.事件循环机制
答:是js的一个底层运行原理,js是单线程的,但是也有一些耗时任务,会影响执行效率,代码都在主线程中执行,当遇见像ajax请求,setTimeout定时器时会单独开启异步线程,异步线程耗时之后会推入异步队列中等待执行,然后当主线程执行完毕之后,会到异步队列中取出到主线程中执行,然后再去异步队列中取第二个,这样来回取的过程就是事件循环。
css3
1.如何实现一个div垂直居中
(如果是一个父div包裹一个子div让子div垂直居中的话直接在父级div加上相对定位也是可以完成的)
答:
第一种:通过给div设置绝对定位,并且left、right、top、bottom设置为0,margin:auto既可以水平垂直居中。
第二种:通过给div设置绝对定位,left为50%,top为50%,再给div设置距左是自身的一半即:margin-left:自身宽度/2,margin-top:自身高度/2
第三种:通过给div设置绝对定位,left为50%,top为50%,再给div设置平移即:transform:translate3d(-50%,-50%,0)
第四种:flex布局:给父级设置display:flex,并且设置父级的水平居中justify-content:centen,并且给父级div设置垂直居中align-items:center即可
HTML5
vue
1.父子组件生命周期执行顺序
答:父beforeCreate->父created->子beforeCreate->子created->子mounted->父mounted
2.Vue路由实现原理
答:前端路由实现原理主要通过以下两种技术实现的。
第一种:利用H5的history.pushState和history.replaceState来实现,不同之处在于pushState会增加一条新的历史记录,而replacestate则会替换当前的历史记录。
第二种:利用url的hash实现,我们经常在url中看到#。这个#有两种情况,一个是我们所谓的描点,路由里的#不叫描点,我们称之为hash,我们说的就是hash,主要利用监听哈希值的变化来触发事件,hashchange事件来做页面布局更新。
总结:hash方案兼容性好,而B5的history主要针对高级浏览器。
3.说一说你对diff算法的理解
答:diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有0(n)。
diff算法在很多场景下都有应用,例如在vue虚拟dom渲染成真实dom的新旧VNode节点比较更新时,就用到了这个算法。diff算法有两个比较显著的特点:比较只会在同一级进行,不会跨层级比较。在diff比较过程中,循环从两边向中间收拢。
4.你对MVVM的理解
答:目前的主流框架都是MVVM模式的。MVVM里面的M就是数据层V就是vie视图层,中间通过一个(viewmodel)进行了一个双向绑定。能进行dom监听和数据绑定。里面是通过Object.defineProperty对当前组件中的data的所有属性添加了get和set方法,这样的话。形成了数据驱动视图,而且视图层和数据层就相互分离,便于维护了,只要修改了数据层视图层就发生变化,如果不变的话,可以使用this.$set方法来进行。
5.Vue最大的特点,核心是什么
答:Vue最大的特点就是"组件化"和"数据驱动"组件化就是可以将页面和页面中可复用的元素都看做组件,写页面的过程,就是写组件,然后页面是由这些组件"拼接"起来的组件树,数据驱动就是让我们只关注数据层,只要数据变化,页面(即视图层)会自动更新,至于如何操作DOM完成交由vue去完成,咱们只关注数据,数据发生改变视图层就自动发生改变。
6.v-if和v-show的区别
答:v-if和v-show都可以显示与隐藏一个元素,但是有本质区别v-if是惰性的,只要值为false就不会加载对于元素,为true才动态加载对于元素。v-show无论为true和为false都会加载对于html代码,但为false时会解析为display:none隐藏不在页面显示,但为true时页面上用display:block显示其效果。适用场景:切换频繁场景用v-show,切换不频繁适用v-if。
7.说说你对vuex的理解
答:vuex是一个状态管理工具,主要有五个核心属性。
1、state: vuex的基本数据,用来存储变量;
2、getters: 从基本数据(state)派生的数据,相当于state的计算属性;
3、mutations: 提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mution 都有一个字符串的事件类型(type)和一个回调函数(handler)。
回调函数就是我们实际进行状态更改的地方,并且它会接受 state作为第一个参数,提交载荷作为第二个参数。
4、action: 和mution的功能大致相同,不同之处在于 ①Action提交的是mution,而不是直接变更状态,②Action可以包含任意异步操作。
5、modules: 模块化vuex,可以让每一个模块拥有自己的 state、mutation、action、 getters,使得结构非常清晰,方便管理。
Vuex的用法:
新建vue项目testAPP —> 在testApp中建store文件 —> store文件下又有mudoules 文件夹和 getter.js 和 index.js —> store文件下建立user.js。