頭條日常實習生面經2018.11.28

摘要： 第一次大公司面試的面經 此次面試說來也有點匆忙，本沒想過自己會那麼快就想去面試大公司，並且把自己第一次面大公司的各種不足展現得一覽無餘。當時11月20號左右身邊一位朋友給了一位人超nice的師兄的內推，並且鼓勵我去投簡歷。最終戰勝了自己的膽怯，投了一份簡歷給內推的師兄。一兩天後hr就打電話...

第一次大公司面試的面經

此次面試說來也有點匆忙，本沒想過自己會那麼快就想去面試大公司，並且把自己第一次面大公司的各種不足展現得一覽無餘。當時11月20號左右身邊一位朋友給了一位人超nice的師兄的內推，並且鼓勵我去投簡歷。最終戰勝了自己的膽怯，投了一份簡歷給內推的師兄。一兩天後hr就打電話安排面試了。

沒想到面試是要連續著面的，當時面花了一個多小時過了一面，再花一個小時面二面，最終也止於二面。接下來就是本文的主題了。我把當時面試官通過牛課網線上面試平臺中寫給我做的題記錄了下來，其實從面試前就打算把面試學到的東西積累下來。接下來就進入本文的主題了，我也儘量把每一道題都寫上我的解題思路，希望能得到大家更多更好的意見。

一面

一、請問執行這段程式碼會輸出什麼。

let obj = {
name: 'bytedance',
getName() {
return this.name
}
}
let fb = obj.getName;
fb();

A：我當時好像是答undefined 。但我知道這不會是輸出”bytedance“ ，因為當obj.getNam e賦給fb 的時候它的this 也改變了，具體可以看我之前總結了一篇JavaScript 中的this 的文章。然後我後來我在瀏覽器中運行了一下程式碼發現是輸出"" 。。。

二、設計一個簡單的任務佇列，要求分別在1,3,4秒後打印出”1“，”2“，”3“

new Quene()
.task(1000, () => {
console.log(1)
})
.task(2000, () => {
console.log(2)
})
.task(1000, () => {
console.log(3)
})
.start()

function Quene() { ... }

A：講真，看到這道題的時候我第一時間感到自己完了，雖然也只寫了一點，沒有全部做出來，然後就跳過這道題了。面試完就努力著把這道題寫出來

function Quene() {

this.task = (time, callback) => {

setTimeout(callback, time);
// console.log(this)
return this;
};
this.start = () => {
return this;
};

}

雖然這樣即使最後面不用寫.start() 也能打印出來。。。希望能得到指點Q_Q

三、給定一個升序整數陣列[0,1,2,4,5,7,13,15,16]，找出其中連續出現的數字區間如下：

["0->2",”4->5“,"7","13","15->16"]

A:

function Arr(arr) {
var len = arr.length,
j,
newArr = [],
str = '';
for (var i = 0; i < len; i++) {
j = i;
if (arr[i] + 1 === arr[j + 1]) {
while (arr[j] + 1 === arr[j + 1]) {
str = '->' + arr[j + 1];
j++;
}
str = arr[i] + str;
newArr.push(str)
i = j
} else {
newArr.push(arr[i].toString())
}
}
return newArr;
}

還算比較簡單的演算法題吧，還好當時做出來了，不然可能就止步於此。。也希望大家能談點自己對這道題的解法

四、TCP協議建立連線的過程、程序間通訊的方式有哪些

TCP 建立連線的過程即為三次握手，三次握手可以參考我之前發的文章，網上也有很多資料，這裡就不細講。

至於程序間的通訊方式，當時沒能打出來（這就涉及到我的知識盲區了【哭喪臉】），後來網上查了一下，有：

pipe
FIFO
MessageQueue
SharedMemory
Semaphore
Socket
sinal

這裡有個題外話，如果面試官問瀏覽器視窗間的通訊，那麼有以下幾種：

1.localStore

localStorage.setItem("name", name);

2.cookie + setInterval

在頁面A 設定一個使用setInterval 定時器不斷重新整理，檢查cookie 的值是否發生變化，如果變化就進行重新整理的操作。

由於cookie 是在同域可讀的，所以在頁面B 改變cookie 的值，頁面A 是可以拿到的。

五、用純CSS建立一個三角形的原理是什麼？如何實現？

A：用CSS建立一個三角形的原理是分別設定上下左右的border 屬性，中間內容為0面積。實現：

#box {
width: 0;
height: 0;
border-left: 50px transparent solid;
border-right: 50px transparent solid;
border-top: 50px transparent solid;
border-bottom: 50px black solid;
}

六、0.1 + 0.2 > 0.3 返回什麼？

A：true 。分別轉成2進位制。

七、類陣列物件是什麼？

剛開始還對這個類陣列感到懵逼，後來面試官一提醒函式的引數馬上領悟到就是偽陣列。

A：只包含使用從零開始，且自然遞增的整數做鍵名，並且定義了length 表示元素個數的物件。

