50道常見的js面試題

1.javascript的typeof返回哪些數據類型

string, boolean, number, undefined, function, object

2.例舉3種強制類型轉換和2種隱式類型轉換?

強制（parseInt, parseFloat, number） 隱式（== === + -）

3.split() 和 join() 的區別

split()是將字符串切割成數組的形式，join()是將數組轉換成字符串。

4.數組方法pop()、push()、unshift()、shift()

• push()尾部添加
• pop()尾部刪除
• unshift()頭部添加
• shift()頭部刪除

5.IE和標準下有哪些兼容性的寫法

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
複製代碼

6.ajax請求的時候get 和 post方式的區別

• get是在url後面 post放在虛擬載體裏面
• get 有大小限制(只能提交少許參數)
• post 比 get 安全
• 應用不一樣，請求數據和提交數據

7.call 和 apply 的區別

Object.call(this, obj1, obj2, obj3) Object.apply(this, arguments)

apply和call的惟一區別是第二個參數的傳遞方式不一樣，apply的第二個參數必須是一個數組，而call容許傳遞一個參數列表。

8.ajax請求時，如何解析json數據

使用JSON.parse

9.事件委託是什麼

利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

10.閉包是什麼，有什麼特性，對頁面有什麼影響

閉包就是可以讀取其餘函數內部變量的函數,使得函數不被GC機制回收，若是過多使用閉包，容易致使內存泄露。

你覺得什麼是閉包的傳送門

11.如何阻止事件冒泡

• ie:阻止冒泡ev.cancelBubble = true;
• 非IE ev.stopPropagation();

12.如何阻止默認事件

• 1.return false
• 2.ev.preventDefault();

13.添加 刪除 替換 插入到某個接點的方法

一、建立新節點

// 建立一個具體的元素
createElement();
// 建立一個文本節點
createTextNode();
複製代碼

二、添加、移除、替換、插入

appendChild();  //添加
removeChild();  //移除
replaceChild(); //替換
insertBefore(); //插入
複製代碼

三、查找

//經過標籤名稱
getElementsByTagName();
//經過元素的Name屬性的值
getElementsByName();
//經過元素Id，惟一性
getElementById();    
複製代碼

14.解釋jsonp的原理，以及爲何不是真正的 ajax

動態建立script標籤，回調函數

Ajax是頁面無刷新請求數據操做

15.document load 和document ready的區別

document.onload 是在結構和樣式,外部js以及圖片加載完才執行js

document.ready是 dom 樹建立完成就執行的方法，原生中沒有這個方法，jquery中有 $().ready(function)

16.」==」和「===」的不一樣

==會自動轉換類型,再判斷是否相等

===不會自動類型轉換，直接去比較

17.函數聲明與函數表達式的區別？

在Javscript中，解析器在向執行環境中加載數據時，對函數聲明和函數表達式並不是是一視同仁的，解析器會率先讀取函數聲明，並使其在執行任何代碼以前可用（能夠訪問），至於函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正被解析執行。

18.對做用域上下文和this的理解，看下列代碼：

var User = {
 count: 1,
 getCount: function() {
  return this.count;
 }
};
console.log(User.getCount()); // 1
var func = User.getCount;
console.log(func()); // 是1和undefined
  
`func`是在`window`的上下文中被執行的，因此不會訪問到`count`屬性。
複製代碼

19.看下面代碼，給出輸出結果。

for(var i = 1; i <= 3; i++){  //建議使用let 可正常輸出i的值
  setTimeout(function(){
    console.log(i);   
  },0); 
};
4 4 4。
// 緣由：Javascript事件處理器在線程空閒以前不會運行。
複製代碼

20.當一個DOM節點被點擊時候，咱們但願可以執行一個函數，應該怎麼作?

box.onlick= function(){}
box.addEventListener("click",function(){},false);
複製代碼

<button οnclick="box()"></button>
複製代碼

21.Javascript的事件流模型都有什麼?

• 「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播
• 「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的
• 「DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡

22.看下列代碼,輸出什麼?解釋緣由。

