2018年中高階前端面試題目小結

前言

關於前端面試，及面試題目，我之前有很多文章總結過，可以在右側搜尋面試，進行查詢。其實面試中可以問的問題很多，最近幾年，我也面試過很多工作2-4年的前端，我一般會抓住他們做的專案，進行更詳細的追問。所以，初中級前端面試的時候，除了掌握基礎知識之外，專案中用到的技術要理清楚，假如你專案中用到的技術，問的時候卻一問三不知，那麼，基本上就會pass掉了。針對比較資深或者高階的前端面試，可能和初中級面試會有些不一樣，當然，針對資深的前端，可能聊得東西更深，更廣一些！這篇文章簡單聊聊針對中高階前端我們要聊的話題。

一、前端工程化

關於前端工程化，是一個很大的命題，你在知乎上搜索前端工程化，會有一些文章，這些文章可以幫助你理解前端工程化。

說一下我理解的前端工程化吧，前端工程化不單單包括前端的模組化、元件化、自動化，還包括前端效能優化，前端目錄規劃，前端規範化，自動化測試，釋出等等一系列知識。這裡我就不一 一介紹了，感興趣的也可以去讀讀張雲龍的文章：

https://github.com/fouber/blog/issues/3

https://github.com/fouber/blog/issues/10

二、 前端設計模式

其實這裡可以作為一篇文章來書寫了，不過，假如你不瞭解，可以網上搜了一下前端設計模式，關於設計模式也是有不少文章的。

三、 前端安全性問題

當然，這個是老的話題，有的在初中級前端面試中也會提及到。但是在中高階面試的時候，你要說出前端安全性問題防禦，及前端常見安全性問題的攻擊原理是什麼。

1、xss跨站指令碼攻擊（原理、如何進行的、防禦手段是什麼，要說清楚）

2、CSRF跨站請求偽造（如何偽造法？怎麼防禦？等等都要說清楚）

3、sql指令碼注入（注入方式，防禦方式）

4、上傳漏洞 （防禦方式）

1  跨站指令碼攻擊(XSS攻擊)
        XSS(Cross Site Scripting)，跨站指令碼攻擊。XSS是常見的Web攻擊技術之一.所謂的跨站指令碼攻擊指得是:惡意攻擊者往Web頁面裡注入惡意Script程式碼，使用者瀏覽這些網頁時，就會執行其中的惡意程式碼，可對使用者進行盜取cookie資訊、會話劫持等各種攻擊.
