前端面試100問（11-21）

 內容的起源來自於掘金上的一篇文章——《前端 100 問：能搞懂 80% 的請把簡歷給我》

木易楊前端進階，《前端 100 問：能搞懂 80% 的請把簡歷給我》

 

系列筆記：

• 前端面試100問（1-10）
• 前端面試100問（11-21）

 

題11：算法手寫題

已知以下數組：

var arr = [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10];

編寫一個程序將數組扁平化並去除其中重複部分數據，最終獲得一個升序且不重複的數組。

答： 參見 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/8

這道題稍微有點複雜，即便了解了其中的知識點，想要徹底獨立手寫一個方法出來仍是很難。跳過。

 

題12：JS異步解決方案的發展歷程以及優缺點

答：每日技術：JavaScript異步編程的4種方法

 

題13：Promise構造函數是同步執行仍是異步執行，那麼then方法呢？

答：通過前面幾個問題的學習，這道題我能夠答一下了。個人理解是Promise裏面的代碼是當即執行的，至關因而同步，resolve結果後，then()裏的代碼時異步的。

 

題14：情人節福利，如何實現一個new?

答：這道題到底在考什麼？涉及到哪些知識點呢？懵~

看《每日壹題及答案彙總》討論區Hiker9527的答案：

先理清楚new關鍵字調用函數的具體過程，那麼寫出來就很清楚了

1. 首先建立一個空的對象，空對象的__proto__屬性指向構造函數的原型對象
2. 把上面建立的空對象賦值構造函數內部的this，用構造函數內部的方法修改空對象
3. 若是構造函數返回一個非基本類型的值，則返回這個值，不然上面建立的對象。

function _new(fn, ...arg) {
    var obj = Object.create(fn.prototype)
    const result = fn.apply(obj, ...arg)
    return Object.prototype.toString.call(result) == '[object Object]' ? result : obj;
}

 

mongonice的回答：

new運算符都作了哪些操做呢？

1. 建立了一個新對象（是Object類型的數據）
2. 將this指向新對象
3. 將建立的對象的原型指向構造函數的原型
4. 返回一個對象（若是構造函數自己有返回值且是對象類型，就返回自己的返回值，若是沒有才返回新對象）

function mynew() {
    // 1.建立一個新對象
    const obj = Object.create({});  // 也能夠寫成 const obj = {}
    // 2.將this指向該對象
    let Fn = [].shift.call(arguments);  // 把構造函數分離出來
    let returnObj = Fn.apply(obj, arguments); // 經過apply將this指向由Fn變爲obj

    // 3.將新對象的原型指向構造函數的原型
    obj.__proto__ = Fn.prototype;

    // 4.返回對象（若是構造函數有返回對象，那麼就返回構造函數的對象，若是沒有就返回新對象）
    return Object.prototype.toString.call(returnObj) == '[object Object]' ? returnObj : obj;
}

 

題15：簡單講解一下http2的多路複用

ZodiacSyndicate的回答：

HTTP2採用二進制格式傳輸，取代了HTTP1.x的文本格式，二進制格式解析更高效

多路複用代替了HTTP1.x的序列和阻塞機制，全部的相同域名請求都經過同一個TCP鏈接併發完成。

在HTTP1.x中，併發多個請求須要多個TCP鏈接，瀏覽器爲了控制資源會有6-8個TCP鏈接的限制。

在HTTP2中同域名下全部通訊都在單個鏈接上完成，消除了因多個TCP鏈接而帶來的延時和內存消耗。單個鏈接上能夠並行交錯的請求和響應，之間互不干擾。

 

sisterAn的回答：

在HTTP/1中，每次請求都會創建一次HTTP鏈接，也就是咱們常說的3次握手和4次揮手，這個過程在一次請求過程當中佔用了至關長的時間，即便開啓了Keep-Alive,解決了屢次鏈接的問題，可是依然有兩個效率上的問題：

1.串行的文件傳輸。當請求a文件時，b文件只能等待，等待a鏈接到服務器、服務器處理文件、服務器返回文件這三個步驟。咱們假設這三步用時都是1秒，那麼a文件用時爲3秒，b文件傳輸完成用時爲6秒。依此類推。