var a = null;
alert(typeof a);
// object
複製代碼

解釋：JavaScript 誕生以來便如此,null是一個只有一個值的數據類型，這個值就是null。表示一個空指針對象，因此用typeof檢測會返回」object」。

23.判斷字符串以字母開頭，後面能夠是數字，下劃線，字母，長度爲6-30

var reg=/^[a-zA-Z]\w{5,29}$/;
複製代碼

24.回答如下代碼，alert的值分別是多少？

var a = 100;  
    function test() {  
        alert(a);  
        a = 10;  //去掉了var 就變成定義了全局變量了
        alert(a);  
    }  
    test();
    alert(a);
// 正確答案是： 100， 10， 10
複製代碼

25.javaScript的2種變量範圍有什麼不一樣？

• 全局變量：當前頁面內有效
• 局部變量：函數方法內有效

26.null和undefined的區別？

null是一個表示"無"的對象，轉爲數值時爲 0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。當聲明的變量還未被初始化時，變量的默認值爲undefined。null用來表示還沒有存在的對象

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。典型用法是：

• 一、變量被聲明瞭，但沒有賦值時，就等於undefined。
• 二、調用函數時，應該提供的參數沒有提供，該參數等於undefined。
• 三、對象沒有賦值的屬性，該屬性的值爲undefined。
• 四、函數沒有返回值時，默認返回undefined。

null表示"沒有對象"，即該處不該該有值。典型用法是：

• 一、做爲函數的參數，表示該函數的參數不是對象。
• 二、做爲對象原型鏈的終點。

27.new操做符具體幹了什麼呢?

• 一、建立一個空對象，而且this 變量引用該對象，同時還繼承了該函數的原型。
• 二、屬性和方法被加入到this 引用的對象中。
• 三、新建立的對象由this 所引用，而且最後隱式的返回this 。

28.js延遲加載的方式有哪些？

• defer和async
• 動態建立 DOM 方式（建立script，插入到 DOM 中，加載完畢後callBack）
• 按需異步載入js

29.Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash ajax對比

• 一、Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。
• 二、ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。

共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操做DOM

30.不使用循環，建立一個長度爲100的數組，而且每一個元素的值等於它的小標。

new Array(100).fill(0).map((_, c) => c)
複製代碼

31但願獲取到頁面中全部的checkbox怎麼作？(不使用第三方框架)

var inputs = document.getElementsByTagName("input"); // 獲取全部的input標籤對象
var checkboxArray = []; // 初始化空數組，用來存放checkbox對象。
for(var i=0;i<inputs.length;i++){
  var obj = inputs[i];
  if(obj.type=='checkbox'){
     checkboxArray.push(obj);
  }
}
複製代碼

32.寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）

String.prototype.trim= function(){
    return this.replace(/^\s+/,"").replace(/\s+$/,"");
}
複製代碼

33.javascript語言特性中，有不少方面和咱們接觸的其餘編程語言不太同樣,請舉例

javascript語言實現繼承機制的核心就是1(原型)，而不是Java語言那樣的類式繼承。Javascript解析引擎在讀取一個Object的屬性的值時，會沿着2(原型鏈)向上尋找，若是最終沒有找到，則該屬性值爲undefined；若是最終找到該屬性的值，則返回結果。與這個過程不一樣的是，當javascript解析引擎執行「給一個Object的某個屬性賦值」的時候，若是當前Object存在該屬性，則改寫該屬性的值，若是當前的Object自己並不存在該屬性，則賦值該屬性的值。

34.Cookie在客戶機上是如何存儲的

Cookies就是服務器暫存放在你的電腦裏的文本文件，好讓服務器用來辨認你的計算機。當你在瀏覽網站的時候，Web服務器會先送一小小資料放在你的計算機上，Cookies 會幫你在網站上所打的文字或是一些選擇都記錄下來。當下次你再訪問同一個網站，Web服務器會先看看有沒有它上次留下的Cookies資料，有的話，就會依據Cookie裏的內容來判斷使用者，送出特定的網頁內容給你。

