常見的前端面試題

寒江水Kevin發表於2019-03-26
前端面試題

前言

寫部落格主要是用來總結、鞏固知識點，加深自己對這個知識點的理解。同時希望能幫助到有需要的人。如有不正確的地方。可以在評論區指出。你們的支援。是我不斷進步的源泉。

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

1.vue的生命週期

我們先看張圖

alt

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

持續更新中。。。

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

相關文章