常见的前端面试题

前言

写博客主要是用来总结、巩固知识点，加深本身对这个知识点的理解。同时但愿能帮助到有须要的人。若有不正确的地方。能够在评论区指出。大家的支持。是我不断进步的源泉。

金三银四跳槽季，我相信不少人应该都在看新的机会吧（其实就只有我了）。把一些常见的自认为比较经典的面试题在这里作个梳理。同时也给再给找工做的小伙伴们一个参考。

1.vue的生命周期

咱们先看张图

这是vue官方文档里的生命周期图，我结合这张图来讲下个人理解 vue的生命周期一共分为8个阶段。

1.beforeCreated阶段此时是获取不到props，data里的任何数据，由于此时数据还未初始化 created阶段能够访问以前访问不到的数据，但此时组件尚未挂载，因此el是访问不到的。

2.beforeMounted阶段开始执行render函数，el和data数据开始执行。但此时仍是挂载在虚拟dom上 到了mounted阶段才开始挂载到实际的dom上。此时咱们能够进行ajax请求了。

3.beforeUpdated和updated分别是在数据更新的时候调用

4.最后就是销毁组件的钩子函数 beforeDestroy 和 destroyed。前者适合移除事件、定时器等等，不然可能会引发内存泄露的问题。而后进行一系列的销毁操做，若是有子组件的话，也会递归销毁子组件，全部子组件都销毁完毕后才会执行根组件的 destroyed 钩子函数。

2.什么是宏任务、微任务以及它们之间的区别

因为技术深刻程度有限，我只能简单的说下我对宏任务微任务的理解：

js是单线程执行的，因此在队列中会优先执行宏任务，可是若是宏任务里面还有微任务的话，会优先把微任务执行完再去执行下一个宏任务。具体看这里

3.webpack和gulp的区别

Gulp 的定位是 Task Runner, 就是用来跑一个一个任务的

咱们能够经过gulp配置task来编译sass，less。进行图片压缩，代码压缩等。可是gulp不能解决js模块的问题。这时候webpack就出现了。webpack能够把css，js。图片等都打包成一个bundle。因此webpack也叫file bundler

同时webpack为了解决require不一样的文件。引入了核心之一的loader 咱们能够经过sass-loader把sass编译成css。 经过babel-loader能够把es6等转换成浏览器识别的es5等。

webpack的核心就是entry，output，loader，puglin。

4.前端路由有那几种方式

有hash，history两种。 hash模式主要是经过hashchange来实现 history模式主要是经过pushstate和popstate方法。

5.浏览器的渲染过程

1.用户输入url

2.浏览器对输入的url进行DNS解析

3.创建TCP链接(三次握手)

4.浏览器发起http请求

5.服务器响应http请求

6.销毁TCP链接(四次挥手)

7.浏览器经过渲染引擎进行页面渲染。

6.for in 和 for of 的区别

for in 在数组和对象中的使用

//遍历数组
var array=[1,2,3,4,5];
for(let item in array ){
    console.log(item)   // 0 1 2 3 4
}

//遍历对象
var obj={
    name:'leo',
    age:26,
    job:'FED'
}
for(let item in obj){
    console.log(item) // name age job
}
复制代码

for of 在数组和对象中的使用

//遍历数组
var array=[1,2,3,4,5];
for(let item of array ){
    console.log(item)   // 1 2 3 4 5
}

//遍历对象
var obj={
    name:'leo',
    age:26,
    job:'FED'
}
for(let item of obj){
    console.log(item) //  Error obj is not iterable
}
复制代码

从上面能够看出:for in 用来遍历数组和对象的key或索引。for of用来遍历value。同时for of不能用来遍历普通对象须要搭配Object.keys()来使用。以下

var obj = {
    name: 'leo',
    age: 26,
    job: 'FED'
}
let objValue = Object.keys(obj);
for (let item of objValue) {
 console.log(obj[item])   // leo 26 FED
}
复制代码

7.小程序中组件如何进行通讯

小程序中的组件如何建立，这里就不详细说明了。请移步官方文档查看详细教程

咱们主要来讨论下小程序中的组件如何进行通讯

1.页面如何向自定义组件传递数据

//页面使用自定义组件
<online userList="{{list}}"></online>

