js面試題（轉）

時間  2019-12-09
標籤 面試 欄目 JavaScript 简体版
原文   原文鏈接

https://segmentfault.com/a/1190000015288700
javascript

1 介紹JavaScript的基本數據類型php

Number、String 、Boolean 、Null、Undefined 
Object 是 JavaScript 中全部對象的父對象
數據封裝類對象：Object、Array、Boolean、Number 和 String
其餘對象：Function、Arguments、Math、Date、RegExp、Error
新類型：Symbolcss

2 說說寫JavaScript的基本規範？
1) 不要在同一行聲明多個變量
2) 使用 ===或!==來比較true/false或者數值
3) switch必須帶有default分支
4) 函數應該有返回值
5) for if else 必須使用大括號
6) 語句結束加分號
7) 命名要有意義，使用駝峯命名法html

3 jQuery使用建議
1) 儘可能減小對dom元素的訪問和操做
2) 儘可能避免給dom元素綁定多個相同類型的事件處理函數，能夠將多個相同類型事件
處理函數合併到一個處理函數，經過數據狀態來處理分支
3) 儘可能避免使用toggle事件java

4 Ajax使用
全稱 ： Asynchronous Javascript And XML
所謂異步，就是向服務器發送請求的時候，咱們沒必要等待結果，而是能夠同時作其餘的事情，等到有告終果它本身會根據設定進行後續操做，與此同時，頁面是不會發生整頁刷新的，提升了用戶體驗。
建立Ajax的過程：
1) 建立XMLHttpRequest對象（異步調用對象）程序員

var xhr = new XMLHttpRequest();

2) 建立新的Http請求（方法、URL、是否異步）web

xhr.open(‘get’,’example.php’,false);

3) 設置響應HTTP請求狀態變化的函數。
onreadystatechange事件中readyState屬性等於4。響應的HTTP狀態爲200(OK)或者304(Not Modified)。
4) 發送http請求ajax

xhr.send(data);

5) 獲取異步調用返回的數據
注意：
1) 頁面初次加載時，儘可能在web服務器一次性輸出全部相關的數據，只在頁面加載完成以後，用戶進行操做時採用ajax進行交互。
2) 同步ajax在IE上會產生頁面假死的問題。因此建議採用異步ajax。
3) 儘可能減小ajax請求次數
4) ajax安全問題，對於敏感數據在服務器端處理，避免在客戶端處理過濾。對於關鍵業務邏輯代碼也必須放在服務器端處理。算法

5 JavaScript有幾種類型的值？你能畫一下他們的內存圖嗎？
基本數據類型存儲在棧中，引用數據類型（對象）存儲在堆中，指針放在棧中。
兩種類型的區別是：存儲位置不一樣；原始數據類型直接存儲在棧中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；引用數據類型存儲在堆中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能
引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體。json

6 棧和堆的區別？
棧（stack）：由編譯器自動分配釋放，存放函數的參數值，局部變量等；
堆（heap）：通常由程序員分配釋放，若程序員不釋放，程序結束時可能由操做系統釋放。

7 Javascript實現繼承的幾種方式
能夠參考個人另外一篇文章JavaScript實現類與繼承的方法（全面整理）

8 Javascript建立對象的幾種方式？
能夠參考個人另外一篇文章JavaScript實現類與繼承的方法（全面整理）

9 Javascript做用鏈域
做用域鏈的原理和原型鏈很相似，若是這個變量在本身的做用域中沒有，那麼它會尋找父級的，直到最頂層。
注意：JS沒有塊級做用域，若要造成塊級做用域，可經過（function（）｛｝）（）；當即執行的形式實現。

10 談談this的理解
1) this老是指向函數的直接調用者（而非間接調用者）
2) 若是有new關鍵字，this指向new出來的那個對象
3) 在事件中，this指向目標元素，特殊的是IE的attachEvent中的this老是指向全局對象window。

11 eval是作什麼的？
它的功能是把對應的字符串解析成JS代碼並運行；應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

12 什麼是window對象? 什麼是document對象?
window對象表明瀏覽器中打開的一個窗口。document對象表明整個html文檔。實際上，document對象是window對象的一個屬性。

13 null，undefined的區別？
null表示一個對象被定義了，但存放了空指針，轉換爲數值時爲0。
undefined表示聲明的變量未初始化，轉換爲數值時爲NAN。
typeof(null) -- object;
typeof(undefined) -- undefined