解決方案:
(1) 輸入過濾。永遠不要相信使用者的輸入，對使用者輸入的資料做一定的過濾。如輸入的資料是否符合預期的格式，比如日期格式，Email格式，電話號
碼格式等等。這樣可以初步對XSS漏洞進行防禦。上面的措施只在web端做了限制，攻擊者通抓包工具如Fiddler還是可以繞過前端輸入的限制，修改請求注入攻擊指令碼。
因此，後臺伺服器需要在接收到使用者輸入的資料後，對特殊危險字元進行過濾或者轉義處理，然後再儲存到資料庫中。(2) 輸出編碼。伺服器端輸出到瀏覽器的資料，
可以使用系統的安全函式來進行編碼或轉義來防範XSS攻擊。在PHP中，有htmlentities()和htmlspecialchars()兩個函式可以滿足安全要求。相應的JavaScript的編
碼方式可以使用JavascriptEncode。(3) 安全編碼。開發需儘量避免Web客戶端文件重寫、重定向或其他敏感操作，同時要避免使用客戶端資料，這些操作需儘量在服
務器端使用動態頁面來實現。(4) HttpOnly Cookie。預防XSS攻擊竊取使用者cookie最有效的防禦手段。Web應用程式在設定cookie時，將其屬性設為HttpOnly，
就可以避免該網頁的cookie被客戶端惡意JavaScript竊取，保護使用者cookie資訊。(5)WAF(Web Application Firewall)，Web應用防火牆，主要的功能是防範諸如網頁木馬、
XSS以及CSRF等常見的Web漏洞攻擊。由第三方公司開發，在企業環境中深受歡迎。
2 跨站請求偽造(CSRF攻擊)
CSRF(Cross Site Request Forgery)，即跨站請求偽造，是一種常見的Web攻擊，但很多開發者對它很陌生。CSRF也是Web安全中最容易被忽略的一種 網站攻擊
CSRF攻擊的原理:CSRF攻擊過程的受害者使用者登入網站A，輸入個人資訊，在本地儲存伺服器生成的cookie。然後在A網站點選由攻擊者構建一條惡意連結跳轉到
B網站,然後B網站攜帶著的使用者cookie資訊去訪問B網站.讓A網站造成是使用者自己訪問的假相,從而來進行一些列的操作,常見的就是轉賬.
解決方案:
(1) 驗證碼。應用程式和使用者進行互動過程中，特別是賬戶交易這種核心步驟，強制使用者輸入驗證碼，才能完成最終請求。在通常情況下，驗證碼夠很好地遏制
CSRF攻擊。但增加驗證碼降低了使用者的體驗，網站不能給所有的操作都加上驗證碼。所以只能將驗證碼作為一種輔助手段，在關鍵業務點設定驗證碼。(2) Referer Check。
HTTP Referer是header的一部分，當瀏覽器向web伺服器傳送請求時，一般會帶上Referer資訊告訴伺服器是從哪個頁面連結過來的，伺服器籍此可以獲得一些資訊用於處
理。可以通過檢查請求的來源來防禦CSRF攻擊。正常請求的referer具有一定規律，如在提交表單的referer必定是在該頁面發起的請求。所以通過檢查http包頭referer的值
是不是這個頁面，來判斷是不是CSRF攻擊。但在某些情況下如從https跳轉到http，瀏覽器處於安全考慮，不會發送referer，伺服器就無法進行check了。若與該網站同域的
其他網站有XSS漏洞，那麼攻擊者可以在其他網站注入惡意指令碼，受害者進入了此類同域的網址，也會遭受攻擊。出於以上原因，無法完全依賴Referer Check作為防禦CSRF
的主要手段。但是可以通過Referer Check來監控CSRF攻擊的發生。(3) Anti CSRF Token。目前比較完善的解決方案是加入Anti-CSRF-Token，即傳送請求時在HTTP 請
求中以引數的形式加入一個隨機產生的token，並在伺服器建立一個攔截器來驗證這個token。伺服器讀取瀏覽器當前域cookie中這個token值，會進行校驗該請求當中的token
和cookie當中的token值是否都存在且相等，才認為這是合法的請求。否則認為這次請求是違法的，拒絕該次服務。這種方法相比Referer檢查要安全很多，token可以在使用者
登陸後產生並放於session或cookie中，然後在每次請求時伺服器把token從session或cookie中拿出，與本次請求中的token 進行比對。由於token的存在，攻擊者無法再構造
出一個完整的URL實施CSRF攻擊。但在處理多個頁面共存問題時，當某個頁面消耗掉token後，其他頁面的表單儲存的還是被消耗掉的那個token，其他頁面的表單提交時會出
現token錯誤。
3 SQL注入攻擊
     SQL注入(SQL Injection)，應用程式在向後臺數據庫傳遞SQL(Structured Query Language，結構化查詢語言)時，攻擊者將SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字串，最終達到欺騙伺服器執行惡意的SQL命令.
解決方案:
(1) 防止系統敏感資訊洩露。設定php.ini選項display_errors=off，防止php指令碼出錯之後，在web頁面輸出敏感資訊錯誤，讓攻擊者有機可乘。(2) 資料轉義。設定php.ini選項magic_quotes_gpc=on，它會將提交的變數中所有的’(單引號)，”(雙引號)，\(反斜槓)，空白字元等都在前面自動加上\。或者採用mysql_real_escape()函式或addslashes()函式進行輸入引數的轉義。(3) 增加黑名單或者白名單驗證。白名單驗證一般指，檢查使用者輸入是否是符合預期的型別、長度、數值範圍或者其他格式標準。黑名單驗證是指，若在使用者輸入中，包含明顯的惡意內容則拒絕該條使用者請求。在使用白名單驗證時，一般會配合黑名單驗證。 
4 檔案上傳漏洞
上傳漏洞在DVBBS6.0時代被黑客們利用的最為猖獗，利用上傳漏洞可以直接得到WEBSHELL，危害等級超級高，現在的入侵中上傳漏洞也是常見的漏洞。該漏洞允許使用者上傳任意檔案可能會讓攻擊者注入危險內容或惡意程式碼，並在伺服器上執行。 檔案上傳漏洞的原理：由於檔案上傳功能實現程式碼沒有嚴格限制使用者上傳的檔案字尾以及檔案型別，導致允許攻擊者向某個可通過 Web 訪問的目錄上傳任意PHP檔案，並能夠將這些檔案傳遞給 PHP 直譯器，就可以在遠端伺服器上執行任意PHP指令碼。 
解決方案： 
     (1)檢查伺服器是否判斷了上傳檔案型別及字尾。 (2) 定義上傳檔案型別白名單，即只允許白名單裡面型別的檔案上傳。 (3) 檔案上傳目錄禁止執行指令碼解析，避免攻擊者進行二次攻擊。  Info漏洞 Info漏洞就是CGI把輸入的引數原樣輸出到頁面，攻擊者通過修改輸入引數而達到欺騙使用者的目的。
 