//组件online.js
Component({
    properties:{
        userList:{
          type:Array,
          value:[],
         }
    }
})
复制代码

这样自定义组件就能拿到页面的list数据了，怎么样是否是很简单。

2.自定义组件如何传递数据给页面

跟vue相似，组件间的数据交互主要是经过自定义事件。

自定义组件触发事件时，须要使用 triggerEvent 方法，指定事件名、detail对象和事件选项： 来直观的看代码：

<!-- 在自定义组件online中 -->
<button bindtap="onTap">点击这个按钮将触发myEvent事件</button>
Component({
    properties:{},
    methods:{
        onTap() {
          // detail对象，提供给事件监听函数 (须要带到主页面的数据放这里)
          const myEventDetail = {
            name:'leo',
            age:26
          } 
          //触发事件的选项
          //bubbles为事件是否冒泡 
          //composed 事件是否能够穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其余任何组件内部
          //capturePhase 事件是否拥有捕获阶段
          const myEventOption = {
              "composed": true
          } 
          this.triggerEvent('myEvent', myEventDetail, myEventOption)
        }
    }
})

<!--在页面中监听自定义事件-->
<online bind:myEvent="getData"></online>
getData (eventDetail) {
    console.log(eventDetail)
    // detail 全部的子组件的数据，都经过该参数的detail属性暴露出来
}

复制代码

3.兄弟组件之间如何进行数据通讯

一样的兄弟组件之间的通讯业能够经过自定义事件来解决。可是小程序中还为咱们提供了另外一种更轻巧的方法。能够经过relations属性来解决。 有以下组件

<online>
    <chat></chat>
</online>
复制代码

两个组件捕获到对方组件的实例，是经过 this.getRelationNodes()方法。既然获取到了对方组件的实例，那么就能够访问到对方组件上的data, 也能够设置对方组件上的data, 可是不能调用对方组件上的方法。

<!--在online组件中-->
Component({
    relations:{
        './chat': {
            type: 'child',
            linked:function(target){  }  // target是组件online的实例，
            linkChanged: function(target){}
            unlinked: function(target){}
        }
    },
    methods:{
        test () {
            var nodes = this.getRelationNodes('./chat')
            var component_b = nodes[0];
            
            // 获取到b组件的数据
            console.log(component_b.data.name)
            // 须要调用对方组件的setData()方法来设置
            component_b.setData({
                name:'leo93'
            })
        }
    }
})

<!--在chat组件中-->
Component({
    relations:{
        './online':{
            type:'parent'
        }
    },
    data:{
        name:'leo'
    }
})
复制代码

注意：必须在两个组件定义中都加入relations定义，不然不会生效。

本组件没法获取本组件的实例，使用this.getRelatonsNodes('./ path_to_self ') 会返回一个null

type 能够选择的 parent 、 child 、 ancestor 、 descendant

这里有篇文章把小程序的组件通讯讲的很清楚

8.exports和module.exports,export和export default他们之间的区别

首先exports和module.exports 都是属于node模块里的

export和export default属于ES6模块里

exports 是属于module.exports的一个引用

export与export default都可用于导出常量、函数、文件、模块等

在一个文件或模块中，export、import能够有多个，export default仅有一个

经过export方式导出，在导入时要加{ }，export default则不须要

export能直接导出变量表达式，export default不行。

9.微信中openId和unionId的区别

二者长度不同

openId=28;

unionId=29;
复制代码

openId同一用户同一应用中是惟一的

unionId同一用户在同一个微信公众平台的多个应用中是惟一的。

10.写出你所知道的全部让一个div元素垂直水平居中的方法

关于这个问题，能够看个人这篇文章

11.什么是原型，原型链

js中每当定义一个对象的时候，对象中都会包含一些预约义的属性，其中就包括prototype。prototype执行对象的原型。使用原型对象的好处是，全部对象的实列都包含他的属性和方法 原型链主要用来解决继承的问题。 每一个对象都有一个原型对象，经过proto指针指向其原型对象，并从中继承方法和属性，同事原型对象也可能拥有原型，这样一层一层，最终指向null，这种关系被称为原型链。

持续更新中。。。

若有描述不当的地方，恳请指正。谢谢！