14 寫一個通用的事件偵聽器函數(機試題)

15 ["1", "2", "3"].map(parseInt) 答案是多少？
[1,NaN,NaN]

解析：
Array.prototype.map()
array.map(callback[, thisArg])
callback函數的執行規則
參數：自動傳入三個參數
currentValue（當前被傳遞的元素）；
index（當前被傳遞的元素的索引）；
array（調用map方法的數組）

parseInt方法接收兩個參數
第三個參數["1", "2", "3"]將被忽略。parseInt方法將會經過如下方式被調用
parseInt("1", 0)
parseInt("2", 1)
parseInt("3", 2)

parseInt的第二個參數radix爲0時，ECMAScript5將string做爲十進制數字的字符串解析；
parseInt的第二個參數radix爲1時，解析結果爲NaN；
parseInt的第二個參數radix在2—36之間時，若是string參數的第一個字符（除空白之外），不屬於radix指定進制下的字符，解析結果爲NaN。
parseInt("3", 2)執行時，因爲"3"不屬於二進制字符，解析結果爲NaN。

16 關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
IE爲事件冒泡，Firefox同時支持事件捕獲和事件冒泡。但並不是全部瀏覽器都支持事件捕獲。jQuery中使用event.stopPropagation()方法可阻止冒泡;（舊IE的方法 ev.cancelBubble = true;）

17 什麼是閉包（closure），爲何要用它？
閉包指的是一個函數能夠訪問另外一個函數做用域中變量。常見的構造方法，是在一個函數內部定義另一個函數。內部函數能夠引用外層的變量；外層變量不會被垃圾回收機制回收。
注意，閉包的原理是做用域鏈，因此閉包訪問的上級做用域中的變量是個對象，其值爲其運算結束後的最後一個值。
優勢：避免全局變量污染。缺點：容易形成內存泄漏。
例子：

  1.  
    function makeFunc() {
  2.  
    var name = "Mozilla";
  3.  
    function displayName() {
  4.  
    console.log(name);
  5.  
    }
  6.  
    return displayName;
  7.  
    }
  8.  
    var myFunc = makeFunc();
  9.  
    myFunc(); //輸出Mozilla
  10.  
     

myFunc 變成一個 閉包。閉包是一種特殊的對象。它由兩部分構成：函數，以及建立該函數的環境。環境由閉包建立時在做用域中的任何局部變量組成。在咱們的例子中，myFunc 是一個閉包，由 displayName 函數和閉包建立時存在的 "Mozilla" 字符串造成。

18 javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？
除了正常模式運行外，ECMAscript添加了第二種運行模式：「嚴格模式」。
做用：
1) 消除js不合理，不嚴謹地方，減小怪異行爲
2) 消除代碼運行的不安全之處，
3) 提升編譯器的效率，增長運行速度
4) 爲將來的js新版本作鋪墊。

19 如何判斷一個對象是否屬於某個類？
使用instanceof 即if(a instanceof Person){alert('yes');}

20 new操做符具體幹了什麼呢?
1) 建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
2) 屬性和方法被加入到 this 引用的對象中。
3) 新建立的對象由 this 所引用，而且最後隱式的返回 this 。

21 Javascript中，執行時對象查找時，永遠不會去查找原型的函數？
Object.hasOwnProperty(proName)：是用來判斷一個對象是否有你給出名稱的屬性。不過須要注意的是，此方法沒法檢查該對象的原型鏈中是否具備該屬性，該屬性必須是對象自己的一個成員。

22 對JSON的瞭解？
全稱：JavaScript Object Notation
JSON中對象經過「{}」來標識，一個「{}」表明一個對象，如{「AreaId」:」123」}，對象的值是鍵值對的形式（key：value）。JSON是JS的一個嚴格的子集，一種輕量級的數據交換格式，相似於xml。數據格式簡單，易於讀寫，佔用帶寬小。
兩個函數：
JSON.parse(str)
解析JSON字符串 把JSON字符串變成JavaScript值或對象
JSON.stringify(obj) 
將一個JavaScript值(對象或者數組)轉換爲一個 JSON字符串
eval('('＋json＋')') 
用eval方法注意加括號 並且這種方式更容易被攻擊

23 JS延遲加載的方式有哪些？
JS的延遲加載有助與提升頁面的加載速度。
defer和async、動態建立DOM方式（用得最多）、按需異步載入JS
defer：延遲腳本。當即下載，但延遲執行（延遲到整個頁面都解析完畢後再運行），按照腳本出現的前後順序執行。
async：異步腳本。下載完當即執行，但不保證按照腳本出現的前後順序執行。

