前端JavaScript有哪些面試題

這期內容當中小編將會給大家帶來有關前端JavaScript有哪些面試題，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

JavaScript面試題集錦

1.js基礎

1.eval是做什么的？

 它的功能是把對應的字符串解析成JS代碼并運行；

 應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。

 由JSON字符串轉換為JSON對象的時候可以用eval，var obj =eval('('+ str +')');

2.什么是window對象? 什么是document對象?

 window對象是指瀏覽器打開的窗口。

 document對象是Document對象（HTML 文檔對象）的一個只讀引用，window對象的一個屬性。

3.null，undefined 的區別？

 null      表示一個對象是“沒有值”的值，也就是值為“空”；

 undefined     表示一個變量聲明了沒有初始化(賦值)；

 undefined不是一個有效的JSON，而null是；

 undefined的類型(typeof)是undefined；

 null的類型(typeof)是object；

 Javascript將未賦值的變量默認值設為undefined；

 Javascript從來不會將變量設為null。它是用來讓程序員表明某個用var聲明的變量時沒有值的。

 typeof undefined

    //"undefined"

    undefined :是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回 undefined；

    例如變量被聲明了，但沒有賦值時，就等于undefined

 typeof null

    //"object"

    null : 是一個對象(空對象, 沒有任何屬性和方法)；

    例如作為函數的參數，表示該函數的參數不是對象；

 注意：

    在驗證null時，一定要使用　=== ，因為 == 無法分別 null 和　undefined

    null == undefined // true

    null === undefined // false

 再來一個例子：

null
    Q：有張三這個人么？
    A：有！
    Q：張三有房子么？
    A：沒有！
    undefined
    Q：有張三這個人么？
    A：有！
    Q: 張三有多少歲？
    A: 不知道（沒有被告訴）

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

 parseInt() 函數能解析一個字符串，并返回一個整數，需要兩個參數 (val, radix)，

 其中 radix 表示要解析的數字的基數。【該值介于 2 ~ 36 之間，并且字符串中的數字不能大于radix才能正確返回數字結果值】;

 但此處 map 傳了 3 個 (element, index, array),我們重寫parseInt函數測試一下是否符合上面的規則。

 function parseInt(str, radix) {
     return str+'-'+radix;
 };

 var a=["1", "2", "3"];

 a.map(parseInt);  // ["1-0", "2-1", "3-2"] 不能大于radix

 因為二進制里面，沒有數字3,導致出現超范圍的radix賦值和不合法的進制解析，才會返回NaN

 所以["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN]

5.事件是？IE與火狐的事件機制有什么區別？ 如何阻止冒泡？

1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。

2. 事件處理機制：I.E.是事件冒泡、Firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件；

3. ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）

6.javascript 代碼中的"use strict";是什么意思 ? 使用它區別是什么？

 use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,

 使JS編碼更加規范化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為。

 默認支持的糟糕特性都會被禁用，比如不能用with，也不能在意外的情況下給全局變量賦值;

 全局變量的顯示聲明,函數必須聲明在頂層，不允許在非函數代碼塊內聲明函數,arguments.callee也不允許使用；

 消除代碼運行的一些不安全之處，保證代碼運行的安全,限制函數中的arguments修改，嚴格模式下的eval函數的行為和非嚴格模式的也不相同;

 提高編譯器效率，增加運行速度；

 為未來新版本的Javascript標準化做鋪墊。

7.Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

 hasOwnProperty

 javaScript中hasOwnProperty函數方法是返回一個布爾值，指出一個對象是否具有指定名稱的屬性。此方法無法檢查該對象的原型鏈中是否具有該屬性；該屬性必須是對象本身的一個成員。

 使用方法：

 object.hasOwnProperty(proName)

 其中參數object是必選項。一個對象的實例。

 proName是必選項。一個屬性名稱的字符串值。

 如果 object 具有指定名稱的屬性，那么JavaScript中hasOwnProperty函數方法返回 true，反之則返回 false。

8.JSON 的了解？

 JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。

 它是基于JavaScript的一個子集。數據格式簡單, 易于讀寫, 占用帶寬小

 如：{"age":"12", "name":"back"}

 JSON字符串轉換為JSON對象:

 var obj =eval('('+ str +')');
 var obj = str.parseJSON();
 var obj = JSON.parse(str);

 JSON對象轉換為JSON字符串：

 var last=obj.toJSONString();
 var last=JSON.stringify(obj);

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

defer和async、動態創建DOM方式（用得最多）、按需異步載入js

10.如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）

  this === window ? 'browser' : 'node';

  通過判斷Global對象是否為window，如果不為window，當前腳本沒有運行在瀏覽器中

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

alert(typeof [1, 2]); //object
    alert(typeof 'leipeng'); //string
    var i = true;
    alert(typeof i); //boolean
    alert(typeof 1); //number
    var a;
    alert(typeof a); //undefined
    function a(){;};
    alert(typeof a) //function

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

強制（parseInt(),parseFloat(),Number()）

隱式（== ,!=）

13.split() 、join() 的區別

前者是切割成數組的形式，后者是將數組轉換成字符串

14.數組方法pop() push() unshift() shift()

push()尾部添加 pop()尾部刪除

unshift()頭部添加 shift()頭部刪除

map() : 遍歷數組中的元素, 返回一個新數組(包含回調函數返回的數據)

filter():遍歷數組中的元素, 返回一個新數組(包含回調函數返回true的元素)

15.事件綁定和普通事件有什么區別

1)  普通添加事件的方法：