• function內部的arguments物件就是一個類陣列物件
• DOM方法document.getElementsByTagName()...也是返回一個類陣列物件

八、什麼是同源策略，為什麼會有這種策略

源包括三個部分：協議、域名、埠（HTTP協議的預設埠是80 ）。如果其中有任何一個部分不同，則源不同。即為跨域。

限制一個源載入的文件或指令碼與來自另一個源的資源進行互動。這是一個用於隔離潛在惡意檔案的關鍵的安全機制。（來自MDN 的解釋）

九、什麼CORS

A：受同源策略的限制，支援跨域；一種新的通訊協議標準。可以理解成同時支援同源和跨域的Ajax 。

MDN 解釋：跨域資源共享(CORS ) 是一種機制，它使用額外的HTTP 頭來告訴瀏覽器讓執行在一個origin (domain) 上的Web 應用被准許訪問來自不同源伺服器上的指定的資源。當一個資源從與該資源本身所在的伺服器不同的域、協議或埠請求一個資源時，資源會發起一個跨域HTTP 請求。

十、什麼是OPTIONS請求

A：OPTIONS 請求是HTTP 請求的一種方法，返回伺服器針對特定資源所支援的HTTP 請求方法，也可以利用向web 伺服器傳送‘*’ 的請求來測試伺服器的功能性

然後一面就這樣結束了，面試官也直接跟我說我通過了一面，我也問了一些問題後就結束面試了。我趕緊把平臺上的面試記錄記下來，過了幾分鐘，當我還沉浸在通過一面的愉悅和全身心已經放鬆了的情況下，發現手機有幾個未接電話，然後又再打進了一個，接通電話後對方是頭條hr小姐姐，問我說現在可以二面了，二面的面試官已經在平臺上等著了。。。好吧，這太突然了，我馬上趕赴戰場。

<hr/>

二面

一、fetch

A：Fetch API 提供了一個獲取資源的介面（包括跨域請求）。無論請求成功與否，它都返回一個 Promise 物件；

二、用Promise實現延遲3秒後輸出 delay(3000).then(f,e)

A:

function delay(timer) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve();
}, timer)
})
}

三、XSS/CSRF

XSS ：跨站指令碼（Cross-site scripting ）

通過提交或其他方式例如釋出評論，其中含有HTML 或JavaScript 的程式碼，如果伺服器沒有過濾掉這些指令碼，這些指令碼在一些情況下就可能會執行。

1. 避免XSS 的方法之一就是過濾使用者提供的內容，如<,>,script ;
2. cookie 設定HttpOnly 屬性

CSRF ：跨站請求偽造（Cross-site request forgery ）

是一種劫持受信任使用者向伺服器傳送非預期請求的攻擊方式，即在使用者登陸某個平臺化拿到使用者的登陸憑證後傳送偽造請求

1. 防範CSRF 的方法之一就是通過驗證碼
2. Referer Check ，根據HTTP 協議，在HTTP 頭中有一個欄位叫Referer ，它記錄了該HTTP 請求的來源地址。通過Referer Check ，可以檢查請求是否來自合法的”源”。
3. 新增token 驗證，可以在HTTP 請求中以引數的形式加入一個隨機產生的token ，該token 不存在與cookie 中，並在伺服器端建立一個攔截器來驗證這個token ，如果請求中沒有token 或者token 內容不正確，則認為可能是CSRF 攻擊而拒絕該請求。

四、圖片懶載入原理 （lazy image）

var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判斷是否已空閒，如果在執行中，則直接return
return;
}

canRun = false;
setTimeout(function(){
// 這裡載入圖片
console.log("函式節流");
canRun = true;
}, 500);
};

五、上傳圖片

1. 表單上傳

(1). 提供form 表單，method 必須是post 。

(2).form 表單的enctype 必須是multipart/form-data 。

1. ajax 上傳

• ajax 和FormData 可實現頁面無重新整理的檔案上傳效果

六、將一些ES6的新特性

可以參考之前寫的文章，不過當時到了後面真是精疲力竭，連let 和const 都沒有說出來。。。

七、jsbridge

問到這個概念的時候我不清楚，記得當前前一兩天掘金剛發一篇相關的文章給我，然而當時沒去看。。

JSBridge 簡單來講，主要是 給JavaScript 提供呼叫Native 功能的介面，讓混合開發中的“前端部分”可以方便地使用地址位置、攝像頭甚至支付等Native 功能。是Native 和非Native 之間的橋樑，它的核心是構建Native 和非Native 間訊息通訊的通道，而且是雙向通訊的通道。

二面其中也包含一些IQ 題，還有後面問我如果實習能實習多久我說3個月。之後第二天就收到把我簡歷”丟進“公司人才庫的郵件了。

當然這只是其中一部分題目，一些面試官口頭問的我當時面試完真是超級累也忘了記錄下來。總之，感覺頭條還是會比較重視演算法和新技術。

希望這一兩個月能夠好好把握，春招再戰！！