24 同步和異步的區別?
同步的概念在操做系統中：不一樣進程協同完成某項工做而前後次序調整（經過阻塞、喚醒等方式），同步強調的是順序性，誰先誰後。異步不存在順序性。
同步：瀏覽器訪問服務器，用戶看到頁面刷新，從新發請求，等請求完，頁面刷新，新內容出現，用戶看到新內容以後進行下一步操做。
異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器在後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。

25 什麼是跨域問題 ，如何解決跨域問題?
能夠參考個人另外一篇文章什麼是跨域以及幾種簡單解決方案

26 頁面編碼和被請求的資源編碼若是不一致如何處理？
若請求的資源編碼，如外引js文件編碼與頁面編碼不一樣。可根據外引資源編碼方式定義爲 charset="utf-8"或"gbk"。
好比：http://www.yyy.com/a.html 中嵌入了一個http://www.xxx.com/test.js
a.html 的編碼是gbk或gb2312的。 而引入的js編碼爲utf-8的 ，那就須要在引入的時候
<script src="http://www.xxx.com/test.js&quot; charset="utf-8"></script>

27 模塊化開發怎麼作？
模塊化開發指的是在解決某一個複雜問題或者一系列問題時，依照一種分類的思惟把問題進行系統性的分解。模塊化是一種將複雜系統分解爲代碼結構更合理，可維護性更高的可管理的模塊方式。對於軟件行業：系統被分解爲一組高內聚，低耦合的模塊。
（1）定義封裝的模塊
（2）定義新模塊對其餘模塊的依賴
（3）可對其餘模塊的引入支持。在JavaScript中出現了一些非傳統模塊開發方式的規範。 CommonJS的模塊規範，AMD（Asynchronous Module Definition），CMD（Common Module Definition）等。AMD是異步模塊定義，全部的模塊將被異步加載，模塊加載不影響後邊語句運行。

28 AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？
AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。
區別：
1) 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。
2) CMD 推崇依賴就近，AMD 推崇依賴前置。
3) AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。

  1.  
    // CMD
  2.  
    define(function(require, exports, module) {
  3.  
    var a = require('./a')
  4.  
    a.doSomething()
  5.  
    // 此處略去 100 行
  6.  
    var b = require('./b') // 依賴能夠就近書寫
  7.  
    b.doSomething()
  8.  
    })
  9.  
    // AMD 默認推薦
  10.  
    define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
  11.  
    a.doSomething();
  12.  
    // 此處略去 100 行
  13.  
    b.doSomething();
  14.  
    })
  15.  
     

29 requireJS的核心原理是什麼？（如何動態加載的？如何避免屢次加載的？如何緩存的？）
核心是js的加載模塊，經過正則匹配模塊以及模塊的依賴關係，保證文件加載的前後順序，根據文件的路徑對加載過的文件作了緩存。

30 call和apply
call（）方法和apply（）方法的做用相同，動態改變某個類的某個方法的運行環境。他們的區別在於接收參數的方式不一樣。在使用call（）方法時，傳遞給函數的參數必須逐個列舉出來。使用apply（）時，傳遞給函數的是參數數組。

31 談一談你對ECMAScript6的瞭解

32 documen.write和 innerHTML的區別
document.write()只能重繪整個頁面

  1.  
    setTimeout(function(){
  2.  
    document.write('<p>5 secs later</p>');
  3.  
    }, 5000);
  4.  
     