四、 跨域問題的處理

關於跨域，我前面很多文章也提及了，瀏覽器跨域訪問解決方案，這篇文章可以看一下。

另外，面試官可能會問及 cookie跨域及localStorage跨域問題，關於這一點，也可以看我之前剛剛寫的文章：http://www.haorooms.com/post/kuayu_localstorage_cookie

五、前端資料加密

關於前端加密方式及前端加密，這個我在專案中實際用的也不多，微信小程式中可能會用到，我很久很久之前也寫過類似的文章，請看：javascript使用者密碼加密,js密碼加密

六、http相關問題

這個可能涉及的東西也蠻多，可以看我前段時間總結的系列文章：

http://www.haorooms.com/post/long_lianjie_websocket

七、 知識點問題介紹

上面問題可能是前端通用問題吧，下面的問題可能都是相關知識點的，下面簡單總結一下：

1、 webpack相關

這個考察你對webpack的理解是使用程度。

例如可能考察如下知識點：

1、hash（contenthash, chunkhash）

2、多頁面配置

3、釋出上線流程

4、如何加快打包速度，減少打包體積

5、和其他工具的區別（grunt,glup,rollup,parcel,Browserify）

2、狀態管理器相關

主要是flux、redux、vuex等

主要問題如下：

一、flux、redux、vuex資料流向，(例如：點選按鈕觸發到狀態更改，資料是如何流向的？)

例如flux：

1、使用者訪問 View
2、View 發出使用者的 Action
3、Dispatcher 收到 Action，要求 Store 進行相應的更新
4、Store 更新後，發出一個"change"事件
5、View 收到"change"事件後，更新頁面

二、vuex和redux區別

三、vuex資料流？為什麼要遵循這個資料流？假如在頁面中直接修改state,而不是通過mutation 的commit方式修改，會怎麼樣？

3、 vue相關

vue相關的問題有很多。僅舉例：

1、vue-router如何做歷史返回提示？

2、vue-router如何做使用者登入許可權等？

3、vue生命週期

4、vue元件通訊

5、vue伺服器渲染

6、vue效能優化

4、 nodejs相關

1、nodejs常用模組

2、nodejs爬蟲

3、nodejs 流

4、nodejs請求如何返回大檔案

5、 es6相關

1、generate和async await

...

6、演算法

1、氣泡排序

2、資料去重方法

3、取1000個數字裡面的質數

7、模組化

1、amd,cmd及commonjs區別

2、import、require區別

8、其他

1、自動化測試相關

2、mock資料相關

3、pwa相關

4、nginx相關

5、微信小程式相關

6、敏捷開發等

前言

之前在興安得力的時候，我也出過前端的面試題。那麼前端人員在外面面試的時候，一般技術人員都會考察我們那些地方呢？我在這裡不妨總結一下！（PS：有點小邪惡，這個公開之後，對於面試者來說是方便了。但是，假如你是公司技術人員，是面試官，您不妨修改一下題目，變通一下！）

javascript常見題目

一、您對js的原型是如何理解的？您對js的繼承是如何理解的？能否舉例說明js的繼承？

