2017面试分享（js面试题记录）
2017面試分享（js面試題記錄）
1. 最簡單的一道題
'11' * 2'a8' * 32. 一道this的問題
var num = 10;var obj = {num:8,inner: {num: 6,print: function () {console.log(this.num);}}}num = 888;obj.inner.print(); // 6var fn = obj.inner.print;fn(); //888(obj.inner.print)(); //6(obj.inner.print = obj.inner.print)(); //888 這個點沒有太理解，雖然答對了3. var和function的預(yù)解析問題,以及變量和function的先后順序的問題
// 以下代碼執(zhí)行輸出結(jié)果是什么function b () {console.log(a);var a = 10;function a() {};a = 100;console.log(a);}b();function c () {console.log(a);function a() {};var a = 10;a = 100;console.log(a);}c();(function d (num) {console.log(num);var num = 10;}(100))(function e (num) {console.log(num);var num = 10;function num () {};}(100))(function f (num) {function num () {};console.log(num);var num =10console.log(num);}(100))//仍然是預(yù)解析(在與解析過程中還要考慮一下當(dāng)前變量的作用于)function m () {console.log(a1); // underfinedconsole.log(a2); // underfinedconsole.log(b1); // underfinedconsole.log(b2); // underfinedif(false) {function b1 (){};var a1 = 10;}if(true) {function b2 (){};var a2 = 10;}console.log(a1); // underfinedconsole.log(a2); // 10console.log(b1); // underfinedconsole.log(b2); // function}m();function n() {if(2>1) {arr = 10;brr = 10;let arr;var brr;console.log(arr);console.log(brr);}}n(); // ReferenceError此階段瀏覽器只是對var、function、函數(shù)形參進行一個解析的準(zhǔn)備過程。而且在這個“預(yù)解析”過程中，有一個預(yù)解析先后順序，即函數(shù)的形參 -> function -> var。而且重名時預(yù)留函數(shù)、后來者覆蓋前者。預(yù)解析結(jié)果形參如果有值則解析到值，沒有則為underfined，函數(shù)則解析到整個函數(shù)體，變量都為underfined；這道題目中沒有參數(shù)出現(xiàn)，所以先不討論。所以這道題在“預(yù)解析”時，函數(shù)聲明權(quán)重優(yōu)先會被提升
4. 一個算法問題
有一個已經(jīng)排序的數(shù)組，比方[1,4,6,9,11,15,18],給你一個新的數(shù)，插入到數(shù)組中，寫一個function
5. 函數(shù)節(jié)流是什么，有什么優(yōu)點（之前沒有了解過這個概念，懵逼了）
函數(shù)節(jié)流的目的
從字面上就可以理解，函數(shù)節(jié)流就是用來節(jié)流函數(shù)從而一定程度上優(yōu)化性能的。例如，DOM 操作比起非DOM 交互需要更多的內(nèi)存和CPU 時間。連續(xù)嘗試進行過多的DOM 相關(guān)操作可能會導(dǎo)致瀏覽器掛起，有時候甚至?xí)罎ⅰＳ绕湓贗E 中使用onresize 事件處理程序的時候容易發(fā)生，當(dāng)調(diào)整瀏覽器大小的時候，該事件會連續(xù)觸發(fā)。在onresize 事件處理程序內(nèi)部如果嘗試進行DOM 操作，其高頻率的更改可能會讓瀏覽器崩潰。又例如，我們常見的一個搜索的功能，我們一般是綁定keyup事件，每按下一次鍵盤就搜索一次。但是我們的目的主要是每輸入一些內(nèi)容搜索一次而已。為了解決這些問題，就可以使用定時器對函數(shù)進行節(jié)流。
函數(shù)節(jié)流的原理
某些代碼不可以在沒有間斷的情況連續(xù)重復(fù)執(zhí)行。第一次調(diào)用函數(shù)，創(chuàng)建一個定時器，在指定的時間間隔之后運行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時，它會清除前一次的定時器并設(shè)置另一個。如果前一個定時器已經(jīng)執(zhí)行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執(zhí)行，其實就是將其替換為一個新的定時器。目的是只有在執(zhí)行函數(shù)的請求停止了一段時間之后才執(zhí)行。
http://www.cnblogs.com/LuckyW...
6. 寫一個方法，實現(xiàn)傳入兩個參數(shù)(parentNode, childNode),要求如果childNode是parentNode的子孫節(jié)點，則返回為true，否則返回為false
7. dom事件流原理是什么，分為那幾個階段？
事件捕獲 處于目標(biāo)階段 事件冒泡
8. dom事件委托什么原理，有什么優(yōu)缺點
事件委托原理:事件冒泡機制
優(yōu)點
1.可以大量節(jié)省內(nèi)存占用，減少事件注冊。比如ul上代理所有l(wèi)i的click事件就很不錯。
2.可以實現(xiàn)當(dāng)新增子對象時，無需再對其進行事件綁定，對于動態(tài)內(nèi)容部分尤為合適
缺點
事件代理的常用應(yīng)用應(yīng)該僅限于上述需求，如果把所有事件都用事件代理，可能會出現(xiàn)事件誤判。即本不該被觸發(fā)的事件被綁定上了事件。
9. http的cache機制，以及200狀態(tài)下怎么實現(xiàn) from cache（表示接觸最多的就是304的from cache）（用于優(yōu)化，沒有接觸過，需要理解）
含義
定義：瀏覽器緩存（Browser Caching）是為了加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當(dāng)訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽。
作用
cache的作用：
1、減少延遲，讓你的網(wǎng)站更快，提高用戶體驗。
2、避免網(wǎng)絡(luò)擁塞，減少請求量，減少輸出帶寬。
實現(xiàn)手段
Cache-Control中的max-age是實現(xiàn)內(nèi)容cache的主要手段，共有3種常用策略：max-age和Last-Modified（If-Modified-Since）的組合、僅max-age、max-age和ETag的組合。
對于強制緩存，服務(wù)器通知瀏覽器一個緩存時間，在緩存時間內(nèi)，下次請求，直接用緩存，不在時間內(nèi)，執(zhí)行比較緩存策略。
對于比較緩存，將緩存信息中的Etag和Last-Modified通過請求發(fā)送給服務(wù)器，由服務(wù)器校驗，返回304狀態(tài)碼時，瀏覽器直接使用緩存。
10. 一個原型鏈繼承的問題
// 有一個構(gòu)造函數(shù)A，寫一個函數(shù)B，繼承Afunction A (num) {this.titileName = num;}A.prototype = {fn1: function () {},fn2: function () {}}這個問題的關(guān)注點是B繼承的A的靜態(tài)屬性，同時B的原型鏈中不存在A實例的titleName屬性
11. 什么是虛擬dom
React為啥這么大？因為它實現(xiàn)了一個虛擬DOM（Virtual DOM）。虛擬DOM是干什么的？這就要從瀏覽器本身講起
如我們所知，在瀏覽器渲染網(wǎng)頁的過程中，加載到HTML文檔后，會將文檔解析并構(gòu)建DOM樹，然后將其與解析CSS生成的CSSOM樹一起結(jié)合產(chǎn)生愛的結(jié)晶——RenderObject樹，然后將RenderObject樹渲染成頁面（當(dāng)然中間可能會有一些優(yōu)化，比如RenderLayer樹）。這些過程都存在與渲染引擎之中，渲染引擎在瀏覽器中是于JavaScript引擎（JavaScriptCore也好V8也好）分離開的，但為了方便JS操作DOM結(jié)構(gòu)，渲染引擎會暴露一些接口供JavaScript調(diào)用。由于這兩塊相互分離，通信是需要付出代價的，因此JavaScript調(diào)用DOM提供的接口性能不咋地。各種性能優(yōu)化的最佳實踐也都在盡可能的減少DOM操作次數(shù)。
而虛擬DOM干了什么？它直接用JavaScript實現(xiàn)了DOM樹（大致上）。組件的HTML結(jié)構(gòu)并不會直接生成DOM，而是映射生成虛擬的JavaScript DOM結(jié)構(gòu)，React又通過在這個虛擬DOM上實現(xiàn)了一個 diff 算法找出最小變更，再把這些變更寫入實際的DOM中。這個虛擬DOM以JS結(jié)構(gòu)的形式存在，計算性能會比較好，而且由于減少了實際DOM操作次數(shù)，性能會有較大提升
12. js基礎(chǔ)數(shù)據(jù)類型和引用類型分別是什么？這個前提條件下寫一個getType，返回相應(yīng)的類型
1.基本數(shù)據(jù)類型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用數(shù)據(jù)類型（對象）：Object （Array，Date，RegExp，Function）
13. dom選擇器優(yōu)先級是什么，以及權(quán)重值計算（一道老問題了）
1.行內(nèi)樣式 1000
2.id 0100
3.類選擇器、偽類選擇器、屬性選擇器[type="text"] 0010
4.標(biāo)簽選擇器、偽元素選擇器(::first-line) 0001
5.通配符*、子選擇器、相鄰選擇器 0000
14. vue雙向數(shù)據(jù)綁定的原理是什么
首先傳輸對象的雙向數(shù)據(jù)綁定 Object.defineProperty(target, key, decription),在decription中設(shè)置get和set屬性（此時應(yīng)注意description中g(shù)et和set不能與描述屬性共存）
數(shù)組的實現(xiàn)與對象不同。
同時運用觀察者模式實現(xiàn)wather，用戶數(shù)據(jù)和view視圖的更新
15. react和vue比較來說有什么區(qū)別
1 component層面，web component和virtual dom
2 數(shù)據(jù)綁定（vue雙向，react的單向）等好多
3 計算屬性 vue 有，提供方便；而 react 不行
4 vue 可以 watch 一個數(shù)據(jù)項；而 react 不行
5 vue 由于提供的 direct 特別是預(yù)置的 directive 因為場景場景開發(fā)更容易；react 沒有
6 生命周期函數(shù)名太長 directive
16. git使用過程中，如果你在開發(fā)著業(yè)務(wù)，突然另一個分支有一個bug要改，你怎么辦
git stash //將本次修改存到暫存區(qū)（緊急切換分支時） git stash pop //將所有暫存區(qū)的內(nèi)容取出來17. postcss的使用
18. 網(wǎng)頁布局有哪幾種，有什么區(qū)別
靜態(tài)、自適應(yīng)、流式、響應(yīng)式四種網(wǎng)頁布局
靜態(tài)布局：意思就是不管瀏覽器尺寸具體是多少，網(wǎng)頁布局就按照當(dāng)時寫代碼的布局來布置；
自適應(yīng)布局：就是說你看到的頁面，里面元素的位置會變化而大小不會變化；
流式布局：你看到的頁面，元素的大小會變化而位置不會變化——這就導(dǎo)致如果屏幕太大或者太小都會導(dǎo)致元素?zé)o法正常顯示。
自適應(yīng)布局：每個屏幕分辨率下面會有一個布局樣式，同時位置會變而且大小也會變。
18. 執(zhí)行下面代碼
var a = {}; var b = {key: 'b'}; var c = {key: 'c'}; var d = [3,5,6]; a[b] = 123; a[c] = 345; a[d] = 333; console.log(a[b]); // 345 console.log(a[c]); // 345 console.log(a[d]); // 33319.
var R = (function() {var u = {a:1,b:2};var r = {fn: function(k) {return u[k];}}return r;}());R.fn('a'); // 1上述代碼中如何獲取匿名函數(shù)中的u
20. 不適用循環(huán)語句（包括map、forEach方法）實現(xiàn)一個100長度的數(shù)組，索引值和值相同的數(shù)組[0,1,2,3,4,5........99]
var arr = new Array(100); //方法1 [...arr.keys()]; //方法二 Array.from(arr.keys());//方法三 Array.from({length: 100});// 方法四 借助string var arr1 = new Array(101); var str = arr1.join('1,'); str = str.replace(/(1\,)/g, function ($0, $1, index) {var start = '' + Math.ceil(index/2);if(index < str.length - 2) {start += ','}return start; }); return str.split(',');// 方法五（函數(shù)式變成，參考網(wǎng)絡(luò)） function reduce(arr, val) {if(Object.prototype.toString.apply(val)){return;}if(val >= 100) {return arr;}arr.push(val);return reduce(arr, val+1); } var res = reduce([], 0)21. 下面語句執(zhí)行結(jié)果輸出
var a = function (val, index) {console.log(index);return {fn: function (name) {return a(name, val);}} }var b = a(0); // underfined b.fn(1); // 0 b.fn(2); // 0 b.fn(3); // 022. 科普
1) dom節(jié)點的根節(jié)點是不是body
回答： 不是，dom節(jié)點的根節(jié)點是html(包含head和body，head中分為meta、title等。body又分為一組)
2）dom元素都會有offsetParent嗎
回答： offsetParent屬性返回一個對象的引用，這個對象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(在標(biāo)準(zhǔn)兼容模式下為html元素；在怪異呈現(xiàn)模式下為body元素)的引用。 當(dāng)容器元素的style.display 被設(shè)置為 "none"時（譯注：IE和Opera除外），offsetParent屬性 返回 null。
3) [1,3,5]轉(zhuǎn)譯成字符串是什么
回答： '1,3,5'
調(diào)用toString方法，生成該字符串
4）li標(biāo)簽的祖級元素可以為li，父級元素也可以為例
回答： 錯誤
23. jsonp原理，jquery是怎么實現(xiàn)的，這樣實現(xiàn)有什么好處和壞處
原理
在同源策略下;在某個服務(wù)器下的頁面是無法獲取到該服務(wù)器以外的數(shù)據(jù)的;Jquery中ajax 的核心是通過 XmlHttpRequest獲取非本頁內(nèi)容，而jsonp的核心則是動態(tài)添加 <script>標(biāo)簽來調(diào)用服務(wù)器提供的 js腳本
當(dāng)我們正常地請求一個JSON數(shù)據(jù)的時候，服務(wù)端返回的是一串 JSON類型的數(shù)據(jù)，而我們使用 JSONP模式來請求數(shù)據(jù)的時候服務(wù)端返回的是一段可執(zhí)行的 JavaScript代碼。因為jsonp 跨域的原理就是用的動態(tài)加載 script的src ，所以我們只能把參數(shù)通過 url的方式傳遞, 所以jsonp的 type類型只能是get ！
在jquery 源碼中， jsonp的實現(xiàn)方式是動態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的 js腳本。jquery 會在window對象中加載一個全局的函數(shù)，當(dāng) <script>代碼插入時函數(shù)執(zhí)行，執(zhí)行完畢后就 <script>會被移除。同時jquery還對非跨域的請求進行了優(yōu)化，如果這個請求是在同一個域名下那么他就會像正常的 Ajax請求一樣工作。
24. http協(xié)議屬于七層協(xié)議中的哪一層，下一層是什么
七層結(jié)構(gòu)：物理層、數(shù)據(jù)鏈路層、網(wǎng)絡(luò)層、傳輸層、會話層、表示層、應(yīng)用層
tcp屬于傳輸層；http屬于應(yīng)用層。
表現(xiàn)層
25. js垃圾回收機制知道哪些，v8引擎使用的哪一種
js的兩種回收機制
1 標(biāo)記清除（mark and sweep）
2 引用計數(shù)（reference counting）
javascript與V8引擎
垃圾回收機制的好處和壞處
好處：大幅簡化程序的內(nèi)存管理代碼，減輕程序猿負(fù)擔(dān)，并且減少因為長時間運轉(zhuǎn)而帶來的內(nèi)存泄露問題。
壞處：自動回收意味著程序猿無法掌控內(nèi)存。ECMAScript中沒有暴露垃圾回收的借口，我們無法強迫其進行垃圾回收，更加無法干預(yù)內(nèi)存管理。
V8 自動垃圾回收算法
https://segmentfault.com/a/11...
26. 作用域什么時候生成的？
頁面加載-->創(chuàng)建window全局對象，并生成全局作用域-->然后生成執(zhí)行上下文，預(yù)解析變量(變量提升)，生成全局變量對象；
$scope
27. websocket長連接原理是什么
含義
Websocket是一個持久化的協(xié)議，相對于HTTP這種非持久的協(xié)議來說。
原理
類似長輪循長連接 ; 發(fā)送一次請求 ; 源源不斷的得到信息
28. http緩存知道哪些
http://blog.csdn.net/yzf91321...
29. 講一下事件循環(huán)機制
執(zhí)行上下文(Execution context)
函數(shù)調(diào)用棧(call stack)
隊列數(shù)據(jù)結(jié)構(gòu)(queue)
Promise
https://zhuanlan.zhihu.com/p/...
30. 理解web安全嗎？都有哪幾種，介紹以及如何預(yù)防
1.XSS，也就是跨站腳本注入
攻擊方法： 1. 手動攻擊: 編寫注入腳本，比如”/><script>alert(document.cookie());</script><!--等， 手動測試目標(biāo)網(wǎng)站上有的input, textarea等所有可能輸入文本信息的區(qū)域 2. 自動攻擊 利用工具掃描目標(biāo)網(wǎng)站所有的網(wǎng)頁并自動測試寫好的注入腳本，比如：Burpsuite等 防御方法： 1. 將cookie等敏感信息設(shè)置為httponly，禁止Javascript通過document.cookie獲得 2. 對所有的輸入做嚴(yán)格的校驗尤其是在服務(wù)器端，過濾掉任何不合法的輸入，比如手機號必須是數(shù)字，通常可以采用正則表達(dá)式 3. 凈化和過濾掉不必要的html標(biāo)簽，比如：<iframe>, alt,<script> 等 4. 凈化和過濾掉不必要的Javascript的事件標(biāo)簽，比如：onclick, onfocus等 5. 轉(zhuǎn)義單引號，雙引號，尖括號等特殊字符，可以采用htmlencode編碼 或者過濾掉這些特殊字符 6. 設(shè)置瀏覽器的安全設(shè)置來防范典型的XSS注入2.SQL注入
攻擊方法： 編寫惡意字符串，比如‘ or 1=1--等， 手動測試目標(biāo)網(wǎng)站上所有涉及數(shù)據(jù)庫操作的地方 防御方法： 1. 禁止目標(biāo)網(wǎng)站利用動態(tài)拼接字符串的方式訪問數(shù)據(jù)庫 2. 減少不必要的數(shù)據(jù)庫拋出的錯誤信息 3. 對數(shù)據(jù)庫的操作賦予嚴(yán)格的權(quán)限控制 4. 凈化和過濾掉不必要的SQL保留字，比如：where, or, exec 等 5. 轉(zhuǎn)義單引號，上引號，尖括號等特殊字符，可以采用htmlencode編碼 或者過濾掉這些特殊字符3.CSRF，也就是跨站請求偽造
就是攻擊者冒用用戶的名義，向目標(biāo)站點發(fā)送請求 防范方法： 1. 在客戶端進行cookie的hashing，并在服務(wù)端進行hash認(rèn)證 2. 提交請求是需要填寫驗證碼 3. 使用One-Time Tokens為不同的表單創(chuàng)建不同的偽隨機值40. sessionStorage和localstorage能跨域拿到嗎？比如我在www.baidu.com設(shè)置的值能在m.baidu.com能拿到嗎？為什么
localStorage會跟cookie一樣受到跨域的限制，會被document.domain影響
41. localstorage不能手動刪除的時候，什么時候過期
除非被清除，否則永久保存 clear()可清楚
sessionStorage 僅在當(dāng)前會話下有效，關(guān)閉頁面或瀏覽器后被清除
42. cookie可以設(shè)置什么域？可以設(shè)置.com嗎
可以通過設(shè)置domin來實現(xiàn)
43. 登錄狀態(tài)的保存你認(rèn)為可以保存在sessionstorage或者localstorage或者cookie或者你知道的哪種方式，存在了哪里？？為什么保存在那里
44. flux -> redux -> mobx 變化的本質(zhì)是什么
存儲結(jié)構(gòu) 將對象加工可觀察 函數(shù)式 vs 面向?qū)ο?br />https://zhuanlan.zhihu.com/p/...
45. 按需加載路由怎么加載對應(yīng)的chunk文件的？換句話說瀏覽器怎么知道什么時候加載這個chunk，以及webpack是怎么識別那個多個經(jīng)過hash過的chunk文件
50. get和post有什么區(qū)別？get可以通過body傳遞數(shù)據(jù)嗎
把數(shù)據(jù)放到 body 里面，必須用 POST 方式取，這是 HTTP 協(xié)議限制的。
51. 下拉刷新你怎么實現(xiàn)
52. 預(yù)加載options請求為什么會出現(xiàn)，能避免這個請求嗎？
針對上方問題存在沒有解答的 ; 或則解答不正確詳細(xì)的 ; 歡迎留言 ; 我會及時更正 ; 也歡迎留下你認(rèn)為經(jīng)典的面試題 ; 我都會補充進來 ; 共同進步
總結(jié)
以上是生活随笔為你收集整理的2017面试分享（js面试题记录）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 停止mysql服务的命令行是什么
- 下一篇： 使用 Karma、Mocha、Chai