關於該文章的說明
這是關於大廠面試題的整理，是一些個人覺得有價值的題和自己的錯題。所以本文適合刷筆試題的朋友看。
高中的時候記得每門學科都會有錯題本。前幾天做題就想着什么時候把自己練習的錯題整理到一起，玲瓏覺得筆試題做的不在多，而是能夠達到做一題會一類的效果。所以便有了這篇文章，文章也會隨着做題的數量越來越長。
也希望能和其他朋友一起討論前端的知識，一起進步，多學習點東西。
第一套：網易2020校招提前批
第五題
考點：數據結構中的排序
題目
解析
這道題考的是排序，那么我們就要知道每種排序的思想和特點。恰好直接插入排序符合題目說的要求。該排序有兩層循環，第一層將這個數組完整遍歷一遍控制趟數，第二層循環將准備插入的數與前面排好的數從后向前掃描比較大小。而希爾排序會考慮到分組。
第四題
考點：js的隱式類型轉換
題目：
在試圖輸出變量的時候會進行隱式轉換，自動調用變量的tostring和valueof方法。
做題必備小知識
和=的區別：
- 出現： 我們可以將=看作的嚴格模式，當的時候如果數據類型相同那么就會轉換成===；如果數據類型不同那么會自動的進行一次類型轉換，轉換成相同的類型后進行比較。
- 出現===：出現三個等號的時候，首先判斷的是類型是否相等，如果不相等就會返回false
valueOf方法和toString方法默認調用toString方法
- 這是為什么呢，我看的有些博客直接說默認調用toString並沒有說明原理。其實是這樣的，我們看下面的一個例子，雖然colors.valueOf()方法返回的還是一個數組，但是在alert輸出的時候隱式調用了toString方法，所以結果是相同的。
- 但是如果是數值運算優先調用valueOf()方法。
var colors = ["red", "blue", "green"]; // 創建一個包含3 個字符串的數組
alert(colors.toString()); // red,blue,green
alert(colors.valueOf()); // red,blue,green
alert(colors); // red,blue,green
解析
- 第一次輸出：arr==="";類型都不同，不會調用toString也不會調用valueOf。返回false
- 第二次輸出：arr=="";類型不同但是調用toSrting再進行比較。最后返回true
- 第三次輸出：arr===1；結果是false道理同第一次輸出
- 第四次輸出：arr==1；結果是true，道理同第二次輸出，兩個方法不是都被重寫，調用的是toString方法。
- 第五次輸出：arr == 2；結果是true，調用valueOf方法。
- 第六次輸出：類型都是同樣的object，但是值不相同，所以返回的結果是false
第五題
考點：let特點，改變this指向
題目：
解析:
- fun()是在全局window上調用，但是全局並沒有a，使用let和const聲明的變量不屬於window對象，所以打印undefind
- fun.aplly(obj)改變this指向，結果是1.
- 值得一提的是第三個。fun.bind(obj1).apply(obj);先通過bind讓this綁定到obj1，然后會返回一個新的函數並不執行；且這個新函數確定了this和形參，無法再改變。因而后面的apply相當於失效。結果是2。
- 第四個new fun()考察new的過程
- 1.生成一個新對象
- 2.獲得構造函數鏈接到原型
- 3.綁定this執行構造函數
- 4.返回新對象 這個題目里面構造函數沒有a屬性，返回undefined。
第十題
考點：flex布局計算
題目
解析:
flex-grow: 定義項目放大比例
flex-shrink：定義項目縮小比例
flex-basis：定義了分配多余空間之前，項目占據主軸的空間。
我們看到父元素的寬度是200px，左右分配空間之前的寬度和100px+50px=150px；所以我們的左右盒子應該放大和是50px。根據放大比例是3:2；所以左邊盒子50px+30px=80px，右盒子120px。寬度比2:3。
第二套：2020網易校招正式批
第8題
考點：箭頭函數沒有this
題目：
解析：
箭頭函數不綁定this，箭頭函數不綁定自己的this關鍵字，如果在箭頭函數中使用this，那么this將會指向箭頭函數定義位置的this。 我們看下面的一個例子
function fn (){
console.log(this);
return ()=> {
console.log(this);
}
}
const obj = {name:'zhangshan'};
const resFn = fn.call(obj);
resFn();
const resFn = fn.call(obj);讓fn的this綁定到obj上；執行resFn()函數就是執行返回的箭頭函數，打印的this是fn的this，也就是obj。
然后·回到我們這個題，也是一樣的道理，三次都指向共同的父親的this，也就是箭頭函數定義位置的this。三次返回的結果都是foo.
第三套：小米校招前端筆試題1
第五題
考點：js中的加號含義
題目
解析
我們先來復習一下js中的六大數據類型，undefined、null、string、number、booleam五種基本類型和引用類型object，除基本類型的都是引用類型例如array、function等。
然后加號最終會存在兩種類型轉換： 1、當加號兩邊存在符串的時候按照字符串處理拼接成字符串 2.當沒有字符串就當數字處理。所以這個李牧兩次都應看成字符串的拼接。
第12題
考點：二叉樹遍歷
題目
解析：
根據前序遍歷和中序遍歷的特點，c為根節點，所以BAFE是c的左子樹，剩余結點是c的右子樹。然后我們可以畫出如下圖所示的二叉樹，再后續遍歷先遍歷左子樹，再遍歷右子樹，最后根節點。結果是bfeahgdc
第13題
考點：數組二分查找
題目
解析：
待解決
最后
前端學習是一條漫長的道路，我們要學習的東西不僅僅只有表面的 技術，還要深入底層，弄明白下面的原理，只有這樣，我們才能夠提高自己的競爭力，在當今這個競爭激烈的世界里立足。
千里之行始於足下，願你我共勉。
金三銀四快到了，送給大家一個小福利，下面是我在工作之余整理的一些面試題，包含HTML、CSS、JavaScript、服務端與網絡、Vue、瀏覽器、react等等。
HTML 篇
- 圖片中 title 和 alt 區別？
- Html5 有哪些新特性、移除了哪些元素
- 瀏覽器是怎么對 Html5 的離線儲存資源進行管理和加載的呢
- 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
- canvas在標簽上設置寬高 和在style中設置寬高有什么區別
- 瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
CSS 篇
- CSS中link與@import的區別：
- position的absolute與fixed共同點與不同點：
- BFC 有什么用
- 清除浮動的幾種方式
- Css3 新增偽類 - 偽元素
- IE盒子模型 、W3C盒子模型
- display:inline-block 什么時候不會顯示間隙？
- 行內元素float:left后是否變為塊級元素？
JavaScript篇
- js的各種位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的區別？
- js拖拽功能的實現
- 異步加載js的方法
- js的防抖
- 繞不過去的閉包
- 說說你對作用域鏈的理解
- JavaScript原型，原型鏈 ? 有什么特點？
- 請解釋什么是事件委托/事件代理
- Javascript如何實現繼承？
Vue
- vue中 key 值的作用
- Vue 組件中 data 為什么必須是函數？
- vuex的State特性是？
- 介紹一下Vue的響應式系統
- computed與watch的區別
- 介紹一下Vue的生命周期
- 為什么組件的data必須是一個函數
- 組件之間是怎么通信的
由於篇幅有限，只能分享部分面試題，更多面試題及答案可以【點擊我】閱讀下載哦~無償分享給大家，算是一個感恩回饋吧
React
- 介紹Redux，主要解決什么問題？數據流程是怎么樣的？多個組件使用相同狀態如何進行管理？
- React-Redux到react組件的連接過
- Redux中間件是什么東西，接受幾個參數
- redux請求中間件如何處理並發
- 如何配置React-Router
- 路由的動態加載模塊
- React生命周期及自己的理解，以及V16對生命周期的修改
- 為什么使用虛擬dom？
瀏覽器
- 跨標簽頁通訊
- 瀏覽器架構
- 瀏覽器下事件循環(Event Loop)
- 從輸入 url 到展示的過程
- 重繪與回流
- 存儲
- Web Worker
- V8垃圾回收機制
- 內存泄露
- reflow(回流)和repaint(重繪)優化
- 如何減少重繪和回流?
- 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？
- localStorage 與 sessionStorage 與cookie的區別總結
更多面試題及答案可以【點擊我】閱讀下載哦，無償分享給大家~