前端面試實習題目總結：

時間  2019-12-08
標籤 前端 面試 實習 題目 總結 欄目 快樂工作 简体版
原文   原文鏈接

如下是部分整理，有時間還會整理出其餘的~~
（最近還在找實習嗚嗚~~）css

1.JavaScript是一種弱類型語言，有什麼優勢和缺點
https://blog.csdn.net/sinolze...
（1）強類型定義語言：強制數據類型定義的語言。也就是說，一旦一個變量被指定了某個數據類型，若是不通過強制轉換，那麼它就永遠是這個數據類型了。舉個例子：若是你定義了一個整型變量a,那麼程序根本不可能將a看成字符串類型處理。強類型定義語言是類型安全的語言。
（2）弱類型定義語言：數據類型能夠被忽略的語言。它與強類型定義語言相反, 一個變量能夠賦不一樣數據類型的值。
強類型定義語言在速度上可能略遜色於弱類型定義語言，可是強類型定義語言帶來的嚴謹性可以有效的避免許多錯誤。另外，「這門語言是否是動態語言」與「這門語言是否類型安全」之間是徹底沒有聯繫的！ 例如：Python是動態語言，是強類型定義語言（類型安全的語言）; VBScript是動態語言，是弱類型定義語言（類型不安全的語言）;JAVA是靜態語言，是強類型定義語言（類型安全的語言）。html

2.js的數據類型：
https://www.cnblogs.com/wu-we...前端

  • .類型定義

JS是一種弱類型語言。JS擁有動態類型，相同的變量能夠用做不一樣的類型。
JS有7種數據類型：三種基本類型（數字，字符串，布爾），兩種引用數據類型（對象，數組)，兩種特殊數據類型（undefined，null）。JS有5種原始類型：數字，字符串，布爾，undefined，null。
typeof 運算符就是檢測變量或值的數據類型。
1.1.undefined類型只有一個值，undefined.
全部已聲明可是沒有初始化的變量，默認值都爲undefined。
函數沒有明確返回值的時候，會默認返回undefined。
1.2.null爲空對象，只有一個值，null
undefined與null相等。
null表示還沒有存在的對象。
當函數返回的對象不存在時，返回null。
當某個對象不須要時，可將值設爲null。vue

3. 在js裏call()與apply()有什麼相同和不一樣？
call 方法:調用一個對象的一個方法，以另外一個對象替換當前對象。
call([thisObj,arg1, arg2, ...,argN)html5

參數thisObj:可選項,將被用做當前對象的對象。
arg1, arg2, …, argN:可選項。將被傳遞方法參數序列。
說明:call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj。說明白一點其實就是更改對象的內部指針，即改變對象的this指向的內容。
call函數和apply方法的第一個參數都是要傳入給當前對象的對象，及函數內部的this。後面的參數都是傳遞給當前對象的參數，對於apply和call二者在做用上是相同的，但二者在參數上有區別的。
對於第一個參數意義都同樣，但對第二個參數：apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）。
如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3])
同時,使用apply的好處是能夠直接將當前函數的arguments對象做爲apply的第二個參數傳入python

4. XML和JSON有過了解吧？能說一下分別介紹一下他們嗎？JSON有什麼優點react

若是要表達數組呢？XML中能夠在父節點下面累放節點，而JSON則有[ ]這樣更直觀的方式。jquery

若是字符串中有換行符怎麼辦，JSON不存在這個問題，而XML必須引入CDATA解決問題
當上面的standalone爲yes的時候表示DTD直接寫到這個XML裏面去，這樣，就不須要額外的DTD文件了，也就是說，這個文件不可是自解釋，仍是自校驗的了。而這一點，JSON是不可能作到的。webpack

另外，XML還能夠有命名空間，能夠經過xmlns屬性引入不一樣的定義文件，像編程語言的import來自由組合，這一點，JSON也是作不到的
JSON的一大好處是有些語言能夠原生支持，好比JavaScript，不須要一個JSON Parser這樣的東西，代碼裏表示對象用的就是JSON格式的表達。可是直接支持XML的編程語言，好像沒有吧，卻是有像HTML等等標記語言的解析器，能夠處理任意DOM對象。c++

5.CSS3哪些新特性值得稱讚的特色：
CSS3把不少之前須要使用圖片和腳原本實現的效果，只須要短短几行代碼就能搞定CSS3做爲CSS技術的升級版本，着力於模塊化發展，將規範分解爲一些小的模塊，如選擇器、盒子模型、列表模塊、背景和邊框等；並加入了不少新的模塊和屬性，好比複雜選擇器、文字陰影、邊框圓角、邊框陰影、漸變、過渡、多欄佈局、2D/3D 轉換、動畫等。
其中，CSS3提供了一些複雜選擇器，用於實現頁面複雜狀況下的元素選擇，如屬性選擇器、一些僞類和僞元素選擇器；漸變用於爲元素設置漸變效果的背景；轉換能夠實現元素的變換，好比位移、縮放、旋轉等；過渡能夠實現簡單的動畫效果；而動畫屬性則能夠實現複雜的動畫，能夠實現逐幀製做動畫。