35.如何獲取javascript三個數中的最大值和最小值？

Math.max(a,b,c); // 最大值
Math.min(a,b,c); // 最小值
複製代碼

36.javascript是面向對象的，怎麼體現javascript的繼承關係？

使用prototype原型來實現。

37..form中的input能夠設置爲readonly和disable，請問2者有什麼區別？

• readonly 不可編輯，但能夠選擇和複製；值能夠傳遞到後臺
• disabled 不能編輯，不能複製，不能選擇；值不能夠傳遞到後臺

38.列舉javaScript的3種主要數據類型，2種複合數據類型和2種特殊數據類型。

• 主要數據類型：string, boolean, number
• 複合數據類型：function, object
• 特殊類型：undefined，null

39.程序中捕獲異常的方法？

try{

}catch(e){

}finally{

}
複製代碼

40.Ajax原理

// (1)建立對象
var xhr = new XMLHttpRequest();
// (2)打開請求
xhr.open('GET', 'example.txt', true);
// (3)發送請求
xhr.send(); 發送請求到服務器
// (4)接收響應
xhr.onreadystatechange =function(){}
// (1)當readystate值從一個值變爲另外一個值時，都會觸發readystatechange事件。
// (2)當readystate==4時，表示已經接收到所有響應數據。
// (3)當status ==200時，表示服務器成功返回頁面和數據。
// (4)若是(2)和(3)內容同時知足，則能夠經過xhr.responseText，得到服務器返回的內容。
複製代碼

41.解釋什麼是Json:

(1)JSON 是一種輕量級的數據交換格式。
(2)JSON 獨立於語言和平臺，JSON 解析器和 JSON 庫支持許多不一樣的編程語言。
(3)JSON的語法表示三種類型值，簡單值(字符串，數值，布爾值，null),數組，對象
複製代碼

42.js中的3種彈出式消息提醒（警告窗口，確認窗口，信息輸入窗口）的命令式什麼？

• alert
• confirm
• prompt

43.如下代碼執行結果

var uname = 'jack'
function change() {
    alert(uname) // undefined
    var uname = 'lily'
    alert(uname)  // lily
}
change();
// 變量聲明提早問題
複製代碼

44.瀏覽器的滾動距離：

可視區域距離頁面頂部的距離

scrollTop=document.documentElement.scrollTop||document.body.scrollTop
複製代碼

45.可視區的大小：

// 1)innerXXX（不兼容ie）
window.innerHeight 可視區高度，包含滾動條寬度
window.innerWidth 可視區寬度，包含滾動條寬度
// 2)document.documentElement.clientXXX(兼容ie)
document.documentElement.clientWidth可視區寬度，不包含滾動條寬度
document.documentElement.clientHeight可視區高度，不包含滾動條寬度
複製代碼

46.節點的種類有幾種，分別是什麼？

(1)元素節點：nodeType ===1;
(2)文本節點：nodeType ===3;
(3)屬性節點：nodeType ===2;
複製代碼

47.innerHTML和outerHTML的區別

• innerHTML(元素內包含的內容）
• outerHTML(本身以及元素內的內容）

48.offsetWidthoffsetHeight和clientWidth clientHeight的區別

• (1)offsetWidth （content寬度+padding寬度+border寬度）
• (2)offsetHeight（content高度+padding高度+border高度）
• (3)clientWidth（content寬度+padding寬度）
• (4)clientHeight（content高度+padding高度）

49.閉包的好處

• (1)但願一個變量長期駐紮在內存當中(不被垃圾回收機制回收)
• (2)避免全局變量的污染
• (3)私有成員的存在
• (4)安全性提升

50.冒泡排序算法

冒泡排序

var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i <array.length; i++){
    for (var j = 0; j <array.length - i; j++){
        if (array[j] > array[j + 1]){
            temp = array[j + 1];
            array[j + 1] = array[j];
            array[j] = temp;
        }
    }
}
複製代碼

個人公衆號

看文章的帥哥靚女，既然翻到底部了，拿出手機關注我吧~

這是一個神奇的二維碼 ❤