2017面試分享（js面試題記錄）

時間 2019-11-16

原文原文鏈接

2017面試分享（js面試題記錄）

1. 最簡單的一道題

'11' * 2
    'a8' * 3

2. 一道this的問題

var num = 10;
    var obj = {
        num:8,
        inner: {
            num: 6,
            print: function () {
                console.log(this.num);
            }
        }
    }
    num = 888;
    obj.inner.print(); // 6
    var fn = obj.inner.print;
    fn(); //888
    (obj.inner.print)(); //6
    (obj.inner.print = obj.inner.print)(); //888 這個點沒有太理解，雖然答對了

3. var和function的預解析問題,以及變量和function的前後順序的問題

// 如下代碼執行輸出結果是什麼
    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 =10
        console.log(num);
    }(100))

    //仍然是預解析(在與解析過程當中還要考慮一下當前變量的做用於)
    function m () {
        console.log(a1); // underfined
        console.log(a2); // underfined
        console.log(b1); // underfined
        console.log(b2); // underfined
        if(false) {
            function b1 (){};
            var a1 = 10;
        }
        if(true) {
            function b2 (){};
            var a2 = 10;
        }
        console.log(a1); // underfined
        console.log(a2); // 10
        console.log(b1); // underfined
        console.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、函數形參進行一個解析的準備過程。並且在這個「預解析」過程當中，有一個預解析前後順序，即函數的形參 -> function -> var。並且重名時預留函數、後來者覆蓋前者。預解析結果形參若是有值則解析到值，沒有則爲underfined，函數則解析到整個函數體，變量都爲underfined；這道題目中沒有參數出現，因此先不討論。因此這道題在「預解析」時，函數聲明權重優先會被提高javascript

4. 一個算法問題

有一個已經排序的數組，比方[1,4,6,9,11,15,18],給你一個新的數，插入到數組中，寫一個functionphp

5. 函數節流是什麼，有什麼優勢（以前沒有了解過這個概念，懵逼了）

函數節流的目的

從字面上就能夠理解，函數節流就是用來節流函數從而必定程度上優化性能的。例如，DOM 操做比起非DOM 交互須要更多的內存和CPU 時間。連續嘗試進行過多的DOM 相關操做可能會致使瀏覽器掛起，有時候甚至會崩潰。尤爲在IE 中使用onresize 事件處理程序的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize 事件處理程序內部若是嘗試進行DOM 操做，其高頻率的更改可能會讓瀏覽器崩潰。又例如，咱們常見的一個搜索的功能，咱們通常是綁定keyup事件，每按下一次鍵盤就搜索一次。可是咱們的目的主要是每輸入一些內容搜索一次而已。爲了解決這些問題，就可使用定時器對函數進行節流。css

函數節流的原理

某些代碼不能夠在沒有間斷的狀況連續重複執行。第一次調用函數，建立一個定時器，在指定的時間間隔以後運行代碼。當第二次調用該函數時，它會清除前一次的定時器並設置另外一個。若是前一個定時器已經執行過了，這個操做就沒有任何意義。然而，若是前一個定時器還沒有執行，其實就是將其替換爲一個新的定時器。目的是隻有在執行函數的請求中止了一段時間以後才執行。
http://www.cnblogs.com/LuckyW...html

6. 寫一個方法，實現傳入兩個參數(parentNode, childNode),要求若是childNode是parentNode的子孫節點，則返回爲true，不然返回爲false

7. dom事件流原理是什麼，分爲那幾個階段？

事件捕獲處於目標階段事件冒泡vue

8. dom事件委託什麼原理，有什麼優缺點

事件委託原理:事件冒泡機制

優勢

1.能夠大量節省內存佔用，減小事件註冊。好比ul上代理全部li的click事件就很不錯。
2.能夠實現當新增子對象時，無需再對其進行事件綁定，對於動態內容部分尤其合適java

缺點

事件代理的經常使用應用應該僅限於上述需求，若是把全部事件都用事件代理，可能會出現事件誤判。即本不應被觸發的事件被綁定上了事件。react

9. http的cache機制，以及200狀態下怎麼實現 from cache（表示接觸最多的就是304的from cache）（用於優化，沒有接觸過，須要理解）

含義

定義：瀏覽器緩存（Browser Caching）是爲了加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就能夠從本地磁盤顯示文檔，這樣就能夠加速頁面的閱覽。jquery

做用

cache的做用：
一、減小延遲，讓你的網站更快，提升用戶體驗。
二、避免網絡擁塞，減小請求量，減小輸出帶寬。webpack

實現手段

Cache-Control中的max-age是實現內容cache的主要手段，共有3種經常使用策略：max-age和Last-Modified（If-Modified-Since）的組合、僅max-age、max-age和ETag的組合。git

對於強制緩存，服務器通知瀏覽器一個緩存時間，在緩存時間內，下次請求，直接用緩存，不在時間內，執行比較緩存策略。
對於比較緩存，將緩存信息中的Etag和Last-Modified經過請求發送給服務器，由服務器校驗，返回304狀態碼時，瀏覽器直接使用緩存。

10. 一個原型鏈繼承的問題

// 有一個構造函數A，寫一個函數B，繼承A
    function A (num) {
        this.titileName = num;
    }
    A.prototype = {
        fn1: function () {},
        fn2: function () {}
    }

這個問題的關注點是B繼承的A的靜態屬性，同時B的原型鏈中不存在A實例的titleName屬性

11. 什麼是虛擬dom

React爲啥這麼大？由於它實現了一個虛擬DOM（Virtual DOM）。虛擬DOM是幹什麼的？這就要從瀏覽器自己講起

如咱們所知，在瀏覽器渲染網頁的過程當中，加載到HTML文檔後，會將文檔解析並構建DOM樹，而後將其與解析CSS生成的CSSOM樹一塊兒結合產生愛的結晶——RenderObject樹，而後將RenderObject樹渲染成頁面（固然中間可能會有一些優化，好比RenderLayer樹）。這些過程都存在與渲染引擎之中，渲染引擎在瀏覽器中是於JavaScript引擎（JavaScriptCore也好V8也好）分離開的，但爲了方便JS操做DOM結構，渲染引擎會暴露一些接口供JavaScript調用。因爲這兩塊相互分離，通訊是須要付出代價的，所以JavaScript調用DOM提供的接口性能不咋地。各類性能優化的最佳實踐也都在儘量的減小DOM操做次數。

而虛擬DOM幹了什麼？它直接用JavaScript實現了DOM樹（大體上）。組件的HTML結構並不會直接生成DOM，而是映射生成虛擬的JavaScript DOM結構，React又經過在這個虛擬DOM上實現了一個 diff 算法找出最小變動，再把這些變動寫入實際的DOM中。這個虛擬DOM以JS結構的形式存在，計算性能會比較好，並且因爲減小了實際DOM操做次數，性能會有較大提高

12. js基礎數據類型和引用類型分別是什麼？這個前提條件下寫一個getType，返回相應的類型

1.基本數據類型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用數據類型（對象）：Object （Array，Date，RegExp，Function）

function gettype(nm){
    return Object.prototype.toString.call(nm);
}

13. dom選擇器優先級是什麼，以及權重值計算（一道老問題了）

1.行內樣式 1000
2.id 0100
3.類選擇器、僞類選擇器、屬性選擇器[type="text"] 0010
4.標籤選擇器、僞元素選擇器(::first-line) 0001
5.通配符*、子選擇器、相鄰選擇器 0000

14. vue雙向數據綁定的原理是什麼

首先傳輸對象的雙向數據綁定 Object.defineProperty(target, key, decription),在decription中設置get和set屬性（此時應注意description中get和set不能與描述屬性共存）
數組的實現與對象不一樣。
同時運用觀察者模式實現wather，用戶數據和view視圖的更新

15. react和vue比較來講有什麼區別

1 component層面，web component和virtual dom
2 數據綁定（vue雙向，react的單向）等好多
3 計算屬性 vue 有，提供方便；而 react 不行
4 vue 能夠 watch 一個數據項；而 react 不行
5 vue 因爲提供的 direct 特別是預置的 directive 由於場景場景開發更容易；react 沒有
6 生命週期函數名太長 directive

16. git使用過程當中，若是你在開發着業務，忽然另外一個分支有一個bug要改，你怎麼辦

git stash       //將本次修改存到暫存區（緊急切換分支時）
git stash pop   //將全部暫存區的內容取出來

17. postcss的使用

18. 網頁佈局有哪幾種，有什麼區別

靜態、自適應、流式、響應式四種網頁佈局
靜態佈局：意思就是無論瀏覽器尺寸具體是多少，網頁佈局就按照當時寫代碼的佈局來佈置；
自適應佈局：就是說你看到的頁面，裏面元素的位置會變化而大小不會變化；
流式佈局：你看到的頁面，元素的大小會變化而位置不會變化——這就致使若是屏幕太大或者過小都會致使元素沒法正常顯示。
自適應佈局：每一個屏幕分辨率下面會有一個佈局樣式，同時位置會變並且大小也會變。

18. 執行下面代碼

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]);  // 333

