2021最新~某知名軟體服務商的前端工程師筆試題——看完你也可以進大廠（附帶答案和解題思路）

摘要：
本片文章中的題目均來自大廠，這些企業是行業內的標桿，代表了行業的最高水準，經過了層層篩選得出了一些較好的題目，難易適中，內容豐富，筆試面試中必考或者常規試題，記錄分享在此，希望看完對你有一定的幫助，

在本片文章中，我詳細記錄了做題時的想法和遇到的問題，將解題思路一絲不茍的記錄了下來，在結合之后查閱檔案，對題目的答案做出了詳細的解釋，并對知識點做出了充分的補充，

如果文中有的地方語意有偏差，或者解釋不充分，歡迎大家在文章底部留言或者私信我，我會虛心學習并及時做出修改，

文中可能會出現沒有回答或未解決的問題，因為我目前的知識量著實有限，無法每一道題都給出精確地解釋，希望各位同學在看到之后，能夠在下方評論區回復或私信我對其問題進行解答，這樣做的目的，是為了增加文章的互動性，能夠讓更多小伙伴們參與進來，對知識點的研究更加充分透徹，

1. HTML5的新特性不包括？

A. 語意化的Web

B. 削弱對第三方插件的依賴

C. 新增SVG繪畫

D. 引入Web Workers規范

答案：C

解題思路：SVG是一種用XML描述圖形的標記語言

2. 以下屬性選擇器表示屬性值以“val-”開頭的是？

A. [attr^="val"]

B. [attr~="val"]

C. [attr|="val"]

D. [attr$="val"]

答案：C

解題思路：

• A. [attr^="val"] // 表示屬性值以字串型別的“val”開頭
• B. [attr~="val"] // 表示屬性值用空格分隔為多個值，其中一個值與字串"val"相同
• C. [attr|="val"] // 表示屬性值以“val-”開頭
• D. [attr$="val"] // 表示屬性值以字串“val”結尾

3. HTTP 請求報文由5部分組成，以下不屬于請求報文的是?

A. 請求方法

B. 狀態碼

C. HTTP版本

D. 請求首部

答案：B

解題思路：狀態碼是http回應報文中的組成部分，

4. 下列選項不是Array（即陣列）物件的方法是？

A. push（）

B. shift()

C. split()

D. join()

答案：C

解題思路：split屬于String和RegExp物件，能將字串分割為陣列，

5. 以下關于排序演算法的描述中正確的是？

A. 快速排序的平均時間復雜度為O(nlogn)，最壞時間復雜度為O(nlogn)

B. 推排序的平均時間復雜度為O(nlogn)，最壞時間復雜度為O(n^2)

C. 冒泡排序的平均時間復雜度為O(n^2)，最壞時間復雜度為O(n^2)

D. 歸并排序的平均時間復雜度為O(nlogn)，最壞時間復雜度為O(n^2)馬上！沒事的話，具體還是發視頻，

答案：C

解題思路：各種演算法的性能見下表

6. 怪異模式中的怪癖行為包括

A. 寬度和高度的演算法與W3C盒模型不同

B. 在表格中的字體樣式，如front-size等不會繼承

C. 當內容超出容器高度時，會自動剪裁超出的內容

D. 顏色值必須用16進制標記法

答案：A、B、D

解題思路：在怪異模式中，當內容超出容器高度，將會把容器拉伸而不是溢位

7.可以作為css中display屬性值的有

A. list-item

B. table

C. run-in

D. flex

答案：A、B、C、D

解題思路：在css中用display屬性指定元素的盒型別，以上四個選項都是他的值，

• A. list-item // 串列
• B. table // 表格
• C. run-in // 根據周圍元素的盒型別來決定當前元素的盒型別
• D. flex // 伸縮盒

8. 下面對于HTTP狀態碼描述正確的是？

A. 200表示請求已被正常處理你的室友

B. 304表示資源未被修改

C. 403表示請求以為服務器拒絕

D. 503表示服務器無法處理請求

答案：A、B、C、D

