Web前端開發——BAT面試題彙總及答案03（持續更新中）

一、前言

1. 做這個的初心是希望鞏固自己的基礎知識，當然也希望能夠幫助更多的開發者！
2. 有些題目有多種答案，本文只給出了其中的一種，哪裏有問題的話歡迎指出~
3. 這個欄目將持續更新，前端的小夥伴歡迎關注噢~

二、JS 基礎篇

5、JavaScript this 指針、閉包、作用域

this：指向調用上下文
閉包：內層作用域可以訪問外層作用域的變量
作用域：定義一個函數就開闢了一個局部作用域，整個 js 執行環境有一個全局作用域

6、事件委託是什麼

符合 W3C 標準的事件綁定 addEventLisntener /attachEvent
讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

7、閉包是什麼，有什麼特性，對頁面有什麼影響

閉包就是能夠讀取其他函數內部變量的函數。
閉包的缺點：濫用閉包函數會造成內存泄露，因爲閉包中引用到的包裹函數中定義的變量都
永遠不會被釋放，所以我們應該在必要的時候，及時釋放這個閉包函數

8、如何阻止事件冒泡和默認事件

e. stopPropagation();//標準瀏覽器
event.canceBubble=true;//ie9 之前
阻止默認事件：
爲了不讓 a 點擊之後跳轉，我們就要給他的點擊事件進行阻止
return false
e.preventDefault();

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

obj.appendChild()
obj.insertBefore() //原生的 js 中不提供 insertAfter();
obj.replaceChild()//替換
obj.removeChild()//刪除

10、javascript 的本地對象，內置對象和宿主對象

本地對象爲 array obj regexp 等可以 new 實例化
內置對象爲 gload Math 等不可以實例化的
宿主爲瀏覽器自帶的 document,window 等

11、document load 和 document ready 的區別

Document.onload 是在結構和樣式加載完才執行 js
window.onload：不僅僅要在結構和樣式加載完，還要執行完所有的樣式、圖片這些資源文
件，全部加載完纔會觸發 window.onload 事件
Document.ready 原生中沒有這個方法，jquery 中有 $().ready(function)

12、、”== ”和“===”的不同

前者會自動轉換類型
後者不會
1==”1”
null==undefined
===先判斷左右兩邊的數據類型，如果數據類型不一致，直接返回 false
之後纔會進行兩邊值的判斷

13、已知 ID 的 Input 輸入框，希望獲取這個輸入框的輸入值，怎麼做？(不使用第三方框架)

document.getElementById(“ID”).value

14、希望獲取到頁面中所有的 checkbox 怎麼做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [ ]; //返回的所有的 checkbox
var len = domList.length; //緩存到局部變量
while (len–) { //使用 while 的效率會比 for 循環更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}

15、設置一個已知 ID 的 DIV 的 html 內容爲 xxxx，字體顏色設置爲黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”

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

直接在 DOM 裏綁定事件：

在 JS 裏通過 onclick 綁定：xxx.onclick = test
通過事件添加進行綁定：addEventListener(xxx, ‘click’, test)
那麼問題來了，Javascript 的事件流模型都有什麼？
“事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播
“事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的
“DOM 事件流”：三個階段：事件捕捉，目標階段，事件冒泡

17、看下列代碼輸出爲何？解釋原因。

var a;
alert(typeof a); // “undefined”
//alert(b); // 報錯
b=10;
alert(typeof b);//”number”

解釋：Undefined 是一個只有一個值的數據類型，這個值就是“undefined”，在使用 var
聲明變量但並未對其賦值進行初始化時，這個變量的值就是 undefined。注意未申明的變量和聲明瞭未賦值的是不一樣的。
undefined 會在以下三種情況下產生：
1、 一個變量定義了卻沒有被賦值
2、 想要獲取一個對象上不存在的屬性或者方法:
3、 一個數組中沒有被賦值的元素
注意區分 undefined 跟 not defnied(語法錯誤)是不一樣的

18、看下列代碼,輸出什麼？解釋原因。

var a = null;
alert(typeof a); //object
解釋：null 是一個只有一個值的數據類型，這個值就是 null。表示一個空指針對象，所以
用 typeof 檢測會返回”object”。

19、輸出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月 26 日，則輸出 2014-09-26

var d = new Date();
// 獲取年，getFullYear()返回 4 位的數字
var year = d.getFullYear();
// 獲取月，月份比較特殊，0 是 1 月，11 是 12 月
var month = d.getMonth() + 1;
// 變成兩位
month = month < 10 ? '0' + month : month;
// 獲取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

20、看下列代碼，將會輸出什麼?(變量聲明提升)

var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
}
答案：輸出 undefined 和 2。上面代碼相當於：
var foo = 1;
function(){
var foo;
console.log(foo); //undefined
foo = 2;
console.log(foo); // 2;
}
函數聲明與變量聲明會被 JavaScript 引擎隱式地提升到當前作用域的頂部，但是隻提升名
稱不會提升賦值部分。

21、把兩個數組合並，並刪除第二個元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

22、怎樣添加、移除、移動、複製、創建和查找節點（原生 JS，實在基礎，沒細寫每一步）

1）創建新節點
createDocumentFragment() //創建一個 DOM 片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3）查找
getElementsByTagName() //通過標籤名稱
getElementsByName() //通過元素的 Name 屬性的值
getElementById() //通過元素 Id，唯一性

23、正則表達式構造函數 var reg=new RegExp(“xxx”)與正則表達字面量 varreg=//有什麼不同？匹配郵箱的正則表達式？

答案：當使用 RegExp()構造函數的時候，不僅需要轉義引號（即\”表示”），並且還需要
雙反斜槓（即\表示一個\）。使用正則表達字面量的效率更高。
郵箱的正則匹配：
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

24、以下兩個變量 a 和 b，a+b 的哪個結果是 NaN？ 答案( C )

A、var a=undefind; b=NaN //拼寫
B、var a=‘123’; b=NaN//字符串
C、var a =undefined , b =NaN
D、var a=NaN , b=‘undefined’//”Nan”

25、var a=10; b=20; c=4; ++b+c+a++ 以下哪個結果是正確的？答案( B )

A、34 B、35 C、36 D、37

//var a=10; b=20; c=4;   ++b+c+a++//21+4+10=3

---

前端面試題系列將會持續更新，歡迎關注該博客~

相關文章推薦：
Web前端開發——BAT面試題彙總及答案01（持續更新中）
Web前端開發——BAT面試題彙總及答案02（持續更新中）