6.在瀏覽器那裏輸入一個網址，會發生什麼？
第一步 瀏覽器查找該域名的 IP 地址
(用到ARP協議獲取物理地址 和DNS協議(Domain Name System，域名系統) 獲取網絡地址，即IP地址)
第二步 瀏覽器根據解析獲得的IP地址向 web 服務器發送一個 HTTP 請求。（用到TCP、IP、以太網協議報頭）
第三步 服務器收到請求並進行處理
第四步 服務器返回一個響應（服務器返回一個 HTTP 響應，若是返回狀態碼304，瀏覽器能夠直接使用以前緩存的資源。對於內容響應，瀏覽器須要進行響應解碼，渲染顯示。）
第五步 瀏覽器對該響應進行解碼，渲染顯示。（ 在瀏覽器沒有完整接受所有HTML文檔時，（打開網頁，網頁顯示用到了表示層的HTML協議）它就已經開始顯示這個頁面了，若是是個靜態的頁面，那到此就基本結束了。若是是是動態的，那麼在瀏覽器顯示HTML時，會獲取嵌入在HTML中的對象，瀏覽器會發送獲取請求來從新得到這些文件。這些請求都要經歷一個和HTML讀取相似的過程。 對於靜態的頁面內容，瀏覽器一般會進行緩存，而對於動態的內容，瀏覽器一般不會進行緩存）
第六步 完成後，瀏覽器發送異步請求（頁面顯示完成後客戶端仍與服務器端保持着聯繫。 它會持續與服務器保持聯繫來及時更新一些頁面信息。在瀏覽器中執行的 JavaScript代碼會給服務器發送異步請求。這個異步請求發送給特定的地址，它是一個按照程式構造的獲取或發送請求。）
此過程用到的協議：
應用層使用了HTTP協議進行超文本傳輸，對於服務器後臺處理應該有telnet遠程調用協議響應用戶，DNS協議獲取網絡地址，即IP地址；打開網頁，網頁顯示用到了表示層的HTML協議；
另外必然用到了傳輸層的TCP和網絡層的IP協議；網絡層ARP協議獲取物理地址；ICMP協議控制信息的傳遞，還有不少吧，我就不知道了。

7.正則匹配URL。
協議：
file 資源是本地計算機上的文件。格式file://
ftp 經過 FTP訪問資源。格式 FTP://
gopher 經過 Gopher 協議訪問該資源。
http 經過 HTTP 訪問該資源。 格式 HTTP://
https 經過安全的 HTTPS 訪問該資源。 格式 HTTPS://
mailto 資源爲電子郵件地址，經過 SMTP 訪問。 格式 mailto:
MMS 經過 支持MMS（流媒體）協議的播放該資源。（表明軟件：Windows Media Player）格式 MMS://
ed2k 經過 支持ed2k（專用下載連接）協議的P2P軟件訪問該資源。（表明軟件：電驢） 格式 ed2k://
Flashget 經過 支持Flashget:（專用下載連接）協議的P2P軟件訪問該資源。（表明軟件：快車） 格式 Flashget://
thunder 經過 支持thunder（專用下載連接）協議的P2P軟件訪問該資源。（表明軟件：迅雷） 格式 thunder://
news 經過 NNTP 訪問該資源。
正則用法和url結構。
protocol :// hostname[:port] / path / ;parameters#fragment
相信大部分只有 [;parameters]這個不太懂，在http權威指南中有介紹這個東西，貌似是針對某些協議，須要驗證用戶名和密碼。用的很少，知道就行。
簡單正則規則：w -> a-z[0-9]_
d -> 數字
s -> 空格,換行,tab鍵等
？ -> 0個或一個

  • -> 0個或多個
  • -> 一個或多個

^ -> 開頭
$ -> 結尾
. -> 任何字符
() -> 子表達式
g -> 全局搜索（要考慮lastIndex）
i -> 忽略大小寫
m -> 多行查找
.*？ -> 非貪婪模式
-> 將下一個字符標記爲特殊字符
a{3,4} -> 最少匹配連續3個a，最多匹配4個連續a
[a-z] -> 匹配a到z的任意一個字符，1 -> 匹配不是a到z的任意字符。