解題思路：狀態碼的讓客戶端知道請求結果，服務器是成功處理的請求，還是出現了錯誤，又或者是不處理，題中四個選項都正確地描述了指定的狀態碼的含義，

9. 執行下面的代碼后，ul元素的高度是____px?

<style>
    li {
        width: 100px;
        height: 100px;
    }
</style>
<ul style="overflow: hidden;">
    <li style="float: left;"></li>
    <li style="float: left;"></li>
</ul>

答案：100px

解題思路：雖然ul元素包含一個浮動的子元素，但因為創造了bfc所以不會引起ul元素的高度塌陷，它的高度就是li元素的高度，

10. 4 + 3 + 2 + '1' = _____，'1' + 2 + 4 = _____，

答案：91、124

解題思路：這個就很簡單了，第一個是先做加法運算，在做拼接，第二個運算式由于第一個是字串，因此只做拼接操作

11. 執行下面的代碼后，在控制臺輸出的y為_____，

var y = 0,
    x = 1;
y = x+++x;

答案：3

解題思路： 由于遞增運算子++的優先級高于加法運算子，因此運算式x+++x，相當于(x++)+ x;先執行后置遞增操作，對運算元進行增量，并回傳未計算的值，也就是1，然后x變數在與自身相加，此時x變數已經為2，也就是1+2，最終結果為3

12. false == "0" 得到的結果為_____， false === "0" 得到的結果為_____，

答案：true，false

解題思路：相等運算子在進行比較時會進行型別轉換，全等運算子進行比較時不會進行型別轉換，

13. 執行（{ a: e, a: f } = {b: 5, a: 6})后，e的值為_____，f的值為______，

答案：6， 6

解題思路： 物件結構允許多個同名屬性，等號左側的物件中雖然包含了兩個a屬性，但兩個變數e和f都被成功賦值，

物件解構的內部機制是先找到同名屬性，讓后在賦值給對應的變數，真正被賦值的是后者，而不是前者，

在以上代碼中 a只是匹配模式，e，f才是變數，真正被賦值的是變數e，f而不是模式，

14. HTML和HTML5的區別有哪些？

答案： Html和html5的主要有以下五種區別，

舊版本的html比較依賴瀏覽器的插件，例如播放視頻需要安裝flash插件，

由于html5不再支持SGML，所以宣告檔案型別，DOCTYPE只有一，

html5消除了過時或冗余的元素，如font， Center.等

html5新增了的許多語意化的元素，如active header等核心功能如video canvas的，并提供更好的跨平臺支持，

隨著html5功能的不斷完善，促進了Web App與Hybrid App的發展，同時也影響了 Native App的市場占有率，

15. Css是指什么？

答案：Css即層疊樣式表是一種樣式語言，用于控制頁面的表現，外觀和內容排版，它對html來說是一種有效的補充，

16. 什么是外邊距塌陷？

答案：外邊距塌陷，也稱外邊距合并，是指兩個在正常流中相鄰的會計元素的外邊距，組合在一起變成單個外邊距，不過只有上下外邊距才會有塌陷，左右外邊距不會出現這種問題

17.請談一下對計算機網路的理解？

答案：在20世紀80年代計算機網路誕生，他能將一臺臺獨立的計算機相互連接，使得位于不同地理位置的計算機可以進行通信，實作資訊傳遞和資源共享，形成一組規模大，功能強的計算機系統，不過計算機要想在網路中正常通信，必須遵守相關網路協議的規則，常用的網路協議有tcp，udp，ip和http等，

18. JavaScript有哪些優勢和劣勢？

答案：

首先了解一下javascript的優勢，

• Javascript可在客戶端替服務器分攤掉一些作業，如資料驗證，數學計算等，從而減少和服務器的互動次數，降低了服務器的壓力，
• 用戶能夠快速得到頁面上的反饋，除了一些必須與服務器東西的吵，如資料提交，驗證昵稱重復等，這些操作會有無法避免的網路延遲，而其他在客戶端運行的大部分操作，都能得到及時反饋，
• 跨平臺，Javascript不會依賴作業系統，如windows，iOS等，只要有瀏覽器就能正常執行，
• 界面豐富，互動性強，javascript，可以控制檔案中的任何元素，定義元素的內容，樣式或行為用javascript代替css，實作復雜而多樣的影片或特效

