2018頭條春招前端實習生面試題目總結

下午去了頭條總部面試前端崗位，掛在二面...本身基礎仍是有些差，在這裏總結一下兩輪面試的題目：

一輪面試

typeof實現的原理是什麼？

https://ecma262.docschina.org/#sec-typeof-operator https://stackoverflow.com/questions/45462182/transform-a-javascript-object-to-function-manually https://stackoverflow.com/questions/29353177/what-is-base-value-of-reference-in-ecmascriptecma-262-5-1

js繼承是如何實現的？原理是什麼？

解釋了一下js的原型鏈，但感受表達的不夠清楚。發現內心明白是一回事，說明白又是另外一回事啊

給一個function A一個function B，A中有屬性手寫實現B繼承A。並作到儘量優化的繼承實現

當時準備寫一下寄生組合式的繼承方式，不過手寫過程當中貌似寫錯很多內容，手寫代碼能力仍是要提升。 寄生組合式繼承實現：

function inheritPrototype(SuperType, SubType) {
    var prototype = Object.create(SuperType.prototype);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

function SuperType(props) {
    this.props = props;
}

function SubType(props) {
    SuperType.call(this, props);
}

inheritPrototype(SuperType, SubType);
複製代碼

具體到A和B即A爲SuperType，B爲SubType。
另附Object.create()的實現，在傳入一個參數時Object.create()和下面的object()行爲相同。(Object.create()可選傳入第二個參數，其中能夠定義新對象的額外屬性，如Object.create(SuperType, {name: {value: 'Test'}})

function object(obj) {
    function F() {};
    F.prototype = obj;
    return new F();
}
複製代碼

一個簡單的算法題：求一個數組中第K大的數字

手寫原生ajax請求

1. 寫完後面試官在if (xhr.readyState == 4 && xhr.status == 200)的地方又提了不少狀態碼的問題，好比此處的status換成201可不能夠
2. 由於我直接寫了var xhr = new XMLHttpRequest()，沒有提供IE的兼容，面試官又問了IE兼容的問題。

比較完備的答案：

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        // 兼容IE5和IE6
        return new ActiveXObject('Microsoft.XMLHttp');
    }
}

var xhr = createXHR();
xhr.onReadyStateChange = function() {
    if (xhr.readyState == 4) {
    // 狀態碼爲200至300之間或304都表示這一請求已經成功
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            console.log(xhr.responseText)
        } else {
            ...
        }
    }
}
// GET
xhr.open('GET', url);
xhr.send();

// POST
xhr.open('POST', url);
xhr.send(data);
複製代碼

以後是面試官畫了一個草圖，要求用html和css進行實現，內容涉及到左側固定右側自適應、垂直居中等內容。草圖大概是這樣：

平時寫代碼的時候如何進行錯誤處理?

對react和虛擬DOM有了解嗎?

二輪面試

對html語義化有什麼瞭解嗎？有那些語義化的新標籤？

當時就答了一些語義化的標籤。總結一下：
語義化標籤即標籤自己的內容就能表示這個元素的意義給瀏覽者或者開發者。好比<div>和<span>就是沒有語義的元素。而<form>表示一個表單或者<table>表示表格就是語義化的標籤。
H5中提供了不少新的語義元素，好比：

• <header> <nav> <aside> <footer>幾個標籤用來表示頁面的頭部、導航和側邊欄等不一樣部分。
• <article>元素表示文檔、頁面、應用或網站中的獨立結構，其意在成爲可獨立分配的或可複用的結構，如在發佈中，它多是論壇帖子、雜誌或新聞文章、博客、用戶提交的評論、交互式組件，或者其餘獨立的內容項目。
• <section>包含了一組內容及其標題。
• <figure>規定獨立的流內容如圖像圖表照片代碼等，<figcaption>定義<figure>的標題。

看過哪些Bootstrap源碼，Bootstrap有什麼特性？

這裏就說了一下Bootstrap柵格化系統的大概實現，說了一下Bootstrap的響應式。而後面試官又順帶問了Bootstrap如何實現的響應式，我說使用了css的@media。而後他又問我還有沒有什麼其餘的特性當時沒想起來

對flex瞭解有多少？flex有哪些基本的屬性？

就答了一下基本的justify-content和align-items flex-direction等等

如何實現兩列等高佈局？

在問的過程當中還問了height: 100%相關的問題

如何清除浮動？