8.在和服務器創建鏈接時,用的是TCP仍是UDP?
從原理上，TCP的優點有：
簡單直接的長鏈接
可靠的信息傳輸
數據包的大小沒有限制
任何一個和TCP打過交道的人都知道，要實現一個穩定的TCP網絡鏈接，須要處理各類隱藏的坑，好比斷線檢測、慢速客戶端響應阻塞數據包，對開放鏈接的各類dos攻擊，阻塞和非阻塞IO模型等等。除了上面列出的這些問題外，一個好的TCP模塊確實很差編碼實現。可是，TCP最糟糕的特性是它對阻塞的控制。通常來講，TCP假定丟包是因爲網絡帶寬不夠形成的，因此發生這種狀況的時候，TCP就會減小發包速度，舉個例子來講，UDP是基於數據包構建，這意味着在某些方面須要你徹底顛覆在TCP下的觀念。UDP只使用一個socket進行通訊，不像TCP須要爲每個客戶端創建一個socket鏈接。這些都是UDP很是不錯的地方。這也是人們爲何常常推薦TCP的緣由。在用TCP的時候你能夠不考慮這些問題，直到你須要同步鏈接的數量級達到500以上的時候。

9.談談筆試中會常常碰到的一類問題-排序算法
冒擇路（入）兮（希）快歸堆。怎樣理解這句話呢?直譯就是冒失的選擇道路啊，你將很快入土，歸堆就是入土爲安了。拆開來理解呢，「冒」就是「冒泡」，「選」就是「選擇」，「路（入）」就是「插入」，「兮（希）」就是「希爾」，「快」就是「快速」，「歸」就是「歸併」，「堆」仍是「堆」，在每一個詞後面加上「排序」二字不就是咱們經常使用的7種排序算法
快速排序算法是一種穩定的算法嗎？它的最壞複雜度是多少？平均複雜度呢？
快速排序的思想和算法：快速排序算法使用了分治技術

10.那麼在C++裏面，堆棧最大的不一樣點是什麼？
一個由c/C++編譯的程序佔用的內存分爲如下幾個部分
一、棧區（stack）— 由編譯器自動分配釋放 ，存放函數的參數值，局部變量的值等。其操做方式相似於數據結構中的棧。
二、堆區（heap） — 通常由程序員分配釋放， 若程序員不釋放，程序結束時可能由OS回收 。注意它與數據結構中的堆是兩回事，分配方式卻是相似於鏈表，呵呵。
三、全局區（靜態區）（static）—，全局變量和靜態變量的存儲是放在一塊的，初始化的全局變量和靜態變量在一塊區域， 未初始化的全局變量和未初始化的靜態變量在相鄰的另外一塊區域。 - 程序結束後有系統釋放
四、文字常量區 —常量字符串就是放在這裏的。 程序結束後由系統釋放
五、程序代碼區—存放函數體的二進制代碼
c和c+函數堆棧基本同樣，不一樣的地方是c++函數堆棧要支持異常機制
malloc/free：
一、函數原型及說明：

void *malloc(long NumBytes)：該函數分配了NumBytes個字節，並返回了指向這塊內存的指針。若是分配失敗，則返回一個空指針（NULL）。
  void free(void *FirstByte)： 該函數是將以前用malloc分配的空間還給程序或者是操做系統，也就是釋放了這塊內存，讓它從新獲得自由。

2.內存操做：

malloc函數的參數是接受須要分配的內存字節數，若是內存可以知足請求量，那麼將會返回：指向被分配的內存塊起始位置
 free函數釋放的是指針指向的內存(不是釋放的指針自己，不會刪除指針自己),其中指針必須指向所釋放內存空間的首地址

new/free:
1.操做時發生事件：

new的時候會有兩個事件發生：1).內存被分配(經過operator new 函數)  2).爲被分配的內存調用一個或多個構造函數構建對象
 delete的時候，也有兩件事發生：1).爲將被釋放的內存調用一個或多個析構函數  2).釋放內存(經過operator delete 函數)

11.數據結構構圖：

clipboard.png

  1. 對於Node.js你瞭解多少?

Node.js優勢：
一、採用事件驅動、異步編程，爲網絡服務而設計。其實Javascript的匿名函數和閉包特性很是適合事件驅動、異步編程。並且JavaScript也簡單易學，不少前端設計人員能夠很快上手作後端設計。
二、Node.js非阻塞模式的IO處理給Node.js帶來在相對低系統資源耗用下的高性能與出衆的負載能力，很是適合用做依賴其它IO資源的中間層服務。
三、Node.js輕量高效，能夠認爲是數據密集型分佈式部署環境下的實時應用系統的完美解決方案。Node很是適合以下狀況：在響應客戶端以前，您預計可能有很高的流量，但所需的服務器端邏輯和處理不必定不少。
Node.js缺點：
一、可靠性低
二、單進程，單線程，只支持單核CPU，不能充分的利用多核CPU服務器。一旦這個進程崩掉，那麼整個web服務就崩掉了。