var btn = document.getElementById("hello");
btn.onclick = function(){
    alert(1);
}
btn.onclick = function(){
    alert(2);
}
執行上面的代碼只會alert 2
事件綁定方式添加事件：
var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
    alert(1);
},false);
btn.addEventListener("click",function(){
    alert(2);
},false);

執行上面的代碼會先alert 1 再 alert 2

 普通添加事件的方法不支持添加多個事件，最下面的事件會覆蓋上面的，而事件綁定   （addEventListener）方式添加事件可以添加多個。

 addEventListener不兼容低版本IE

 普通事件無法取消

 addEventLisntener還支持事件冒泡+事件捕獲

IE和DOM事件流的區別

1.執行順序不一樣、

2.參數不一樣

3.事件加不加on

4.this指向問題

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

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

18.如何阻止事件冒泡和事件默認行為

//阻止事件冒泡
if(typeof ev.stopPropagation=='function') {  //標準的
    ev.stopPropagation();
} else { //非標準IE
    window.event.cancelBubble = true;
}

//阻止事件默認行為

return false

window.onload 和document ready的區別

window.onload 是在dom文檔樹加載完和所有文件加載完之后執行一個函數 document.ready原生中沒有這個方法，jquery中有 $().ready(function),在dom文檔樹加 載完之后執行一個函數（注意，這里面的文檔樹加載完不代表全部文件加載完）。

$(document).ready要比window.onload先執行

window.onload只能出來一次，$(document).ready可以出現多次

20.”==”和“===”的不同

前者會自動轉換類型

后者不會

21.JavaScript是一門什么樣的語言，它有哪些特點？

javaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。JavaScript兼容于ECMA標準，因此也稱為ECMAScript。

基本特點

1. 是一種解釋性腳本語言（代碼不進行預編譯）。

2. 主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。

3. 可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。

跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。

22.JavaScript的數據類型都有什么？

基本數據類型：String,boolean,Number,Undefined, Null

引用數據類型：Object, Array, Function

那么問題來了，如何判斷某變量是否為數組數據類型？

方法一.判斷其是否具有“數組性質”，如slice()方法。可自己給該變量定義slice方法， 故有時會失效

方法二.obj instanceof Array 在某些IE版本中不正確

方法三.方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容 性，最好的方法如下：

    if(typeof Array.isArray==="undefined"){
   Array.isArray = function(arg){
         return Object.prototype.toString.call(arg)==="[object Array]"
     };  
}

23.當一個DOM節點被點擊時候，我們希望能夠執行一個函數，應該怎么做？

直接在DOM里綁定事件：<div οnclick=”test()”></div>

在JS里通過onclick綁定：xxx.onclick = test

通過事件添加進行綁定：addEventListener(xxx, ‘click’, test)

那么問題來了，Javascript的事件流模型都有什么？

“事件冒泡”：事件開始由最具體的元素接受，然后逐級向上傳播

“事件捕捉”：事件由最不具體的節點先接收，然后逐級向下，一直到最具體的

“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡

24.看下列代碼輸出為何？解釋原因。

var a;

alert(typeof a); // undefined

alert(b); // 報錯

解釋：Undefined是一個只有一個值的數據類型，這個值就是“undefined”，在使用var 聲明變量但并未對其賦值進行初始化時，這個變量的值就是undefined。而b由于未聲 明將報錯。注意未申明的變量和聲明了未賦值的是不一樣的。

25.看下列代碼,輸出什么？解釋原因。

var undefined;

undefined == null; // true

1 == true;   // true

2 == true;   // false

0 == false;  // true

0 == '';     // true

NaN == NaN;  // false

[] == false; // true

[] == ![];   // true // true  == false 打印false

undefined與null相等，但不恒等（===）

一個是number一個是string時，會嘗試將string轉換為number

嘗試將boolean轉換為number，0或1

嘗試將Object轉換成number或string，取決于另外一個對比量的類型

所以，對于0、空字符串的判斷，建議使用 “===” 。“===”會先判斷兩邊的值類型， 類型不匹配時為false。

那么問題來了，看下面的代碼，輸出什么，foo的值為什么？

var foo = "11"+2-"1";

console.log(foo);

console.log(typeof foo);

執行完后foo的值為111，foo的類型為String。

上述就是小編為大家分享的前端JavaScript有哪些面試題了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。