常見的前端面試題

前言

寫博客主要是用來總結、鞏固知識點，加深本身對這個知識點的理解。同時但願能幫助到有須要的人。若有不正確的地方。能夠在評論區指出。大家的支持。是我不斷進步的源泉。

金三銀四跳槽季，我相信不少人應該都在看新的機會吧（其實就只有我了）。把一些常見的自認爲比較經典的面試題在這裏作個梳理。同時也給再給找工做的小夥伴們一個參考。

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，這種關係被稱爲原型鏈。

持續更新中。。。

若有描述不當的地方，懇請指正。謝謝！