13. jquery綁定click的方法有幾種
第一種方式：

$(document).ready(function(){
$("#clickme").click(function(){
alert("Hello World click");
});
第二種方式：

$('#clickmebind').bind("click", function(){
alert("Hello World bind");
});
第三種方式：

$('#clickmeon').on('click', function(){
alert("Hello World on");
});
});

14.面試時,問.你的優勢/競爭力 怎麼回答比較好

目前仍是大三，沒有實習過，因此暫時尚未實習經驗。可是不少技能我願意去嘗試，喜歡去接觸新的東西，學習新的技能，就是哪裏不會學哪裏。平時喜歡在一些網站上看學習視頻，好比慕課網，騰訊課堂等去學習本身須要掌握的技能。我的通常有比較好的學習習慣和較好的接受新知識的能力，相信能較快適應所在崗位，若是可以入職的話。

無經驗：回答凸顯你的學習能力。沒有經驗，並不意味着沒有競爭優點。對於缺少必定經驗的應屆生或在校實習生而言，你最大的競爭優點就在於你的可塑性。剛畢業，至關於一張白紙的你，沒有通過社會的洗禮，天然也不會沾染一些不良的習慣。這時候，若是具備有良好的學習能力和較快的接受能力，能較快的融入工做崗位，那就確定受用人單位的親睞。在校期間，你或多或少的都參與過一些社會實踐活動。還有的甚至參與過班級或學校管理，策劃並組織過相關的活動。這些只要是你參與過的，都是你的財富，不知不覺間都能讓你掌握必定的技能。若是，你以爲本身的實踐沒什麼好說的話，也能夠從你所學的專業入手，分析一下專業和應聘崗位之間的關係，再說明你如何將所學轉化成所用。 分享一個六度伯樂網，能夠看到不少關於職場方面的信息和文章。

15. 移動端適配問題

自動適應屏幕寬度之viewport --在html中添加meta標籤:網頁的寬度默認等於屏幕的寬度。

16.關於將來規劃：
首先，很感謝XX提供機會，讓我有如此近的距離接近鵝廠，無論最後有沒有被錄取，進入騰訊實習，由於一直以爲在互聯網行業，進騰訊是一件很幸福的事兒，那裏都是很優秀的師兄師姐，能夠學習到不少技能和學習態度，因此一直很期待能進入騰訊實習工做。對於短時間的規劃是，把手頭上的事情作好，爲不久到來的實習作好更充分的準備，學習更多的技能，不鬆懈，但也會注意勞逸結合，畢竟身體纔是革命之本，而後爭取所在的實習階段作一個優秀的實習生，成就一個更好的本身。長遠一點，工做的話，繼續保持不斷進取奮鬥的熱情以及向領導和同事虛心請教的態度和喜歡繼續挑戰新知識的態度去對待工做從而全面提升本身的學習修養和能力，生活上也要保持積極樂觀的生活態度，去應對生活和學習中大大小小的問題。

17. http協議知識整理