關於這個題目，我之前的一篇文章 http://www.haorooms.com/post/js_constructor_pro ，您可以看一下。理解一下原型prototype，關於繼承，那主要是js原型鏈的繼承。關於繼承的理解及舉例（我這裡就不詳細介紹了，簡單介紹之後，你即使背過了，也不一定理解，對於公司也是不公平的）。我還是推薦面試者看一本書《[JavaScript高階程式設計(第3版)]》，這本書對js講的很詳細。關於這個題目，您可以閱讀其第六章就可以了！認真閱讀之後，相信你能理解，也能夠簡單的說出來！

關於js的繼承，確實是重點和難點，我寫過兩篇部落格，大家可以看下：http://www.haorooms.com/post/js_lei_jicheng

http://www.haorooms.com/post/js_jc_lei2

二、js閉包？舉例並說明其主要的作用！

關於閉包，其實是指有權訪問另一個函式作用域中變數的函式。具體我之前也寫過一篇文章，可以看一看！

javascript閉包的理解 http://www.haorooms.com/post/js_bb

javascript閉包入門理解（二）：http://www.haorooms.com/post/js_bbtwo

三、js陣列主要有哪些方法？主要引數你瞭解嗎？

具體你可以查一下，常用的一般有如下：

1 、shift():刪除陣列的第一個元素,返回刪除的值。這裡是0

2 、unshift(3,4):把引數載入陣列的前面，返回陣列的長度。現在list:中是3,4,0,1,2

3、pop():刪除陣列的最後一個元素，返回刪除的值。這裡是2.

4、push(3):將引數載入到陣列的最後，返回陣列的長度，現在List中時：0,1,2,3

5、concat(3,4):把兩個陣列拼接起來。

6、splice(start,deleteCount,val1,val2,...)：從start位置開始刪除deleteCount項，並從該位置起插入val1,val2,...

7、reverse：將陣列反序

var a = [1,2,3,4,5]; 
var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1] 

8、sort(orderfunction)：按指定的引數對陣列進行排序 var a = [1,2,3,4,5]; var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]

9、slice(start,end)：返回從原陣列中指定開始下標到結束下標之間的項組成的新陣列

var a = [1,2,3,4,5]; 
var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]

四、js迭代的方法

every() 、fliter()、forEach()、map()、some()具體大家可以查一下！

五、js陣列去重和排序

具體我就不詳細描述了。

六、js正則表示式

關於正則：http://www.haorooms.com/post/js_regex_refuse ，這篇文章應對面試足夠了！

讓你寫個簡單的正則，去掉字串左右空格。具體看看我之前的文章http://www.haorooms.com/post/js_kong_ge

關於正則，你可以去了解一下！

七、純js的ajax請求原理

可以查詢，瞭解一下！看下這幾篇文章http://www.haorooms.com/post/js_ajax_chun 和http://www.haorooms.com/post/js_shixian_jquery 最後關於js實現ajax的，最新出了js的fetch方法，很不錯的！

八、js模組化

可以看下我之前的文章：http://www.haorooms.com/post/js_require_zz

九、雙等號隱性轉換

具體看文章：http://www.haorooms.com/post/js_yinxingleixing

十、js操作符，字串擷取等

具體請看：http://www.haorooms.com/post/js_czf_mst

字串擷取，substr 、substring等的區別

十一、js中繼承中call和apply（）的區別

用法差不多，傳遞引數不同。具體你可以網上查查，也可以看下我的文章 http://www.haorooms.com/post/js_constructor_pro

十二、類陣列轉換為陣列的方法

Array.prototype.slice.call(arguments);

十三、cookie 不設定過期時間，預設過期時間是多少？

關閉瀏覽器就結束了

十四、改變陣列長度的方法有哪些？

shift、unshift、pop、push

十五、js事件迴圈 event loop

請看文章：http://www.haorooms.com/post/js_xiancheng

十六、require 和 import的區別

看文章：http://blog.csdn.net/qq_28702545/article/details/54892562

jquery常見題目

一、jquery原始碼研究過沒有？

二、jquery外掛寫過沒有，一般如何寫？

可以看我之前的一篇文章：http://www.haorooms.com/post/js_jquery_chajian

三、jquery的bind(),live(),delegate(),on() 區別

網上可以搜尋一下，看一下！

前端常見題目

一、如何處理跨域？

jsonp等，可以看下我寫的 瀏覽器跨域訪問解決方案

二、如何處理快取？如何清除快取。