2.鏈接數過多。咱們假設Apache設置了最大併發數爲300，由於瀏覽器限制，瀏覽器發起的最大請求數爲6，也就是服務器能承載的最高併發爲50，當第51我的訪問時，就須要等待前面某個請求處理完成。

HTTP2的多路複用就是爲了解決上述的兩個性能問題。

在HTTP2中，有兩個很是重要的概念，分別是幀（frame）和流（stream）。

幀表明着最小的數據單位，每一個幀會標識出該幀屬於哪一個流，流也就是多個幀組成的數據流。

多路複用，就是在一個TCP鏈接中能夠存在多條流。換句話說，也就是能夠發送多個請求，對端能夠經過幀中的標識知道屬於哪一個請求。經過這個技術，能夠避免HTTP舊版本中的隊頭阻塞問題，極大的提升傳輸性能。

 

題16：談談你對TCP三次握手和四次握手的理解

答：每日技術：讀《做爲前端的你瞭解多少tcp的內容》筆記

 

插播一提

題60：已知以下代碼，如何修改才能讓圖片寬度爲300px?注意下面代碼不可修改。

<img src="1.jpg" style="width:480px!important;" />

答：

方法一：css方法max-width:300px;覆蓋樣式 （親測有效）

max-width: 300px;

方法二：transform: scale(0.625); 按比例縮放圖片（親測有效）

transform: scale(0.625);

方法三：js方法

document.getElementsByTagName("img")[0].setAttribute("style", "width:300px!important;");

方法四：

box-sizing: border-box;
padding: 90px;

 

 

題17：A、B機器正常鏈接後，B機器忽然重啓，問A此時處於TCP什麼狀態？（超綱題）

答：由於B會在重啓以後進入TCP狀態機的listen狀態，只要當A從新發送一個數據包，B端應該會主動發送一個帶rst位的重置包來進行鏈接重置，因此A應該在syn_sent狀態。

 

題1八、19 React相關，先跳過

 

題20：介紹下npm模塊安裝機制，爲何輸入npm install就能夠自動安裝對應的模塊？

答：每日技術：npm模塊安裝機制

 

題21：有如下3個判斷數組的方法，請分別介紹它們之間的區別和優劣

Object.prototype.toString.call()
instanceof
Array.isArray()

答：

1.Object.prototype.toString.call()

每個繼承Object的對象都有toString方法，若是toString方法沒有重寫的話，會返回[object type]，其中type爲對象的類型，但當除了Object類型的對象外，其餘類型直接使用toString方法時，會直接返回都是內容的字符串，因此咱們須要使用call或者apply方法來改變toString方法的執行上下文。

const an = ['Hello', 'An']

an.toString();  // "Hello,An"
Object.prototype.toString.call(an);  // "[object Array]"

這種方法對於全部基本的數據類型都能進行判斷，即便是null和undefined

Object.prototype.toString.call('An') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call({name: 'An'}) // "[object Object]"

Object.prototype.toString.call()經常使用於判斷瀏覽器內置對象時。

 

2.instanceof

instanceof的內部機制是經過判斷對象的原型鏈中是否是能找到類型的prototype

但instanceof只能用來判斷對象類型，原始類型不能夠。而且全部對象類型instanceof Object都是true

[] instanceof Object; // true

 

3.Array.isArray() 用來判斷對象是否爲數組

Array.isArray優於instanceof，由於Array.isArray能檢測iframes

var iframe = document.createElement('iframe')
// undefined
document.body.appendChild(iframe)
<iframe>​#document</iframe>​
xArray = window.frames[window.frames.length - 1].Array;
// ƒ Array() { [native code] }
var arr = new xArray(1, 2, 3);
// undefined
Array.isArray(arr)
// true
arr instanceof Array
// false

Array.isArray的缺點是在老瀏覽器須要polyfill

假如不存在Array.isArray()，則在其餘代碼以前運行下面的代碼將建立該方法。

if (!Array.isArray) {
    Array.isArray = function(arg) {
        return Object.prototype.toString.call(arg) === '[object Array]'
    }
}