http協議是一個應用層的協議。規定了瀏覽器和服務器之間的通訊規範。一般用TCP鏈接方式。
2.HTTP 1.0、1.1 鏈接的方式。
在HTTP 1.0 中，瀏覽器和服務器使用的是短鏈接，響應完，當即斷開。請求的過程：3次握手，請求，響應，斷開鏈接。
http不保存鏈接，好處：服務器能夠處理更多的鏈接，可是每次創建鏈接會下降處理速度。
如今主流的版本是HTTP 1.1 ，在HTTP 1.1 中咱們使用長鏈接，一個請求結束後，不斷開，繼續請求。
告知服務器意圖的 HTTP 方法：
GET 請求獲取Request-URI所標識的資源(獲取資源)
POST 在Request-URI所標識的資源後附加新的數據，經常使用於提交表單。（傳輸實體主體）
HEAD 請求獲取由Request-URI所標識的資源的響應消息報頭（獲取報文首部）
PUT 請求服務器存儲一個資源，並用Request-URI做爲其標識（傳輸文件）
DELETE 請求服務器刪除Request-URI所標識的資源（刪除文件）
TRACE 請求服務器回送收到的請求信息，主要用於測試或診斷（追蹤路徑）
CONNECT 保留未來使用
OPTIONS 請求查詢服務器的性能，或者查詢與資源相關的選項和需求（詢問支持的方法）
get和post是最經常使用的方法，簡單來講，前者用於獲取數據，後者用於提交數據。
18.HTTP狀態碼
主要還得記得http中Status-Code的第一個數字定義響應的類別，後兩個數字沒有分類的做用。第一個數字可能取5個不一樣的值：
1xx:信息響應類，表示接收到請求而且繼續處理。
2xx:處理成功響應類，表示動做被成功接收、理解和接受。
3xx:重定向響應類，爲了完成指定的動做，必須接受進一步處理。
4xx:客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行。
5xx:服務端錯誤，服務器不能正確執行一個正確的請求

  1. 1 消息
  2. ▪ 100 Continue
  3. ▪ 101 Switching Protocols
  4. ▪ 102 Processing
  5. 2 成功
  6. ▪ 200 OK
  7. ▪ 201 Created
  8. ▪ 202 Accepted
  9. ▪ 203 Non-Authoritative Information
  10. ▪ 204 No Content
  11. ▪ 205 Reset Content
  12. ▪ 206 Partial Content（部份內容）
  13. ▪ 207 Multi-Status
  14. 3 重定向
  15. ▪ 300 Multiple Choices
  16. ▪ 301 Moved Permanently（永久性轉移）
  17. ▪ 302 Move temporarily（暫時性轉移）
  18. ▪ 303 See Other
  19. ▪ 304 Not Modified（存在緩存，沒修改）
  20. ▪ 305 Use Proxy
  21. ▪ 306 Switch Proxy
  22. ▪ 307 Temporary Redirect
  23. 4 請求錯誤
  24. ▪ 400 Bad Request
  25. ▪ 401 Unauthorized
  26. ▪ 402 Payment Required
  27. ▪ 403 Forbidden（禁用，非法）
  28. ▪ 404 Not Found
  29. ▪ 405 Method Not Allowed
  30. ▪ 406 Not Acceptable
  31. ▪ 407 Proxy Authentication Required
  32. ▪ 408 Request Timeout
  33. ▪ 409 Conflict
  34. ▪ 410 Gone
  35. ▪ 411 Length Required
  36. ▪ 412 Precondition Failed
  37. ▪ 413 Request Entity Too Large
  38. ▪ 414 Request-URI Too Long
  39. ▪ 415 Unsupported Media Type
  40. ▪ 416 Requested Range Not Satisfiable
  41. ▪ 417 Expectation Failed
  42. ▪ 421 too many connections
  43. ▪ 422 Unprocessable Entity
  44. ▪ 423 Locked
  45. ▪ 424 Failed Dependency
  46. ▪ 425 Unordered Collection
  47. ▪ 426 Upgrade Required
  48. ▪ 449 Retry With
  49. ▪ 451Unavailable For Legal Reasons
  50. 5 服務器錯誤（五、6字頭）
  51. ▪ 500 Internal Server Error
  52. ▪ 501 Not Implemented
  53. ▪ 502 Bad Gateway
  54. ▪ 503 Service Unavailable
  55. ▪ 504 Gateway Timeout
  56. ▪ 505 HTTP Version Not Supported
  57. ▪ 506 Variant Also Negotiates
  58. ▪ 507 Insufficient Storage
  59. ▪ 509 Bandwidth Limit Exceeded
  60. ▪ 510 Not Extended
  61. ▪ 600 Unparseable Response Headers

18.JSONP 的工做原理是什麼？

就是利用<script>標籤沒有跨域限制的「漏洞」（歷史遺蹟啊）來達到與第三方通信的目的。當須要通信時，本站腳本建立一個<script>元素，地址指向第三方的API網址，形如：
<script src="http://www.example.net/api?pa...;param2=2"></script> 並提供一個回調函數來接收數據（函數名可約定，或經過地址參數傳遞）。 第三方產生的響應爲json數據的包裝（故稱之爲jsonp，即json padding），形如callback({"name":"hax","gender":"Male"})
這樣瀏覽器會調用callback函數，並傳遞解析後json對象做爲參數。本站腳本可在callback函數裏處理所傳入的數據。

19. CSS的基本選擇器有哪幾種?分別適合在什麼狀況下使用?

三種：類別選擇器、標籤選擇器、id選擇器，類別是用class命名的時候用 標籤是html標籤的時候用 id就不用多說了
ID選擇器：#header {}
類選擇器：.header {}
元素選擇器：div {}
子選擇器：ul > li {}
後代選擇器：div p {}
僞類選擇器：a:hover {}
屬性選擇器：input[type="text"] {}
id優先級高於類class；後面的樣式覆蓋前面；指定的高於繼承；

20. 這些CSS選擇器的權重呢？
CSS規範爲不一樣類型的選擇器定義了特殊性權重，特殊性權重越高，樣式會被優先應用。
權重設定以下：
*通配符選擇器，權重爲0;
html選擇器，權重爲1；
類選擇器，權重爲10；
id選擇器，權重爲100；
這裏還有一種狀況：在html標籤中直接使用style屬性，這裏的style屬性的權重爲1000；

21. 一個div如何居中：
水平居中：
<style>
.juzhong{margin:0px auto; width:500px;}
</style>
<div class=juzhong></div>
垂直居中：
<style>

