這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)前端JavaScript有哪些面試題，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供陽(yáng)新網(wǎng)站建設(shè)、陽(yáng)新做網(wǎng)站、陽(yáng)新網(wǎng)站設(shè)計(jì)、陽(yáng)新網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、陽(yáng)新企業(yè)網(wǎng)站模板建站服務(wù)，10多年陽(yáng)新做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

JavaScript面試題集錦

1.js基礎(chǔ)

1.eval是做什么的？

 它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；

 應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語(yǔ)句，一次執(zhí)行）。

 由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval，var obj =eval('('+ str +')');

2.什么是window對(duì)象? 什么是document對(duì)象?

 window對(duì)象是指瀏覽器打開(kāi)的窗口。

 document對(duì)象是Document對(duì)象（HTML 文檔對(duì)象）的一個(gè)只讀引用，window對(duì)象的一個(gè)屬性。

3.null，undefined 的區(qū)別？

 null      表示一個(gè)對(duì)象是“沒(méi)有值”的值，也就是值為“空”；

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

 undefined不是一個(gè)有效的JSON，而null是；

 undefined的類型(typeof)是undefined；

 null的類型(typeof)是object；

 Javascript將未賦值的變量默認(rèn)值設(shè)為undefined；

 Javascript從來(lái)不會(huì)將變量設(shè)為null。它是用來(lái)讓程序員表明某個(gè)用var聲明的變量時(shí)沒(méi)有值的。

 typeof undefined

    //"undefined"

    undefined :是一個(gè)表示"無(wú)"的原始值或者說(shuō)表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒(méi)有定義。當(dāng)嘗試讀取時(shí)會(huì)返回 undefined；

    例如變量被聲明了，但沒(méi)有賦值時(shí)，就等于undefined

 typeof null

    //"object"

    null : 是一個(gè)對(duì)象(空對(duì)象, 沒(méi)有任何屬性和方法)；

    例如作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象；

 注意：

    在驗(yàn)證null時(shí)，一定要使用　=== ，因?yàn)?== 無(wú)法分別 null 和　undefined

    null == undefined // true

    null === undefined // false

 再來(lái)一個(gè)例子：

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

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

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

 其中 radix 表示要解析的數(shù)字的基數(shù)?！驹撝到橛?2 ~ 36 之間，并且字符串中的數(shù)字不能大于radix才能正確返回?cái)?shù)字結(jié)果值】;

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

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

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

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

 因?yàn)槎M(jìn)制里面，沒(méi)有數(shù)字3,導(dǎo)致出現(xiàn)超范圍的radix賦值和不合法的進(jìn)制解析，才會(huì)返回NaN

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

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

1. 我們?cè)诰W(wǎng)頁(yè)中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為。

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

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

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

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

 使JS編碼更加規(guī)范化的模式,消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為。

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

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

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

 提高編譯器效率，增加運(yùn)行速度；

 為未來(lái)新版本的Javascript標(biāo)準(zhǔn)化做鋪墊。

7.Javascript中，有一個(gè)函數(shù)，執(zhí)行時(shí)對(duì)象查找時(shí)，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是？

 hasOwnProperty

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

 使用方法：

 object.hasOwnProperty(proName)

 其中參數(shù)object是必選項(xiàng)。一個(gè)對(duì)象的實(shí)例。

 proName是必選項(xiàng)。一個(gè)屬性名稱的字符串值。

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

8.JSON 的了解？

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

 它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫, 占用帶寬小

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

 JSON字符串轉(zhuǎn)換為JSON對(duì)象:

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

 JSON對(duì)象轉(zhuǎn)換為JSON字符串：

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

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

defer和async、動(dòng)態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js

10.如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中？（阿里）

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

  通過(guò)判斷Global對(duì)象是否為window，如果不為window，當(dāng)前腳本沒(méi)有運(yùn)行在瀏覽器中

11.javascript的typeof返回哪些數(shù)據(jù)類型

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種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?

強(qiáng)制（parseInt(),parseFloat(),Number()）

隱式（== ,!=）

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

前者是切割成數(shù)組的形式，后者是將數(shù)組轉(zhuǎn)換成字符串

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

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

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

