记一次前端面试~~有兴趣的戳

最近博主想换一个工做环境，因而自信满满的遇上了金三银四的好时候。却不知外面的世界早于之前不一样了，特别是前端这一块。

在开始以前申明一下，博主的公司一直用的技术栈是vue，期间也开发过两个小程序，相比较而言，原生js以及jquery的项目已经好久好久没作过了。

言归正传，放上此次面试题的题目：

css、html 方面：

1.css盒模型分为哪两种？

标准盒子模型 IE盒子模型，主要区别在于width计算。

2.选择器的优先级排序？

内联样式>id选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器

3.你知道哪些H5新标签？

header：定义文档的页眉 头部

nav：定义导航连接的部分

footer：定义文档或节的页脚 底部

article：定义文章。

section：定义文档中的节（section、区段）

aside：定义其所处内容以外的内容 侧边

4.display:flex;justify-content:center;align-items:center呈现的效果是什么样？

水平居中，垂直居中

5.什么状况须要清除浮动，如何清除？

有时候父容器没有给固定高度的时候，因此给浮动的元素的祖先元素加上高度；

clear:both；（这个方法有一个很是大的,而且致命的问题,margin失效了!）

overflow:hidden

6.行内元素，块级元素列举几个？

    块元素：独占一行，可设置宽高（div、p、ul、ol、h1-h5）
    行内块元素：可设置宽高，不能换行（img、iput）
    行元素：不能设置宽高，不能换行（span、i、s、u）

 

原生js方面：

1.解释下数组中的join()以及split()

join()是把数组中的全部元素放入字符串中，再用指定的分隔符进行分隔。

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join("."))

</script>

输出：

George.John.Thomas

split()是把字符串分隔成一个字符串数组。

它接受两个参数：

stringObject.split(separator,howmany)

例如：

<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

</script>

输出：

How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

2.数字转化为字符串有哪几种方法？

toString()；String()；" "+value

3.说一说闭包？优势？缺点？

闭包就是可以读取其余函数内部变量的函数，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成‘定义在函数内部的函数’，它就是将函数内部和函数外部连接起来的一座桥梁。因为闭包会使函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，解决方法是在退出函数以前将不使用的局部变量所有删除。

4.说一说call,bind,apply的相同与不一样之处？

首先他们都是用来改变 this 指向的（其实我用的最多的是箭头函数，感受更简洁一点）。

call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为 null、undefined 的时候，默认指向 window。

apply 接受两个参数，第一个参数是要绑定给 this 的值，第二个参数是一个参数数组。当第一个参数为 null、undefined 的时候，默认指向 window。

事实上 apply 和 call  的用法几乎相同, 惟一的差异在于：当函数须要传递多个变量时, apply 能够接受一个数组做为参数输入, call 则是接受一系列的单独变量。

bind 和 call 很类似，第一个参数是 this 的指向，从第二个参数开始是接收的参数列表。区别在于 bind 方法返回值是函数以及 bind 接收的参数列表的使用。

5.你经常使用哪些ES6新特性？

我简单的说了几个，好比const、let声明变量，他们与var声明的区别。

箭头函数，模板字符串还有解构赋值等等。

6.你了解原型和原型链吗？

关于这方面我一年前写过有关面向对象的内容，这里不作解释了。

 

vue方面：

 

1.说一说vue的生命周期？

beforeCreate()、created()、beforeMount()、mounted()、beforeUpdate()、updated()、beforeDestory()、

destroyed()

2.vue的组件通讯几种方式？

父传子：props

子传父：emit

兄弟组件传递数据eventBus

具体实现不做解释了

3.keep-alive干吗用的？

是vue的一个内置组件，可使被包含的组件保留状态，避免从新被渲染

4.v-for循环中key的用处是什么？

key的做用主要是为了高效的更新虚拟DOM（有兴趣的能够看下虚拟DOM的Diff算法原理）

5.解释下双向绑定原理？

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。

1、实现一个数据监听器Observer，可以对数据对象的全部属性进行监听，若有变更可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每一个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，做为链接Observer和Compile的桥梁，可以订阅并收到每一个属性变更的通知，执行指令绑定的相应回调函数，从而更新视图
四、mvvm入口函数，整合以上三者

6.用过vuex吗？说一说工做流程？

vuex是对数据的集中式管理，在开发大中型项目须要不少公共数据的传递，咱们就能经过状态管理来实现。

大致流程是在组建components中能够经过vuex中解构的mapActions方法发送请求到actions进行业务逻辑处理，而后actions经过commit方法和mutations进行通信，由mutations修改state里边的数据状态。要想拿到state里边的数据须要在组建内经过vuex中结构的mapGetters方法到getters中读取state中的数据。