mid{

position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
width:300px;
height:300px;
border:1px solid red;
}
</style>
<div id=mid></div>
注意，其中margin:-150px 0 0 -150px;
第一個150是高度的一半，第四個150是寬度的一半
text-align:center：文本居中

22. 目前想繼續學習的前端技術：
框架選型：Vue, React, Animate，Node.Js（基於Chrome JavaScript運行時創建的平臺， 用於方便地搭建響應速度快、易於擴展的網絡應用）， Zepto.js ['zeptəʊ]（適合開發跨平臺Web App）
構建工具：gulp 和grunt
模塊化開發：webpack

23.談談mvvm框架。
我的以爲意義不大，就是看你對新技術有沒有了解。項目中沒用到，去學的話，我是不肯意去的。可是知道它是下一代MVC前端框架就好了。Angular.js是傑出表明。頁面編寫和業務編寫分離，極大的加快了開發的進度，以及代碼的分離。

24．瞭解前端的緩存(存儲)嗎？緩存分爲幾類？
前端的緩存無非就Cookie,LocalStorge,SessionStorge這三個吧。
Cookie，存儲容量小，僅僅4kb左右，在網絡請求的時候能夠發送，不建議存儲重要數據，由於會被網絡詐騙就是把本地的cookie發到別人的服務器上，進而獲取你的帳戶密碼。LocalStorge,SessionStorge都是本地緩存的主要用的，二者的用法都很簡單，都有各自的Set和get方法。主要的區別就是LocalStorge是一種持久化的存儲方式，也就是說若是不手動清除，數據就永遠不會過時。而SessionStorge關閉瀏覽器就清空數據。

25.閉包的理解
"官方"的解釋是:所謂"閉包"，指的是一個擁有許多變量和綁定了這些變量的環境的表達式(一般是一個函數)，於是這些變量也是該表達式的一部分
特色:
這段代碼有兩個特色:
一、函數b嵌套在函數a內部;
二、函數a返回函數b。
這樣在執行完var c=a( )後，變量c其實是指向了函數b，再執行c( )後就會彈出一個窗口顯示i的值(第一次爲1)。這段代碼其實就建立了一個閉包，爲何?由於函數a外的變量c引用了函數a內的函數b，就是說:
當函數a的內部函數b被函數a外的一個變量引用的時候，就建立了一個閉包。
其實閉包也就是指有權訪問另外一個函數做用域的函數而已。經常使用的建立閉包的方法就是在函數內部建立另外一個函數。

26. 綁定事件的方法?
 嵌入dom
<button onclick="open()">按鈕</button>
<script>
function open(){

alert(1)

}
</script>
 直接綁定
<button id="btn">按鈕</button>
<script>
document.getElementById('btn').onclick = function(){

alert(1)

}
</script>
 事件監聽
<button id="btn">按鈕</button>
<script>
document.getElementById('btn').addEventListener('click',function(){

alert(1)

})
//兼容IE
document.getElementById('btn').attachEvent('click',function(){

alert(1)

})
</script>

27.瞭解事件流嗎？事件流的順序是什麼？

clipboard.png

一個完整的JS事件流是從window開始，最後回到window的一個過程
事件流被分爲三個階段(1~ 5)捕獲過程、(5~ 6)目標過程、(6~ 10)冒泡過程

28. 說說字符串經常使用的十個函數

charAt() 返回在指定位置的字符。
concat() 鏈接字符串。
fromCharCode() 從字符編碼建立一個字符串。
indexOf() 檢索字符串。
match() 找到一個或多個正則表達式的匹配。
replace() 替換與正則表達式匹配的子串。
search() 檢索與正則表達式相匹配的值。
slice() 提取字符串的片段，並在新的字符串中返回被提取的部分。
split() 把字符串分割爲字符串數組。
substr() 從起始索引號提取字符串中指定數目的字符。
substring() 提取字符串中兩個指定的索引號之間的字符。
toLocaleLowerCase() 把字符串轉換爲小寫。
toLocaleUpperCase() 把字符串轉換爲大寫。
toLowerCase() 把字符串轉換爲小寫。
toUpperCase() 把字符串轉換爲大寫。
toString() 返回字符串。
valueOf() 返回某個字符串對象的原始值。

29.說說數組經常使用的十個函數
這個也舉下例子吧，其實在控制檯打印一下就有了的

concat() 鏈接兩個或更多的數組，並返回結果。
join() 把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop() 刪除並返回數組的最後一個元素
push() 向數組的末尾添加一個或更多元素，並返回新的長度。
reverse() 顛倒數組中元素的順序。
shift() 刪除並返回數組的第一個元素
slice() 從某個已有的數組返回選定的元素
sort() 對數組的元素進行排序
splice() 刪除元素，並向數組添加新元素。
toSource() 返回該對象的源代碼。
toString() 把數組轉換爲字符串，並返回結果。
toLocaleString() 把數組轉換爲本地數組，並返回結果。
unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf() 返回數組對象的原始值。

30.談談this是什麼，this表明什麼
this是Javascript語言的一個關鍵字。它表明函數運行時，自動生成的一個內部對象，只能在函數內部使用。隨着函數使用場合的不一樣，this的值會發生變化。可是有一個總的原則，那就是this指的是，調用函數的那個對象。

31.改變this指向的方法
要想把 this 的值從一個上下文傳到另外一個，就要用 call 或者apply 方法。
// 一個對象能夠做爲call和apply的第一個參數，而且this會被綁定到這個對象。
var obj = {a: 'Custom'};
// 這個屬性是在global對象定義的。
var a = 'Global';
function whatsThis(arg) {
return this.a; // this的值取決於函數的調用方式
}
whatsThis(); // 'Global'
whatsThis.call(obj); // 'Custom'
whatsThis.apply(obj); // 'Custom'

32.在a標籤裏面添加一個點擊事件，那麼點擊事件的this指向的是什麼。

Show inner this

這種狀況下，沒有設置內部函數的this，因此它指向global/window對象（即非嚴格模式下調用的函數未
默認狀況下事件處理程序綁定在DOM節點上面，無論是HTML事件處理程序，仍是DOM0、DOM2，都指向了綁定了當前DOM。可是IE的attachEvent特殊，指向window。
你舉例的例子那只是匿名函數的默認調用，因此返回window，這個仍是要注意一下的。設置this時指向的默認對象。

33.TCP/IP斷開的時候雙方須要注意一些什麼？
TCP/IP斷開的時候，你們都知道，TCP/IP斷開須要四次揮手：

客戶端發送一個FIN報文給服務器，表示我將關閉客戶端到服務器端這個方向的鏈接。
服務器收到報文後，發送一個ACK報文給客戶端。
服務器發送一個FIN報文給客戶端，表示本身也將關閉服務器端到客戶端這個方向的鏈接。
客戶端收到FIN後，發回一個ACK報文給服務器，FIN的序號加1。
可是注意，爲何揮手過程，第二步服務器發完信息以後，還要再發一次呢，那是由於，在第二步當中，服務器只是發送說接受到要斷開了，可是服務器可能如今還有正在執行的任務，直到幹完活了，再去說，如今沒事了斷開吧。而後客戶端再接受信息，就開始斷開。
那麼你們也就能夠理解了，若是在斷開的時候，客戶端已經不須要東西了，那麼亦可將服務器第二步後繼續傳遞數據能夠關閉，固然，這也是我的的理解。你們能夠把這個想象成客戶說不要商家繼續發貨了的過程。

34.Vue原理：
. Vue.js是一個提供MVVM數據雙向綁定的庫，其核心思想無非就是：
數據驅動: Vue.js 的核心是一個響應的數據綁定系統，它讓數據與DOM保持同步很是簡單; vue的數據驅動無非就是利用的是ES5Object.defineProperty和存儲器屬性; jq是經過綁定事件來進行操做dom，而vue和react是經過操做obj的屬性來從新渲染dom;
組件系統: 用官方一點的話來形容，組件化就是：實現了擴展HTML元素，封裝可用的代碼。頁面上每一個獨立的可視/可交互區域視爲一個組件；每一個組件對應一個工程目錄，組件所須要的各類資源在這個目錄下就近維護；頁面不過是組件的容器，組件能夠嵌套自由組合造成完整的頁面。簡單的說，其實就是把頁面進行分塊處理，分紅多個小塊，每一個小塊就是一個組件，這樣能夠造成組件的複用，並且提升開發效率。

35. js實現異步的操做有哪些
利用setTimout實現異步
使用Promise對象
動態建立script標籤
利用script標籤提供的async
還有ES6裏面async函數，使得異步操做變得更加方便

36.對於性能優化，你的指標是什麼
靜態文件的大小
加載靜態資源須要的時間
最大限度地減小HTTP請求
使用內容分發網絡
headers添加一個Expires或Cache-Control頭
用gzip的壓縮內容
將樣式表在頂部
js代碼放在底部
避免使用CSS表達式
JavaScript和CSS放在外部
減小DNS查找
縮小JavaScript和CSS
避免重定向
刪除重複的腳本和樣式
減小DOM元素的數量
1． 快速排序的思想和算法：
 快速排序算法使用了分治技術
 JavaScript
function quickSort(array){
function sort(prev, numsize){
var nonius = prev;
var j = numsize -1;
var flag = array[prev];
if ((numsize - prev) > 1) {
while(nonius < j){
for(; nonius < j; j--){
if (array[j] < flag) {
array[nonius++] = array[j];　//a[i] = a[j]; i += 1;
break;
};
}
for( ; nonius < j; nonius++){
if (array[nonius] > flag){
array[j--] = array[nonius];
break;}}}
array[nonius] = flag;
sort(0, nonius);
sort(nonius + 1, numsize);
}}
sort(0, array.length);
return array;
}

37．自我介紹
您好，我叫XXX，深大大三學生，電子信息工程專業。如今大概說下我學習前端的過程，從大二下的暑假，在師兄的指導下開始接觸前端，接着自主學習前端開發知識好比HTML,JS,CSS ;JS框架: jQuery，vue框架等的學習，以及進行一些網頁實戰訓練，好比企業類商城類等網頁的代碼編寫。在上學期開始那會兒準備和小夥伴寫博客，我主要負責前端網頁代碼編寫，小夥伴負責後臺。可是可能因爲當時雙方課程有點緊張，沒有繼續到最後吧。因爲前端最後仍是要和後臺工程師合做制定技術方案並解決技術問題，好比服務接口等問題，因此對進行數據交換等技術也大我從概瞭解下，也稍微對python入門學習下，加深對先後端之間關係的認識 。大概說下我的興趣的話，比較喜歡運動，好比籃球，排球，網球，羽毛球，乒乓球都會玩一下下，不過最近忙了點，不過仍是會堅持一週兩三次的運動。嗯，說完啦。

38．Tcp/ip有幾層
四層：應用，傳輸層，網絡層，數據鏈路層

clipboard.png

clipboard.png

39．選擇學習前端

第一的話：我是電子信息工程專業，學過計算機基礎，C,C++，微機原理，數據結構，可視化語言等知識，對本專業的知識還挺喜歡的，進入IT行業是有優點的；
 第二：在進入大學之前對技術牛人很崇拜，若是本身也能成爲一員就最好了，因此這也是一開始選擇計算機類專業的緣由和寫代碼的動力了。
 第三：前端自己的魅力：作出來的東西可以立刻呈現效果，能夠帶來很直接的成就感。並且若是是一個很炫酷，本身很是用心作出來的東西。

40．HTML5語義標籤

http://www.html5jscss.com/htm...

41. HTML5和html4的區別

  1. HTML5推出的理由

解決Web上存在的問題：
Web瀏覽器間的兼容性低:在一個瀏覽器中能夠運行的HTML、Css、Javascript，在另外一個瀏覽器中不能運行。
緣由：各瀏覽器規範不統一，沒有被標準化。
解決方案：使各瀏覽器的功能符合通用標準。
文檔結構不夠明確：HTML4中元素不能把文檔結構表示清楚。
解決方案：增長與結構相關的元素。
Web應用程序的功能受到限制：HTMLL4對Web應用程序的貢獻很小，好比：不容許同時上傳多個文件。
解決方案：提供供Web應用程序使用的API。

  1. 新增的元素和廢除的元素
    新增元素
    新增的結構元素

section：表示頁面中內容塊，好比章節、頁眉、頁腳或頁面中的其餘部分，可與<h1>到<h6>結合使用表示文檔結構。
article:表示頁面中一塊與上下文不相關的獨立內容，好比博客中的一篇文章或報紙中的一篇文章。
aside:表示article內容以外，與article內容相關的輔助信息。
header：表示頁面中的區域塊，一般用它表示標題。
hgroup：用於對整個頁面或頁面中標題進行整合。
footer：表示頁面中的區域塊，一般表示區域快的腳部或底部，用於承載做者姓名、創做日期等與做者的元素。
nav:表示頁面中導航部分。
figure：表示一段獨立的流內容，通常表示主體流內容的一個獨立單元。

https://www.cnblogs.com/melbo...

42.面向對象和麪向過程的區別：

面向對象：用線性的思惟。與面向過程相輔相成。在軟件開發過程當中，宏觀上，用面向對象來把握事物間複雜的關係，分析系統。微觀上，仍然使用面向過程。

「面向過程」是一種是事件爲中心的編程思想。就是分析出解決問題所需的步驟，而後用函數把這寫步驟實現，並按順序調用。
」面向對象「是以「對象」爲中心的編程思想

簡單的舉個例子：汽車發動、汽車到站。汽車啓動是一個事件，汽車到站是另外一個事件，面向過程編程的過程當中咱們關心的是事件，而不是汽車自己。針對上述兩個事件，造成兩個函數，以後依次調用。
對於面向對象來講，咱們關心的是汽車這類對象，兩個事件只是這類對象所具備的行爲。並且對於這兩個行爲的順序沒有強制要求。
面向過程的思惟方式是分析綜合，面向對象的思惟方式是構造。
面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了。

面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲。

  1. a-z ↩
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程