再來了解一下javascript的劣勢，

• 兼容性低，各個瀏覽器對javascript的支持程度不同，同意他腳本放在不同瀏覽器中的執行結果會不同，有的可以完美執行，有的可能會提示錯誤，
• 安全性低，由于javascript在客戶端運行，用戶不但可以查看javascript源代碼，還能惡意嵌入代碼替換或禁用腳本，
• 中斷運行javascript是一種直譯語言，所以只要有一條出錯，那么就會直接停止運行，
• 權限限制，javascript不能直接與作業系統互動，中間有瀏覽器，瀏覽器只賦予了javascript很少的權限，像寫檔案操作都是不允許的，

19. 在DOM中，事件物件的兩個屬性target和currentTarget有什么區別？

答案：Target屬性指向的是事件目標，currentTarget屬性指向的是正在處理當前事件的物件，在發生事件傳播是target指向的可能不是定義時的事件目標，

20. 在http回應報文中會包含哪些首部？

答案：在http回應報文中會包含通用首部，物體首部，回應首部等，例如通用首部中的Connection用來管你持久連接，回應首部中的server表示服務器軟體的名稱和版本，物體首部中的content-encoding可指定內容編碼格式，告知客戶端，用這個編碼格式解壓，

21. 擴展運算子(...)的用途有哪些？

答案：擴展運算子的用途可簡單概括為以下3種

• 替代函式的apply()方法
• 簡化函式傳遞時的引數傳遞方式
• 處理陣列和字串

22. find() 和 indexOf() 有哪些區別？

答案：find() 是對indexOf() 的一種補充，indexOf() 只能通過全等匹配來搜索指定的值，而find() 可以自定義匹配條件，

23. 類有哪些成員？

答案：類的成員既可以是普通的原型方法或自有屬性，還可以是有特殊功能的建構式、生成器、靜態方法和訪問屬性等，并且成員名可以是運算式，

24. Shadow DOM 和 Virtual DOM之間有哪些區別？

答案：Shadow DOM是一種瀏覽器技術，為Web組件中的DOM和CSS提供了封裝，并且封裝的部分功能與主檔案的DOM保持分離，而Virtual DOM是一種有JavaScript類別庫基于瀏覽器API實作的概念，

25. Vue.js中的.sync修飾符有什么作用？

答案：.sync修飾符它是一個語法糖，可在宣告組件時省略updata:xxx事件，

為了解釋清楚這個問題，這里寫了一個demo來演示.sync的作用，我們看下面這段代碼，

<div id="app">
    {{sum}}
    <!-- 向子組件傳遞一個叫sum的資料, 值就是系結的資料 -->
    <!-- 默認監聽一個@update:sum="sum = $event" 事件觸發后會讓系結的引數等于傳遞的引數 -->
    <btn :sum.sync="sum"></btn>
</div>
<script>
    Vue.component('btn', {
        // 接受傳遞過來的sum屬性
        props: ['sum'],
        template: '<button @click="handler">點擊</button>',
        methods: {
            // 系結點擊事件 發布update:sum事件
            handler: function () {
                console.log(this.sum);
                this.$emit('update:sum', this.sum + 1)
            }
        },
    })
    new Vue({
        el: '#app',
        data() {
            return {
                sum: 0
            }
        },
    })
</script>

btn組件能接受從根實體傳遞過來的sum屬性，單擊模板中的按鈕會觸發組件上的"update:sum"事件，并傳入一個新值；在btn組件上宣告的update:sum事件，能接收傳過來的新值，并對sum進行更新；更新后的sum屬性又能傳遞給btm組件，從而實作了雙向資料系結，

26. 如何用純css的方式讓超出容器寬度的文本自動替換為省略號？