或

  1.  
    window.onload = function() { document.write("HI");
  2.  
     

innerHTML能夠重繪頁面的一部分

33 迴流與重繪
當渲染樹中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(reflow)。每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造這部分渲染樹。完成迴流後，瀏覽器會從新繪製受影響的部分到屏幕中，該過程成爲重繪

34 DOM操做
（1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點
（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
（3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
getElementById() //經過元素Id，惟一性

35 數組對象有哪些原生方法，列舉一下
pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight
forEach、map、filter、every、some

36 那些操做會形成內存泄漏
全局變量、閉包、DOM清空或刪除時，事件未清除、子元素存在引用

37 什麼是Cookie 隔離？（或者：請求資源的時候不要帶cookie怎麼作）
經過使用多個非主要域名來請求靜態文件，若是靜態文件都放在主域名下，那靜態文件請求的時候帶有的cookie的數據提交給server是很是浪費的，還不如隔離開。由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣能夠下降請求頭的大小，下降請求時間，從而達到下降總體請求延時的目的。同時這種方式不會將cookie傳入server，也減小了server對cookie的處理分析環節，提升了server的http請求的解析速度。

38 響應事件
onclick鼠標點擊某個對象；onfocus獲取焦點；onblur失去焦點；onmousedown鼠標被按下

39 flash和js經過什麼類如何交互?
Flash提供了ExternalInterface接口與JavaScript通訊，ExternalInterface有兩個方法，call和addCallback，call的做用是讓Flash調用js裏的方法，addCallback是用來註冊flash函數讓js調用。

40 Flash與Ajax各自的優缺點？
Flash：適合處理多媒體、矢量圖形、訪問機器。但對css、處理文本不足，不容易被搜索。
Ajax：對css、文本支持很好，但對多媒體、矢量圖形、訪問機器不足。

41 有效的javascript變量定義規則
第一個字符必須是一個字母、下劃線（_）或一個美圓符號（$）；其餘字符能夠是字母、下劃線、美圓符號或數字。

42 XML與JSON的區別？
1) 數據體積方面。JSON相對於XML來說，數據的體積小，傳遞的速度更快些。
2) 數據交互方面。JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。
3) 數據描述方面。JSON對數據的描述性比XML較差。
4) 傳輸速度方面。JSON的速度要遠遠快於XML。

43 HTML與XML的區別？
（1）XML用來傳輸和存儲數據，HTML用來顯示數據；
（2）XML使用的標籤不用預先定義
（3）XML標籤必須成對出現
（4）XML對大小寫敏感
（5）XML中空格不會被刪減
（6）XML中全部特殊符號必須用編碼表示
（7）XML中的圖片必須有文字說明

44 漸進加強與優雅降級
漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進，達到更好的用戶體驗。
優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

45 Web Worker和Web Socket？
web socket：在一個單獨的持久鏈接上提供全雙工、雙向的通訊。使用自定義的協議（ws://、wss://），同源策略對web socket不適用。
web worker：運行在後臺的JavaScript，不影響頁面的性能。
建立worker：var worker = new Worker(url);
向worker發送數據：worker.postMessage(data);
接收worker返回的數據：worker.onmessage
終止一個worker的執行：worker.terminate();

46 JS垃圾回收機制？
1) 標記清除：
這個算法把「對象是否再也不須要」簡化定義爲「對象是否能夠得到」。
這個算法假定設置一個叫作根（root）的對象（在Javascript裏，根是全局對象）。按期的，垃圾回收器將從根開始，找全部從根開始引用的對象，而後找這些對象引用的對象。從根開始，垃圾回收器將找到全部能夠得到的對象和全部不能得到的對象。

2) 引用計數：
這是最簡單的垃圾收集算法。此算法把「對象是否再也不須要」簡化定義爲「對象有沒有其餘對象引用到它」。若是沒有引用指向該對象（零引用），對象將被垃圾回收機制回收。
該算法有個限制：沒法處理循環引用。兩個對象被建立，並互相引用，造成了一個循環。它們被調用以後不會離開函數做用域，因此它們已經沒有用了，能夠被回收了。然而，引用計數算法考慮到它們互相都有至少一次引用，因此它們不會被回收。

47 web應用從服務器主動推送data到客戶端的方式？
JavaScript數據推送：commet（基於http長鏈接的服務器推送技術）。
基於web socket的推送：SSE（server-send Event）

48 如何刪除一個cookie？
1） 將cookie的失效時間設置爲過去的時間（expires）

  1.  
    document. cookie = ‘user=’+ encodeURIComponent(‘name’) + ';
  2.  
    expires=’+ new Date(0);

2） 將系統時間設置爲當前時間往前一點時間

  1.  
    var data = new Date();
  2.  
    date.setDate(date.getDate()-1);

49 attribute與property的區別？
attribute是dom元素在文檔中做爲html標籤擁有的屬性
property是dom元素在js中做爲對象擁有的屬性。
因此，對於html的標準屬性來講，attribute和property是同步的，是會自動更新的。但對於自定義屬性，他們不一樣步。

50 Ajax請求的頁面歷史記錄狀態問題？（1）經過location.hash記錄狀態，讓瀏覽器記錄Ajax請求時頁面狀態的變化。（2）經過HTML5的history.pushstate，來實現瀏覽器地址欄的無刷新改變。

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