寫下標(biāo)題時(shí)，我不禁回想起那年畢業(yè)季被找工作支配的恐懼。所謂天要下雨娘要嫁人，裸轉(zhuǎn)前端勢(shì)在必行，抱著天生我材必有用的豐滿理想，過(guò)著“哪哪都缺人，哪哪都不缺自己”的骨感現(xiàn)實(shí)生活，才明白玉不琢不成器，作為璞玉的自己努力地打磨著，終于成就了自己，成為了一名合格的，殺豬刀磨刀石。
序言
本文整理總結(jié)自己在畢業(yè)季找工作時(shí)，前端筆試遇到的各種細(xì)小知識(shí)點(diǎn)，多為基礎(chǔ)知識(shí)，既不全面，也不系統(tǒng)。因此，對(duì)于讀者而言，本文適用于筆試前對(duì)前端知識(shí)點(diǎn)的復(fù)習(xí)，或作為前端參考知識(shí)閱讀，但不適用于對(duì)前端知識(shí)系統(tǒng)和深入地理解，也不適用于對(duì)前端系統(tǒng)架構(gòu)的理解。
基于這一點(diǎn)，本文不會(huì)對(duì)各類知識(shí)點(diǎn)進(jìn)行細(xì)致的歸納，但會(huì)盡可能保證知識(shí)點(diǎn)不重復(fù)。如有任何錯(cuò)誤，歡迎指正。
P.S. 為了更好地服務(wù)讀者，本文提到的定義或方法大部分都可以點(diǎn)擊跳轉(zhuǎn)到MDN查看詳細(xì)解釋。
知識(shí)點(diǎn)匯總
JS基礎(chǔ)
-
typeof操作符返回一個(gè)字符串，表示未經(jīng)計(jì)算的操作數(shù)的類型。
-
- 聲明變量限制在其聲明位置的上下文中，而非聲明變量總是全局的。
- 聲明變量在任何代碼執(zhí)行前創(chuàng)建，而非聲明變量只有在執(zhí)行賦值操作的時(shí)候才會(huì)被創(chuàng)建。
- 聲明變量是它所在上下文環(huán)境的不可配置屬性，非聲明變量是可配置的（如非聲明變量可以被刪除）。
undeclared僅在嚴(yán)格模式中出現(xiàn)ReferenceError警告，在代碼里賦值了一個(gè)未聲明的變量，即在代碼中有沒有帶著var關(guān)鍵字的賦值。Hoisting：變量提升noscript如果頁(yè)面上的腳本類型不受支持或者當(dāng)前在瀏覽器中關(guān)閉了腳本，則在 HTML <noscript> 元素中定義腳本未被執(zhí)行時(shí)的替代內(nèi)容。DNS (Domain Name System) 域名系統(tǒng)，將方便用戶記憶的域名地址domain names轉(zhuǎn)換為IP數(shù)字串IP addresses，從而在因特網(wǎng)Internet 或者私有網(wǎng)絡(luò)上找到特定的機(jī)器。
String
substring()方法返回一個(gè)字符串在開始索引到結(jié)束索引之間的一個(gè)子集, 或從開始索引直到字符串的末尾的一個(gè)子集。語(yǔ)法：str.substring(indexStart[, indexEnd])正則的匹配方法。
^[a-z]是匹配小寫的 26 個(gè)字母，[A-Z]是匹配大寫的26 個(gè)字母，{n}表示匹配幾位，\w表示任意的字母、數(shù)字、下畫線。indexOf()方法返回調(diào)用它的String對(duì)象中第一次出現(xiàn)的指定值的索引，從fromIndex處進(jìn)行搜索。如果未找到該值，則返回 -1。語(yǔ)法：str.indexOf(searchValue [, fromIndex])-
RegExp對(duì)象的方法-
exec()方法在一個(gè)指定字符串中執(zhí)行一個(gè)搜索匹配。返回一個(gè)結(jié)果數(shù)組或null。 -
test()方法執(zhí)行一個(gè)檢索，用來(lái)查看正則表達(dá)式與指定的字符串是否匹配。返回 true 或 false。 -
toString()返回一個(gè)表示該正則表達(dá)式的字符串。
-
Array
reverse()方法將數(shù)組中元素的位置顛倒，并返回該數(shù)組。數(shù)組的第一個(gè)元素會(huì)變成最后一個(gè)，數(shù)組的最后一個(gè)元素變成第一個(gè)。該方法會(huì)改變?cè)瓟?shù)組。 語(yǔ)法：arr.reverse()sort()方法用原地算法對(duì)數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組。默認(rèn)排序順序是在將元素轉(zhuǎn)換為字符串，然后比較它們的UTF-16代碼單元值序列時(shí)構(gòu)建的，語(yǔ)法：arr.sort([compareFunction])join()方法將一個(gè)數(shù)組（或一個(gè)類數(shù)組對(duì)象）的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。如果數(shù)組只有一個(gè)項(xiàng)目，那么將返回該項(xiàng)目而不使用分隔符。語(yǔ)法：arr.join([separator])splice()方法通過(guò)刪除或替換現(xiàn)有元素或者原地添加新的元素來(lái)修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組。語(yǔ)法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])slice()方法返回一個(gè)新的數(shù)組對(duì)象，這一對(duì)象是一個(gè)由 begin 和 end 決定的原數(shù)組的淺拷貝（包括 begin，不包括end）。原始數(shù)組不會(huì)被改變。語(yǔ)法：arr.slice([begin[, end]])-
如何判讀一個(gè)對(duì)象是Array？
Array.isArray(obj)Object.prototype.toString.call(obj) == '[object Array]'obj.constructor == Array
-
數(shù)組的number類型強(qiáng)制轉(zhuǎn)換：
- console.log(+new Array(2)); //當(dāng)new Array數(shù)組長(zhǎng)度為2以上，結(jié)果都是NaN，為空，0，1時(shí)，結(jié)果是0；
- console.log(+[]);//0
- console.log(+[1]);//1
- console.log(+[1,2])//NaN
- console.log(+[undefined]);//0
- console.log(+[undefined,undefined]);//NaN
Window
-
window.location只讀屬性，返回一個(gè)Location對(duì)象，其中包含有關(guān)文檔當(dāng)前位置的信息。-
Location.assign()加載給定URL的內(nèi)容資源到這個(gè)Location對(duì)象所關(guān)聯(lián)的對(duì)象上。 -
Location.reload()方法用來(lái)刷新當(dāng)前頁(yè)面。該方法只有一個(gè)參數(shù)，當(dāng)值為 true 時(shí)，將強(qiáng)制瀏覽器從服務(wù)器加載頁(yè)面資源，當(dāng)值為 false 或者未傳參時(shí)，瀏覽器則可能從緩存中讀取頁(yè)面。 -
Location.replace()用給定的URL替換掉當(dāng)前的資源。與assign()方法不同的是用replace()替換的新頁(yè)面不會(huì)被保存在會(huì)話的歷史History中，這意味著用戶將不能用后退按鈕轉(zhuǎn)到該頁(yè)面
-
-
彈出框
open()Window 接口的 open() 方法，是用指定的名稱將指定的資源加載到瀏覽器上下文（窗口 window ，內(nèi)嵌框架 iframe 或者標(biāo)簽 tab ）。如果沒有指定名稱，則一個(gè)新的窗口會(huì)被打開并且指定的資源會(huì)被加載進(jìn)這個(gè)窗口的瀏覽器上下文中。
DOM(Document Object Model)
強(qiáng)烈推薦書籍《DOM 啟蒙》，這本書包含了基本上JavaScript中關(guān)于DOM的所有內(nèi)容，清晰且系統(tǒng)。
-
查找、添加、移除、替換、復(fù)制、創(chuàng)建節(jié)點(diǎn)
-
getElementById,querySelector查找節(jié)點(diǎn) -
appendChild,insertBefore添加節(jié)點(diǎn) -
removeChild移除節(jié)點(diǎn) -
replaceChild替換節(jié)點(diǎn) -
cloneNode復(fù)制節(jié)點(diǎn) -
createElement創(chuàng)建元素
-
-
事件取消
-
preventDefault()：Event接口的preventDefault()方法，告訴user agent：如果此事件沒有被顯式處理，它默認(rèn)的動(dòng)作也不應(yīng)該照常執(zhí)行。此事件還是繼續(xù)傳播，除非碰到事件偵聽器調(diào)用stopPropagation()或stopImmediatePropagation()，才停止傳播。 -
stopPropagation(): 阻止捕獲和冒泡階段中當(dāng)前事件的進(jìn)一步傳播。 -
stopImmediatePropagation()：阻止事件冒泡并且阻止相同事件的其他偵聽器被調(diào)用。
-
其他一些重要知識(shí)點(diǎn)
這些知識(shí)點(diǎn)可能會(huì)相對(duì)比較復(fù)雜，一些問(wèn)題直接是用引用了別人的回答。這些知識(shí)點(diǎn)都包括在筆試范圍內(nèi)。
-
instanceof運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。 -
立即調(diào)用函數(shù)表達(dá)式(IIFE)是一個(gè)在定義時(shí)就會(huì)立即執(zhí)行的JavaScript函數(shù)。
閉包：函數(shù)和對(duì)其周圍狀態(tài)（lexical environment，詞法環(huán)境）的引用捆綁在一起構(gòu)成閉包（closure）。也就是說(shuō)，閉包可以讓你從內(nèi)部函數(shù)訪問(wèn)外部函數(shù)作用域。在 JavaScript 中，每當(dāng)函數(shù)被創(chuàng)建，就會(huì)在函數(shù)生成時(shí)生成閉包。
-
請(qǐng)求頭和響應(yīng)頭
- 請(qǐng)求(客戶端->服務(wù)端[request])
- GET(請(qǐng)求的方式) /newcoder/hello.html(請(qǐng)求的目標(biāo)資源) HTTP/1.1(請(qǐng)求采用的協(xié)議和版本號(hào))
- Accept: /(客戶端能接收的資源類型)
- Accept-Language: en-us(客戶端接收的語(yǔ)言類型)
- Connection: Keep-Alive(維護(hù)客戶端和服務(wù)端的連接關(guān)系)
- Host: localhost:8080(連接的目標(biāo)主機(jī)和端口號(hào))
- Referer: http://localhost/links.asp(告訴服務(wù)器我來(lái)自于哪里)
- User-Agent: Mozilla/4.0(客戶端版本號(hào)的名字)
- Accept-Encoding: gzip, deflate(客戶端能接收的壓縮數(shù)據(jù)的類型)
- If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(緩存時(shí)間)
- Cookie(客戶端暫存服務(wù)端的信息)
- Date: Tue, 11 Jul 2000 18:23:51 GMT(客戶端請(qǐng)求服務(wù)端的時(shí)間)
- 響應(yīng)(服務(wù)端->客戶端[response])
- HTTP/1.1(響應(yīng)采用的協(xié)議和版本號(hào)) 200(狀態(tài)碼) OK(描述信息)
- Location: http://www.baidu.com(服務(wù)端需要客戶端訪問(wèn)的頁(yè)面路徑)
- Server:apache tomcat(服務(wù)端的Web服務(wù)端名)
- Content-Encoding: gzip(服務(wù)端能夠發(fā)送壓縮編碼類型)
- Content-Length: 80(服務(wù)端發(fā)送的壓縮數(shù)據(jù)的長(zhǎng)度)
- Content-Language: zh-cn(服務(wù)端發(fā)送的語(yǔ)言類型)
- Content-Type: text/html; charset=GB2312(服務(wù)端發(fā)送的類型及采用的編碼方式)
- Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服務(wù)端對(duì)該資源最后修改的時(shí)間)
- Refresh: 1;url=http://www.it315.org(服務(wù)端要求客戶端1秒鐘后，刷新，然后訪問(wèn)指定的頁(yè)面路徑)
- Content-Disposition: attachment; filename=aaa.zip(服務(wù)端要求客戶端以下載文件的方式打開該文件)
- Transfer-Encoding: chunked(分塊傳遞數(shù)據(jù)到客戶端）
- Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服務(wù)端發(fā)送到客戶端的暫存數(shù)據(jù))
- Expires: -1//3種(服務(wù)端禁止客戶端緩存頁(yè)面數(shù)據(jù))
- Cache-Control: no-cache(服務(wù)端禁止客戶端緩存頁(yè)面數(shù)據(jù))
- Pragma: no-cache(服務(wù)端禁止客戶端緩存頁(yè)面數(shù)據(jù))
- Connection: close(1.0)/(1.1)Keep-Alive(維護(hù)客戶端和服務(wù)端的連接關(guān)系)
- Date: Tue, 11 Jul 2000 18:23:51 GMT(服務(wù)端響應(yīng)客戶端的時(shí)間)
- 在服務(wù)器響應(yīng)客戶端的時(shí)候，帶上Access-Control-Allow-Origin頭信息，解決跨域的一種方法。
- 請(qǐng)求(客戶端->服務(wù)端[request])
-
url、href、rel、src
- url：統(tǒng)一資源定位符是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示，url就是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。互聯(lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的URL;一般就是瀏覽器地址欄填寫的。
- href：Hypertext Reference的縮寫。意思是超文本引用,用來(lái)建立當(dāng)前元素和文檔之間的鏈接，屬性的值可以是任何有效文檔的相對(duì)或絕對(duì)URL，包括片段標(biāo)識(shí)符和JavaScript代碼段。常見的就是a標(biāo)簽中的。
- rel：relationship的英文縮寫,REL屬性用于定義鏈接的文件和HTML文檔之間的關(guān)系,e.g. StyleSheet，用于定義鏈接的文件和HTML文檔之間的關(guān)系。
- src：也可以是源文件（source）的簡(jiǎn)寫，一般用作目錄名稱用于存放源代碼，一般指的是引用外部文件的路徑，像img標(biāo)簽中src表示圖片的路徑。
-
JS執(zhí)行順序
- 在HTML body部分中的JavaScripts會(huì)在頁(yè)面加載的時(shí)候被執(zhí)行。
- 在HTML head部分中的JavaScripts會(huì)在被調(diào)用的時(shí)候才執(zhí)行。
- head 部分中的腳本: 需調(diào)用才執(zhí)行的腳本或事件觸發(fā)執(zhí)行的腳本放在HTML的head部分中。當(dāng)你把腳本放在head部分中時(shí)，可以保證腳本在任何調(diào)用之前被加載。
- body 部分中的腳本: 當(dāng)頁(yè)面被加載時(shí)執(zhí)行的腳本放在HTML的body部分。放在body部分的腳本通常被用來(lái)生成頁(yè)面的內(nèi)容。
-
主流瀏覽器內(nèi)核私有屬性css前綴：
- mozilla內(nèi)核 (firefox,flock等) -moz
- webkit內(nèi)核(safari,chrome等) -webkit
- opera內(nèi)核(opera瀏覽器) -o
- trident內(nèi)核(ie瀏覽器) -ms
后記
這篇先整理這么多吧。
總之，謝謝閱讀！