19.

var R = (function() {
        var u = {a:1,b:2};
        var r = {
            fn: function(k) {
                return u[k];
            }
        }
        return r;
    }());
    R.fn('a');  // 1

上述代碼中如何獲取匿名函數中的u

20. 不適用循環語句（包括map、forEach方法）實現一個100長度的數組，索引值和值相同的數組[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(',');


// 方法五（函數式變成，參考網絡）
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. 下面語句執行結果輸出

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); // 0

22. 科普

1) dom節點的根節點是否是body
回答：不是，dom節點的根節點是html(包含head和body，head中分爲meta、title等。body又分爲一組)

2）dom元素都會有offsetParent嗎
回答： offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），而且是已進行過CSS定位的容器元素。若是這個容器元素未進行CSS定位, 則offsetParent屬性的取值爲根元素(在標準兼容模式下爲html元素；在怪異呈現模式下爲body元素)的引用。當容器元素的style.display 被設置爲 "none"時（譯註：IE和Opera除外），offsetParent屬性返回 null。

3) [1,3,5]轉譯成字符串是什麼
回答： '1,3,5'
調用toString方法，生成該字符串

4）li標籤的祖級元素能夠爲li，父級元素也能夠爲例
回答：錯誤

23. jsonp原理，jquery是怎麼實現的，這樣實現有什麼好處和壞處