這裏就打了使用clear: both，面試官說還有什麼別的方法嗎，說只有clear: both還不夠，沒有答上來。

原理：清除浮動主要的原理就是在浮動元素的父元素上建立塊格式化上下文（Block Formatting Context，BFC），一個BFC中全部的元素都會包含在其中包括浮動元素。不少方式均可以建立一個BFC，最經常使用的有如下幾個：

1. display爲flex inline-block inline-flex table-cell的元素
2. overflow爲visible以外的元素
3. position爲absolute或fixed的元素
4. float爲none以外的元素

因此只要在float元素的父元素上應用以上屬性便可在父元素上建立BFC以清除浮動。 另外，使用clear:both也能夠清除浮動，最好的方法是在父元素上使用僞類:after添加這個用於清除浮動的元素，如：

.parent-box:after{
    clear: both;
    content: '';
    display: block;
}
複製代碼

這裏的內容來自這篇文章的總結，寫的很是好推薦你們讀一讀

樣式權重的優先級？

!important > 行內樣式 > id > class > tag 樣式的權重能夠疊加
內容轉自:https://juejin.im/post/5a998991f265da237f1dbdf9

css中單位em和rem有什麼區別？

• rem是相對於根的em，rem即root的em，相對於html根元素
• em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。事實上，根據W3標準，em單位是相對於使用em單位的元素的字體大小。父元素的字體大小能夠影響em值是由於繼承。
• 總結：rem單位翻譯爲像素值是由html元素的字體大小決定的。此字體大小會被瀏覽器中字體大小的設置影響，除非顯式重寫一個具體單位。em單位轉爲像素值，取決於他們使用的字體大小。 此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。

這部份內容轉自: https://www.w3cplus.com/css/when-to-use-em-vs-rem.html © w3cplus.com

如何將文字超出元素的部分變成省略號（...）

若是實現單行文本溢出變成省略號，須要幾個css屬性結合使用：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
複製代碼

多行則在webkit內核瀏覽器中能夠獲得比較滿意的效果，下面指定了顯示2行，多餘2行的部分顯示爲省略號：

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
複製代碼

手寫一個倒計時頁面

1. 這裏由於我用了var date = new Date()，因此面試官就又問了這個date的時間是什麼時間？是當前時區的事件仍是電腦的時間仍是什麼別的？這個沒答上。答案是若是沒有輸入任何參數，則Date的構造器會依據系統設置的當前時間來建立一個Date對象。
2. 由於我自己用的setInterval()去實現倒計時，裏面寫的是1000毫秒執行一次，因此面試官就又問了一下js任務隊列的內容，問我是否是瀏覽器能保證1000毫秒執行一次。我說因爲任務隊列的關係主線程不必定能保證1000毫秒執行一次，他又問我有什麼優化方式嗎？我說可使用requestAnimationFrame進行循環調用，這樣瀏覽器自身會進行優化，面試官又問我瀏覽器是怎麼優化的(真是一問到底)，這裏就答不上來了。

如何判斷一個變量是否是數組？

js中instanceof是如何實現的？

使用過ES6哪些新特性，js的基本數據類型是哪些？ES6中有新的數據類型嗎？

我就答了箭頭函數、Map、Set等，面試官問了箭頭函數的特色。ES6中多了Symbol這個新的原始數據類型，之前沒怎麼使用過，沒有答上來。而後在提到Promise的時候問了Promise的問題：

Promise是如何實現的？能不能本身寫一個函數實現Promise？

之前沒有寫過，就大概本身寫了一個函數，結果面試官提出了我寫的代碼的各類問題，總之就是寫的基本是錯的。。

http和https的區別？https的特色？

最常問的：從輸入url到網頁呈現的過程

這裏問到了發送http請求和DNS查詢的順序前後問題。

DOM樹和渲染樹的加載前後？html、css、js的加載順序是什麼？(大概是這麼問的)

這裏除了加載順序還深刻的問了好比DOM樹是徹底加載完畢在進行css的渲染嗎？仍是一邊進行DOM樹的構建一邊進行css的渲染？若是html中有一段js代碼進行很長時間的循環會不會影響頁面的呈現？ 這裏基本上被問倒了，由於沒仔細鑽研過加載順序的問題。總共的問題想起來的就這些，面完以後感受本身的基礎仍是不夠好，再就是面試時有些緊張，平時會的不少東西表達不出來。 但願對準備找前端崗位的你們有所幫助。