map() : 遍歷數(shù)組中的元素, 返回一個(gè)新數(shù)組(包含回調(diào)函數(shù)返回的數(shù)據(jù))

filter():遍歷數(shù)組中的元素, 返回一個(gè)新數(shù)組(包含回調(diào)函數(shù)返回true的元素)

15.事件綁定和普通事件有什么區(qū)別

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

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

執(zhí)行上面的代碼會(huì)先alert 1 再 alert 2

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

 addEventListener不兼容低版本IE

 普通事件無(wú)法取消

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

IE和DOM事件流的區(qū)別

1.執(zhí)行順序不一樣、

2.參數(shù)不一樣

3.事件加不加on

4.this指向問(wèn)題

17.IE和標(biāo)準(zhǔn)下有哪些兼容性的寫法

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

18.如何阻止事件冒泡和事件默認(rèn)行為

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

//阻止事件默認(rèn)行為

return false

window.onload 和document ready的區(qū)別

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

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

window.onload只能出來(lái)一次，$(document).ready可以出現(xiàn)多次

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

前者會(huì)自動(dòng)轉(zhuǎn)換類型

后者不會(huì)

21.JavaScript是一門什么樣的語(yǔ)言，它有哪些特點(diǎn)？

javaScript一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。JavaScript兼容于ECMA標(biāo)準(zhǔn)，因此也稱為ECMAScript。

基本特點(diǎn)

1. 是一種解釋性腳本語(yǔ)言（代碼不進(jìn)行預(yù)編譯）。

2. 主要用來(lái)向HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）頁(yè)面添加交互行為。

3. 可以直接嵌入HTML頁(yè)面，但寫成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。

跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行（如Windows、Linux、Mac、Android、iOS等）。

22.JavaScript的數(shù)據(jù)類型都有什么？

基本數(shù)據(jù)類型：String,boolean,Number,Undefined, Null

引用數(shù)據(jù)類型：Object, Array, Function

那么問(wèn)題來(lái)了，如何判斷某變量是否為數(shù)組數(shù)據(jù)類型？

方法一.判斷其是否具有“數(shù)組性質(zhì)”，如slice()方法?？勺约航o該變量定義slice方法， 故有時(shí)會(huì)失效

方法二.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.當(dāng)一個(gè)DOM節(jié)點(diǎn)被點(diǎn)擊時(shí)候，我們希望能夠執(zhí)行一個(gè)函數(shù)，應(yīng)該怎么做？

直接在DOM里綁定事件：

在JS里通過(guò)onclick綁定：xxx.onclick = test

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

那么問(wèn)題來(lái)了，Javascript的事件流模型都有什么？

“事件冒泡”：事件開(kāi)始由最具體的元素接受，然后逐級(jí)向上傳播

“事件捕捉”：事件由最不具體的節(jié)點(diǎn)先接收，然后逐級(jí)向下，一直到最具體的

“DOM事件流”：三個(gè)階段：事件捕捉，目標(biāo)階段，事件冒泡

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

var a;

alert(typeof a); // undefined

alert(b); // 報(bào)錯(cuò)

解釋：Undefined是一個(gè)只有一個(gè)值的數(shù)據(jù)類型，這個(gè)值就是“undefined”，在使用var 聲明變量但并未對(duì)其賦值進(jìn)行初始化時(shí)，這個(gè)變量的值就是undefined。而b由于未聲 明將報(bào)錯(cuò)。注意未申明的變量和聲明了未賦值的是不一樣的。

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相等，但不恒等（===）

一個(gè)是number一個(gè)是string時(shí)，會(huì)嘗試將string轉(zhuǎn)換為number

嘗試將boolean轉(zhuǎn)換為number，0或1

嘗試將Object轉(zhuǎn)換成number或string，取決于另外一個(gè)對(duì)比量的類型

所以，對(duì)于0、空字符串的判斷，建議使用 “===” ?！?==”會(huì)先判斷兩邊的值類型， 類型不匹配時(shí)為false。

那么問(wèn)題來(lái)了，看下面的代碼，輸出什么，foo的值為什么？

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

console.log(foo);

console.log(typeof foo);

執(zhí)行完后foo的值為111，foo的類型為String。

上述就是小編為大家分享的前端JavaScript有哪些面試題了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。