原理

在同源策略下;在某個服務器下的頁面是沒法獲取到該服務器之外的數據的;Jquery中ajax 的核心是經過 XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加 <script>標籤來調用服務器提供的 js腳本
當咱們正常地請求一個JSON數據的時候，服務端返回的是一串 JSON類型的數據，而咱們使用 JSONP模式來請求數據的時候服務端返回的是一段可執行的 JavaScript代碼。由於jsonp 跨域的原理就是用的動態加載 script的src ，因此咱們只能把參數經過 url的方式傳遞, 因此jsonp的 type類型只能是get ！

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不一樣的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 數據類型
    jsonp: 'backfunc', // 指定回調函數名，與服務器端接收的一致，並回傳回來
})
其實jquery 內部會轉化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
而後動態加載
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc= 
而後後端就會執行backfunc(傳遞參數 )，把數據經過實參的形式發送出去。

在jquery 源碼中， jsonp的實現方式是動態添加<script>標籤來調用服務器提供的 js腳本。jquery 會在window對象中加載一個全局的函數，當 <script>代碼插入時函數執行，執行完畢後就 <script>會被移除。同時jquery還對非跨域的請求進行了優化，若是這個請求是在同一個域名下那麼他就會像正常的 Ajax請求同樣工做。

24. http協議屬於七層協議中的哪一層，下一層是什麼

七層結構：物理層、數據鏈路層、網絡層、傳輸層、會話層、表示層、應用層
tcp屬於傳輸層；http屬於應用層。
表現層

25. js垃圾回收機制知道哪些，v8引擎使用的哪種

js的兩種回收機制

1 標記清除（mark and sweep）
2 引用計數（reference counting）

javascript與V8引擎

垃圾回收機制的好處和壞處

好處：大幅簡化程序的內存管理代碼，減輕程序猿負擔，而且減小由於長時間運轉而帶來的內存泄露問題。

壞處：自動回收意味着程序猿沒法掌控內存。ECMAScript中沒有暴露垃圾回收的藉口，咱們沒法強迫其進行垃圾回收，更加沒法干預內存管理。

V8 自動垃圾回收算法
https://segmentfault.com/a/11...

26. 做用域何時生成的？

頁面加載-->建立window全局對象，並生成全局做用域-->而後生成執行上下文，預解析變量(變量提高)，生成全局變量對象；
$scope