答案：可以使用text-overflow屬性，這個屬性用于顯示內容溢位時的省略號標記，如果內容太多，將超出部分替換為省略號... ，但是要實作這個效果，需要先滿足3個條件，那就是容器要有明確的寬度，強制在一行顯示以及隱藏溢位內容，代碼入下所示：

<style>
    div {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
    }
</style>
<div>
    文字是人類用符號記錄表達資訊以傳之久遠的方式和工具，現代文字大多是記錄語言的工具，人類往往先有口頭的語言后產生書面文字，很多小語種，有語言但沒有文字
</div>

把text-overflow設定為ellipsis后，就能將溢位的內容替換為省略號，

擴展：實作多行文本溢位的內容替換為省略號，

因使用了WebKit的CSS擴展屬性，該方法適用于WebKit瀏覽器及移動端；

<style>
    div {
        display: -webkit-box;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
</style>
<div>
    文字是人類用符號記錄表達資訊以傳之久遠的方式和工具，現代文字大多是記錄語言的工具，人類往往先有口頭的語言后產生書面文字，很多小語種，有語言但沒有文字
</div>

1. -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數， 為了實作該效果，它需要組合其他的WebKit屬性，常見結合屬性：
2. display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 ，
3. -webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 ，

27. 撰寫一個函式，能讓兩個并不大的小數正確相乘

答案：由于JavaScript中的浮點數計算精度遠遠不如整數，那么可以先將小數變為整數，在執行乘法運算，最后把小數點移動到指定位置，

function AccMul (num1, num2) {
    var result,   // 計算結果
        m = 0,    // 整數位數
        s1 = num1.toString(), // 轉為字串
        s2 = num2.toString();
    m += s1.split('.')[0].length
    m += s2.split('.')[0].length
    result = Number(s1.replace('.', '')) * Number(s2.replace('.', '')) // 讓兩個整數相乘
    result /= Math.pow(10, m)  // pow() 方法可回傳 x 的 y 次冪的值，  小數點往左移動指定位數
    return result
}
console.log(AccMul(2.3, 2.6));

28. 統計字串"xxxxyyydda"中每個字母出現的次數

答案：將字串結構為陣列，在創建一個空物件用于記錄統計的資料，然后回圈陣列，判斷物件中有沒有這個屬性有就++， 沒有就添加屬性賦值為 1，最后列印這物件就能得到各個字符出現的次數，

var str = "xxxxyyydda"
var arr = [...str]
var obj = {}
arr.forEach(item => {
    if (obj[item]) {
        obj[item]++
    }else {
        obj[item] = 1
    }
});
console.log(obj);

29. 假設下面div元素中的a元素，可以動態添加，現在要求單擊任何的a元素，都能讓它的自定義屬性data-digit的值和內容進行拼接，在用alert()方法輸出拼接后的結果，

<div id="container">
    <a href="#" data-digit='1'>按鈕</a>
    <li>dazjhda</li>
</div>

答案：可以采用事件委托的方式，為所有的元素添加點擊事件，在函式內部判斷是否是a標簽，如果不是a標簽直接結束函式，是a標簽就獲取元素的內容和自定義屬性的值，進行拼接用alert()方法輸出拼接后的結果，

var div = document.querySelector('#container');
div.addEventListener('click', function (event) {
    // 判斷元素是不是a標簽
    if(event.target.localName != 'a') return
    // 獲取自定義屬性的值和元素內容進行拼接
    alert(event.target.innerText + event.target.getAttribute('data-digit'))
})

30. 如何用ES6語法匯入模塊成員

答案：如果想匯入某個模塊的成員，可以使用import關鍵字，它的語法與匯出方式類似，也包含四個部分，分別是匯入識別符號、模塊路徑以及兩個關鍵字：import和from，

import xxx from 'path'

最后感謝認真看完這篇文章的小伙伴們，感謝有你們的點贊和鼓勵，學習之路漫長艱辛，因為有你們的陪伴，使我充滿了學習的動力，