ajax隨機數、ajax引數、meta中設定等。可以看下我寫的 js清除瀏覽器快取的幾種方法

三、http請求問題，HTTP請求資訊由那3部分組成？

1、請求方法URI協議/版本 （例如：GET/haorooms.jspHTTP/1.1）
2、請求頭(Request Header)（例如：Accept:image/gif.image/jpeg.*/* Accept-Language:zh-cn Connection:Keep-Alive Host:localhost等等）
3、請求正文 

關於圖片的請求，可以看我之前的一篇文章 http://www.haorooms.com/post/web_http_request

四、前端效能優化問題，你是如何處理前端效能問題的？

看我之前的一篇文章：http://www.haorooms.com/post/web_xnyh_jscss 及 前端效能優化補充篇

五、網站js和css如何壓縮？有哪些方法？

ant+yuicompressor具體可以看看我之前的一篇文章：http://www.haorooms.com/post/ant_yuicom

ant:http://www.haorooms.com/tools/ant_book/

SASS等 可以對css進行自動壓縮！

也可以用Grunt構建工具進行。可以看下 前端js和css的壓縮合並之grunt

六、用到哪些css外掛？

bootstrap，animate.css 等

七、讓你自己搭建一個網站，你是如何做架構的？

考察前端架構能力。

八、一些狀態碼你瞭解嗎？

200成功類、300重定向類、400客戶端類、500伺服器端類。具體可以網上查一下！

九、如何用瀏覽器進行程式碼除錯？

谷歌瀏覽器、火狐、IE等。（不明白的同學具體網上可以查一下）

十、json字串轉為json的方法

具體請看：http://www.haorooms.com/post/js_jsons_h

http://www.haorooms.com/post/json_object_json_string

html+css+html5+css3 常見題目

一、假如一個頁面，左側固定，右側自適應，你是如何做到的？

方法很多，一般是margin和浮動，具體可以網上查一下。很簡單。

二、html5新的標籤和特性有哪些？

html5標籤有很多，你可以網上查一下。

三、你常用的css3有哪些？說出你記得的。

哈哈哈，這個很多，你要再複習一下css3包括其動畫等等。

四、如何處理瀏覽器相容性問題？

請看：http://www.haorooms.com/post/IE_jianrong

五、如何用css美化radio、checkbox等按鈕樣式？

具體可以看我的一篇文章：http://www.haorooms.com/post/css_mh_ck_radio

web touch常見題目

一、做手機網站長見的相容問題有哪些？

看下手機網站相關文章。

二、網站如何自適應的？響應式網站一般如何製作？

可以隨便聊聊。可以看下http://www.haorooms.com/post/css3media

三、zepto.js使用過程中有哪些問題？jquerymobile用過嗎？會有哪些問題？

用過的話，可以隨便聊一下！

加分項

例如，你們聊到資料庫，數一下如何用mongo做分頁等等，包括mysql資料庫等等。

聊到inux系統，linux常用的命令。

聊到angularjs，vue.js、angularjs的指令，雙向資料繫結。MVVM模式和mvc模式的區別及mvp模式。

聊到前端架構，及百度fits的jello等。

聊到常用的版本控制工具git或者SVN，講講git常用的命令，git回滾到某個版本怎麼做（ $ git reset --hard 某個版本號）

人事面試

人事面試和技術面試是有區別的，人事一般問一些概況總結方面的問題，我下面舉一些列子吧！

一、你做了這麼多專案，讓你感受最深，印象最深的是哪個專案？你從中學到了什麼？為什麼會感受最深？

二、做前端開發這麼多年來？說下你的感受吧！

三、簡單自我介紹一下自己。

四、你對公司有什麼需要了解的？

五、談到薪資，談到離職原因，談到未來幾年的規劃等等，我在這裡就不具體說了。

上面是我面試過程中最常見的一些問題。注意：面試的時候千萬要真誠，不要撒謊，是什麼就是什麼，我列舉上面題目的原因是有些前端人員可能技術很好，但是面試的時候緊張，沒有準備。這樣你簡單準備了之後，就能發揮自己正常水平！廣大朋友們，加油吧！

分享幾個前端乾貨，面試經常提

2016年3月29日 22470次瀏覽

前言

我前面的文章，也有幾篇講過面試的，不過都沒有很細緻的講，例如：總結前端面試過程中最容易出現的問題，等等。還有一些文章，也是面試中可能提問的。今天，分享幾個小知識，算是乾貨吧！前端面試中也經常會問及，不過問及的機率相對較少。我個人認為，面試中你把基礎的知識打好，就可以無敵！哪些基礎知識呢？例如：js的繼承、js函式等等，萬變不離其宗，都是這些的擴充套件及應用。這些知識理解透徹了，再加一些面試技巧就可以了！

一、怎麼讓Chrome支援小於12px 的文字？

這個我們在做移動端的時候，設計師圖片上的文字假如是10px，我們實現在網頁上之後。往往設計師回來找我們，這個字型能小一些嗎？我設計的是10px？為啥是12px?其實我們都知道，谷歌Chrome最小字型是12px，不管你設定成8px還是10px，在瀏覽器中只會顯示12px，那麼如何解決這個坑爹的問題呢？

我們的做法是：

針對谷歌瀏覽器核心，加webkit字首，用transform:scale()這個屬性進行縮放！

<style>

p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}

</style>

<p><span>haorooms部落格測試10px</span></p>

二、IOS手機瀏覽器字型齒輪

修改-webkit-font-smoothing屬性，結果是：

-webkit-font-smoothing: none: 無抗鋸齒
-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑

三、如何修改chrome記住密碼後自動填充表單的黃色背景？

大體可以通過input : -webkit-autofill來進行修改！

input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}

四、谷歌瀏覽器執行下面程式碼，並解釋！

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })

執行上面程式碼之後，會發現HTML層都被使用不同的顏色添加了一個高亮的邊框。為什麼會這樣呢？

首先我們來看

[].forEach.call()，關於call()和apply()，我前面有文章也寫過，具體可以看http://www.haorooms.com/post/js_constructor_pro

[].forEach.call()等價於Array.prototype.forEach.call()

其次我們來看$$("*")

你可以在你的Chrome瀏覽器控制檯中輸入$$('a')，然後你就能得到一個當前頁面中所有錨元素的列表。

$$函式是許多現代瀏覽器命令列API中的一個部分，它等價於document.querySelectorAll,你可以將一個CSS選擇器作為這個函式的引數，然後你就能夠獲得當前頁面中所有匹配這個CSS選擇器的元素列表。如果你在瀏覽器控制檯以外的地方，你可以使用document.querySelectorAll('')來代替$$('')

為元素新增顏色

為了讓元素都有一個漂亮的邊框，我們在上面的程式碼中使用了CSS屬性outline。outline屬性位於CSS盒模型之外，因此它並不影響元素的屬性或者元素在佈局中的位置，這對於我們來說非常有用。這個屬性和修改border屬性非常類似，因此下面的程式碼應該不會很難理解：

a.style.outline="1px solid #" + color

真正有趣的地方在於定義顏色部分：

（~~(Math.random()*(1<<24))).toString(16)

~~的作用相當於parseInt，和我前面講解的“|”功能類似，關於運算子“I” ，可以去看看！

通過上面程式碼可以獲取到一個隨機的顏色值！

五、input [type=search] 搜尋框右側小圖示如何美化？

美化效果如下圖：

右側預設的比較難看的按鈕，美化成右側效果。

input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none;height: 15px; width: 15px;border-radius: 8px;background:url("images/searchicon.png") no-repeat 0 0;background-size: 15px 15px;}

用到的是偽元素::-webkit-search-cancel-button，關於什麼是偽類和為元素，請看：http://www.haorooms.com/post/css_wl_wys

六、iOS safari 如何阻止“橡皮筋效果”？

可以參考一下知乎上的回答 https://www.zhihu.com/question/22256539 。

但是，我們遇到的問題不是這樣，我是要解決彈跳導致彈出層（position:absolute）的覆蓋層高度小於100%;

針對這個問題，我想到的解決方案如下：

方法一： 把position:absolute改成position:fixed，並在彈出層之後，設定body的高度是100%；overflow是hidden。

方法二：

思路是獲取蘋果瀏覽器導航欄的高度。然後滾動的時候，重新獲取其高度。在導航欄高度變小的時候，給彈出層增加高度的百分比！

程式碼如下：

    //ios safari 伸縮判斷
      var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
        $(window).scroll(function () {
           if(agent.indexOf("iPhone")!=-1 || agent.indexOf("iPad")!=-1){
                var topbarHeightNow=window.outerHeight-window.innerHeight;
                if(topbarHeightNow<topbarHeight){
                    globleflag=false
                     //此處寫處理邏輯
                }else{
                 globleflag=true  
                    //此處寫處理邏輯
               }
            }
 });

七、實現點選文字，文字後面radio選中效果

這個效果是前端很經常用到和遇到的效果了，實現這個效果的方式也很多，很多朋友用js和jquery來實現，但是最簡單的，我們可以直接用lable標籤的 for 屬性來實現。

看下下面例子：

<form>  <label for="male">Male</label>
 <input type="radio" name="sex" id="male" />
 <br />  <label for="female">Female</label>
 <input type="radio" name="sex" id="female" />
</form>

label 的for屬性後面跟著input的id,就可以點選label，來觸發input效果了，大家可以試一試！

八、網站中，圖片檔案（jpg，png,gif），如何點選下載？而非點選預覽？

我們平時在網站中的圖片，假如我們要下載，如下寫：

<a href="haorooms部落格.jpg">下載</a>

我們點選下載按鈕，只會預覽“haorooms部落格.jpg”這張圖片，並不會出現下載框，另存為那種？那麼我們如何做呢？

我們只需要如下寫

<a href="haorooms部落格.jpg" download >下載</a>

就可以下載了。點選如下進行嘗試吧！下載

不但如次，我們還可以指定檔名稱，如下寫法：

<a href="haorooms部落格.jpg" download="haoroom前端部落格圖片下載" >下載</a>

測試如下：下載

上面就是指定下載的寫法！

九、Math.min()比Math.max()大

Math.min() < Math.max() // false
Math.min() > Math.max() // true

因為Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

十、經典面試題目

const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
  Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10

把 var 改成 let試試！

const Greeters = []
for (let i = 0 ; i < 10 ; i++) {
  Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 0
Greeters[1]() // 1
Greeters[2]() // 2

十一、陣列物件全等比較

// 這些可以
'abc' === 'abc' // true
1 === 1 // true
// 然而這些不行
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1} // false
{} === {} // false

因為[1,2,3]和[1,2,3]是兩個不同的陣列，只是它們的元素碰巧相同。因此，不能簡單的通過===來判斷。

十二、關於數字和點號

3.toString()
3..toString()
3...toString()

這個題也挺逗, 答案是

 error, '3', error

你如果換一個寫法就更費解了

var a = 3;
a.toString()

這個答案就是 '3';

為啥呢?

因為在 js 中 1.1, 1., .1 都是合法的數字. 那麼在解析 3.toString 的時候這個 . 到底是屬於這個數字還是函式呼叫呢? 只能是數字, 因為3.合法啊!

十三、變數提升

如下題目

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

理解這個，我們可以先看下面的題目：

var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2;

相當於：

var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y

變數提升了！

所以上面的自呼叫函式可以如下理解：

var name = 'World!';
(function () {
    var name;
    if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

name在scope裡面，因此，先找裡面，裡面找到了name,因此執行的結果是

'Goodbye Jack'

十四、區域性變數和全域性變數

(function(){
  var x = y = 1;
})();
console.log(y);
console.log(x);

輸出：

1, error

y 被賦值到全域性。x 是區域性變數，全域性中獲取不到。所以列印 x 的時候會報 ReferenceError

十五、正則表示式字面一致也不相等

var a = /123/,
    b = /123/;
a == b
a === b

即使正則的字面量一致, 他們也不相等.

答案 false, false

十六、函式名稱不可改變

function foo() { }
var oldName = foo.name;
foo.name = "bar";
[oldName, foo.name]

答案

['foo', 'foo']

例如：

function doSomething() {}
doSomething.name; // "doSomething"

var f = function() {};
var object = {
  someMethod: function() {}
};

console.log(f.name); // "f"
console.log(object.someMethod.name); // "someMethod"

函式的名字是不可以改變的。

十七、寫出最簡單的去重方式

1、es6的new Set()方式，具體請看：http://www.haorooms.com/post/js_map_set

例如：

let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90];
[...new Set(array)]

或者直接

[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]

2、es5的Array filter()

[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){
   return index === Array.indexOf(elem);
})