27. websocket長鏈接原理是什麼

含義

Websocket是一個持久化的協議，相對於HTTP這種非持久的協議來講。

原理

相似長輪循長鏈接 ; 發送一次請求 ; 源源不斷的獲得信息

28. http緩存知道哪些

http://blog.csdn.net/yzf91321...

29. 講一下事件循環機制

執行上下文(Execution context)
函數調用棧(call stack)
隊列數據結構(queue)
Promise

https://zhuanlan.zhihu.com/p/...

30. 理解web安全嗎？都有哪幾種，介紹以及如何預防

1.XSS，也就是跨站腳本注入

攻擊方法：
1. 手動攻擊:
編寫注入腳本，好比」/><script>alert(document.cookie());</script><!--等，
手動測試目標網站上有的input, textarea等全部可能輸入文本信息的區域
2. 自動攻擊
利用工具掃描目標網站全部的網頁並自動測試寫好的注入腳本，好比：Burpsuite等
防護方法：
1. 將cookie等敏感信息設置爲httponly，禁止Javascript經過document.cookie得到
2. 對全部的輸入作嚴格的校驗尤爲是在服務器端，過濾掉任何不合法的輸入，好比手機號必須是數字，一般能夠採用正則表達式
3. 淨化和過濾掉沒必要要的html標籤，好比：<iframe>, alt,<script> 等
4. 淨化和過濾掉沒必要要的Javascript的事件標籤，好比：onclick, onfocus等
5. 轉義單引號，雙引號，尖括號等特殊字符，能夠採用htmlencode編碼 或者過濾掉這些特殊字符
6. 設置瀏覽器的安全設置來防範典型的XSS注入

2.SQL注入

攻擊方法：
編寫惡意字符串，好比‘ or  1=1--等，
手動測試目標網站上全部涉及數據庫操做的地方
防護方法：
1. 禁止目標網站利用動態拼接字符串的方式訪問數據庫
2. 減小沒必要要的數據庫拋出的錯誤信息
3. 對數據庫的操做賦予嚴格的權限控制
4. 淨化和過濾掉沒必要要的SQL保留字，好比：where, or, exec 等
5. 轉義單引號，上引號，尖括號等特殊字符，能夠採用htmlencode編碼 或者過濾掉這些特殊字符

3.CSRF，也就是跨站請求僞造

就是攻擊者冒用用戶的名義，向目標站點發送請求
防範方法：
1. 在客戶端進行cookie的hashing，並在服務端進行hash認證
2. 提交請求是須要填寫驗證碼
3. 使用One-Time Tokens爲不一樣的表單建立不一樣的僞隨機值

40. sessionStorage和localstorage能跨域拿到嗎？好比我在www.baidu.com設置的值能在m.baidu.com能拿到嗎？爲何

localStorage會跟cookie同樣受到跨域的限制，會被document.domain影響

41. localstorage不能手動刪除的時候，何時過時

除非被清除，不然永久保存 clear()可清楚
sessionStorage 僅在當前會話下有效，關閉頁面或瀏覽器後被清除

42. cookie能夠設置什麼域？能夠設置.com嗎

能夠經過設置domin來實現

43. 登陸狀態的保存你認爲能夠保存在sessionstorage或者localstorage或者cookie或者你知道的哪一種方式，存在了哪裏？？爲何保存在那裏

44. flux -> redux -> mobx 變化的本質是什麼

存儲結構將對象加工可觀察函數式 vs 面向對象
https://zhuanlan.zhihu.com/p/...

45. 按需加載路由怎麼加載對應的chunk文件的？換句話說瀏覽器怎麼知道何時加載這個chunk，以及webpack是怎麼識別那個多個通過hash過的chunk文件

50. get和post有什麼區別？get能夠經過body傳遞數據嗎

把數據放到 body 裏面，必須用 POST 方式取，這是 HTTP 協議限制的。

51. 下拉刷新你怎麼實現

52. 預加載options請求爲何會出現，能避免這個請求嗎？

針對上方問題存在沒有解答的 ; 或則解答不正確詳細的 ; 歡迎留言 ; 我會及時更正 ; 也歡迎留下你認爲經典的面試題 ; 我都會補充進來 ; 共同進步

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。