這陣子面試，我把自己遇到的面試題記錄下
1.在jquery中指定一個(gè)類渗常，如果存在就執(zhí)行刪除功能壮不，如果不存在就執(zhí)行添加功能，下面哪一個(gè)是可以直接完成該功能的皱碘？()
A removeClass()
B deleteClass()
C toggleClass(class)
D addClass()
答案：C
2.在ES6中询一，下面程序運(yùn)行結(jié)果輸出，選項(xiàng)結(jié)果正確的是（）
1.for(let i=0;i<12;i++;){}console.log(i)
2.const a=12;a=13;console.log(a);
3.const g={b:3};console.log(g.b);g.b=12;console.log(g.b);
4.let[head,...tail]=[1,2,3,4];console.log(tail);
A 11,13,3,12，[3,4]
B i not defined ,TypeError,TypeErrpr,4
C 11,12,3,3,4
D i not defined,TypeError,3,12,[2,3,4]
答案：D
1.let 與var不同健蕊，存在塊級(jí)作用域菱阵，在for循環(huán)中聲明，循環(huán)之外銷毀 所以 i not defined
2.const 聲明一個(gè)常量無法更改缩功，所以TypeError
3.const定義變量不可以被重寫晴及，定義對(duì)象可以修改屬性，const命令只是保證變量名指向的地址不變嫡锌，并不保證該地址的數(shù)據(jù)不變虑稼，也就是只要指向這個(gè)函數(shù)，更改函數(shù)內(nèi)部的屬性值是可以的势木。
3.下面代碼執(zhí)行后蛛倦，arr的值是（）
var arr = [{a:1},{}];
arr.forEach(function(item,idx){
item.b = idx;
})
A [{a:1},{}]
B [{a:1,b:0},{b:1}]
C [{a:1,b:1},{b:1}]
D [{a:!,b:0},{b:0}]
答案：B
forEach()方法是對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。 回調(diào)函數(shù)的參數(shù)item為數(shù)組當(dāng)前項(xiàng)跟压，idx為當(dāng)前索引胰蝠。 本題就是把數(shù)組每一項(xiàng)添加屬性b，并且屬性b的值為當(dāng)前項(xiàng)的數(shù)組索引值震蒋。 另外茸塞，forEach()方法沒有返回值，所以不能將 arr.foreach()像其他數(shù)組迭代方法那樣賦值給某一個(gè)變量查剖。
4.下列事件哪個(gè)不是由鼠標(biāo)觸發(fā)的事件（）
A click
B contextmenu
C mouseout
D keydown
答案：D
contextmenu 是當(dāng)瀏覽者按下鼠標(biāo)右鍵出現(xiàn)菜單時(shí)或者通過鍵盤的按鍵觸發(fā)頁(yè)面菜單時(shí)觸發(fā)的事件 [ 試試在頁(yè)面中的 <body> 中加入 onContentMenu="return false" 就可禁止使用鼠標(biāo)右鍵了
5.以下的代碼的執(zhí)行結(jié)果是（）
for(var i=0;i<5;i++){
setTimeout(function(){
console.log(i+'');
},100);
}
A 5 5 5 5 5
B 0 0 0 0 0
C 0 1 2 3 4
D 1 2 3 4 5
答案：A
6.下面哪一個(gè)返回false（）
A null
B undefined
C 0
D '0'
答案：A B C
7.下列函數(shù)哪些是JavaScript的全局函數(shù)钾虐？
A encodeURI
B parseFloat
C setTimeout
D eval
答案：A B D
8.只能輸入零和非零開頭的數(shù)字，正確的正則表達(dá)式是（）
A ^(0|[1-9][0-9]*)$
B ^(0|[1-9][1-9]*)$
C ^(0|[1-9][0-9])$
D ^+[1-9][0-9]*$
答案：A
9.關(guān)于對(duì)變量的說法笋庄，錯(cuò)誤的是效扫？（）
A 一般使用var key的形式聲明
B 由于javascript的動(dòng)態(tài)特性，常常直接采取key= val的形式賦值
C 若聲明而未對(duì)變量賦值直砂，該變量的值為undefined
D var carname="Volvo";var carname;順序執(zhí)行后菌仁，caranme的值依然為Volvo
答案：B
10.前端框架 Vue.js 具備的特性（）
A 指令
B 過濾器
C 內(nèi)置 http 請(qǐng)求
D 模板采用 JSX
答案：A B
Vue需要通過添加Vue-resource來實(shí)現(xiàn)http請(qǐng)求
JSX是React自帶的模板，Vue有它自帶的模板静暂，比如Vue單文件組件
11.下面關(guān)于Vue說法錯(cuò)誤的是（）
A data中某一屬性的值發(fā)生改變后济丘，視圖會(huì)立即同步進(jìn)行重渲染
B Vue實(shí)例創(chuàng)建后再添加的屬性，該屬性改動(dòng)將不會(huì)觸發(fā)視圖更新
C 計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值
D Vue組件的data選項(xiàng)必須是函數(shù)
答案：A
A和B是矛盾的洽蛀，Vue實(shí)例創(chuàng)建前已有的屬性值發(fā)生改變后摹迷，視圖會(huì)立即同步進(jìn)行重渲渲染；而實(shí)例創(chuàng)建后再添加的屬性發(fā)生改變時(shí)不會(huì)觸發(fā)視圖更新郊供；A和B考察的是同一個(gè)知識(shí)點(diǎn)峡碉，很顯然選A。
12.下面關(guān)于React說法錯(cuò)誤的是()
A React DOM在渲染之前會(huì)默認(rèn)過濾所有傳入的值
B React DOM在渲染過程中只會(huì)更新改變了的部分
C 直接通過賦值更新React組件狀態(tài)不會(huì)重新渲染組件驮审，必須使用setState方法
D JSX是JavaScript的一種語法擴(kuò)展锅劝，React的使用依賴JSX
答案：D
D選項(xiàng)，錯(cuò)在依賴涕蚤，只是推薦使用，并不必須
13.前端框架 React 不具備的特性（）
A 數(shù)據(jù)綁定
B 組件化
C 指令
D 沒有生命周期鉤子函數(shù)
答案：C
14.以下代碼段輸出結(jié)果
console.log("1");
setTimeout(function(){
console.log('2');
},0);
console.log('3');
答案：132
輸出1鼠证，2消失，輸出3靠抑，2在全局執(zhí)行輸出
15.以下代碼段輸出結(jié)果
var str="JavaScript";
test();
function test(){
console.log(str);
var str = "Vue.js";
console.log(str);
}
console.log(str);
答案：undefind vue.js javascript
第一個(gè)undefind 是因?yàn)樵趖est函數(shù)作用域內(nèi)未定義變量str。
第二個(gè)console打印的變量在函數(shù)test內(nèi)已經(jīng)定義了适掰。
第三個(gè)打印的全局變量str先前就已經(jīng)定義了颂碧。
16.現(xiàn)在有數(shù)組var arr=["js","html","css"],需要把數(shù)據(jù)轉(zhuǎn)換成以下格式怎么處理？
[
{"value":"js",label:0}
{"value":"html",label:1}
{"value":"css",label:2}
]
答案：
var arr=["js","html","css"];
var tempArray = [];
for( let i =0;i<arr.length;i++){
tempArray.push({
"value":arr[i],
"label":i
});
}
console.log(JSON.stringify(tempArray));
這里用let的話类浪，i 在循環(huán)體外就屬于未定義狀態(tài)载城，即消失，不會(huì)影響別的代碼费就，用var的話（這里也行）循環(huán)結(jié)束后i也不會(huì)消失
17.兩個(gè)div,一個(gè)左浮動(dòng)诉瓦，一個(gè)右浮動(dòng)，外面有個(gè)div（未清除浮動(dòng)）力细，請(qǐng)問外面div盒子的寬跟高
答案：高為0睬澡；寬為屏幕的寬
18.計(jì)算屬性（computed）跟監(jiān)聽器（watch）的區(qū)別
watch是觀察某一個(gè)屬性的變化，重新計(jì)算屬性值眠蚂。computed是通過所依賴的屬性的變化重新計(jì)算屬性值煞聪。
大部分情況下watch和computed幾乎沒有差別。但如果要在數(shù)據(jù)變化的同時(shí)進(jìn)行異步操作或者是比較大的開銷逝慧，那么watch為最佳選擇昔脯。
19.計(jì)算屬性（computed）跟方法（methods）的區(qū)別
我們可以使用方法達(dá)到和計(jì)算屬性同樣的效果
區(qū)別在于計(jì)算屬性computed）具有緩存，只有當(dāng)計(jì)算屬性computed）所依賴的屬性發(fā)生改變時(shí)笛臣，才會(huì)重新去計(jì)算云稚，而方法（methods）每次都會(huì)去重新計(jì)算結(jié)果。
