前端面試題記錄

這陣子面試,我把自己遇到的面試題記錄下

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)部的屬性值是可以的。


4,變量的解構(gòu)賦值
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ā)頁面菜單時(shí)觸發(fā)的事件 [ 試試在頁面中的 <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ò)在依賴,只是推薦使用,并不必須


React特點(diǎn)
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é)果。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容