前端程序員面試分類模擬題5

前端程序員面試分類模擬題5簡答題1.

兩個(gè)運(yùn)算符typeof與instanceof有哪些區(qū)別?正確答案：兩者之間主要有以下3個(gè)方面的區(qū)別：

(1)typeof運(yùn)算符用于檢測數(shù)據(jù)類型，而ins（江南博哥）tanceof運(yùn)算符用于檢測對(duì)象之間的關(guān)聯(lián)性。

(2)typeof運(yùn)算符執(zhí)行完后會(huì)返回一個(gè)小寫字母的類型字符串，而instanceof運(yùn)算符執(zhí)行完后會(huì)返回一個(gè)布爾值。

(3)typeof運(yùn)算符只需一個(gè)操作數(shù)，這個(gè)操作數(shù)可以是基本類型或函數(shù)，而instanceof運(yùn)算符需要兩個(gè)操作數(shù)，并且左操作數(shù)不能是基本類型，右操作數(shù)必須是函數(shù)，否則運(yùn)算結(jié)果將會(huì)沒有意義。[考點(diǎn)]基本語法

2.

用CSS中的表格盒類型(即把display屬性設(shè)為表格相關(guān)的盒類型)實(shí)現(xiàn)元素的垂直居中。正確答案：用CSS模擬的表格除了包含表格元素的普通規(guī)則之外，還擁有特殊規(guī)則。它能夠以匿名方式創(chuàng)建缺少的表格元素，例如單元格本來必須在表格行(tr)之內(nèi)，而在模擬的表格中，將元素調(diào)整為單元格(使用盒類型table-cell)后，不用把父元素變?yōu)楸砀裥?使用盒類型table-row)，瀏覽器會(huì)自動(dòng)創(chuàng)建出表格行，如下所示。

＜divstyle="display:table"＞

＜pstyle="display:table-cell;vertical-align:middle"＞垂直居中＜/p＞

＜/div＞[考點(diǎn)]布局

3.

將下面的對(duì)象序列化為JSON字符串，在序列化時(shí)去除name屬性，并將數(shù)組的第一個(gè)元素變?yōu)閚ull。

varjson={

"name":"pingwen",

"age":28,

"colors":["red","yellow","blue"]

};正確答案：JSON對(duì)象中的stringify()方法用于將對(duì)象序列化為JSON字符串。stringify()方法的第二個(gè)參數(shù)是過濾器，當(dāng)過濾器是一個(gè)函數(shù)時(shí)，它能接收兩個(gè)參數(shù)：一個(gè)鍵和一個(gè)值。如果函數(shù)返回值是undefined，那么相應(yīng)的鍵在序列化時(shí)將會(huì)被跳過。過濾器會(huì)遍歷JSON數(shù)據(jù)中的數(shù)組，在函數(shù)中也能操縱它們的鍵和值，但如果返回undefined，不會(huì)被忽略，而是被替換為null。具體代碼如下所示。

JSON.stringify(json,function(key,value){

if(key=="name")

returnundefined;

if(key==="0")

returnundefined;

//數(shù)組中的第一個(gè)值將變?yōu)閚ull

returnvalue;

});[考點(diǎn)]對(duì)象

4.

不用循環(huán)語句(for、while等)來創(chuàng)建一個(gè)長度為50的數(shù)組，每個(gè)元素的值等于它的索引。正確答案：先聲明一個(gè)長度為51的空數(shù)組，然后用1把數(shù)組銜接為字符串，再將字符串分割為數(shù)組，數(shù)組中每個(gè)元素的值都為字符串“1”，最后用數(shù)組的map()方法迭代每個(gè)元素，把元素的值改為它的索引，如下所示。

Array(51).join("1").split("").map(function(value,index){

returnindex;

});[考點(diǎn)]數(shù)組

5.

隨機(jī)地從大小為n的數(shù)組中選取m個(gè)整數(shù)，要求每個(gè)元素被選中的概率相等。正確答案：從n個(gè)數(shù)中隨機(jī)選出一個(gè)數(shù)的概率為1/n，然后在剩下的n-1個(gè)數(shù)中再隨機(jī)找出一個(gè)數(shù)的概率也為1/n(第一次沒選中這個(gè)數(shù)的概率為(n-1)/n，第二次選中這個(gè)數(shù)的概率為1/(n-1)，因此，隨機(jī)選出第二個(gè)數(shù)的概率為((n-1)/n)×(1/(n-1))=1/n)，依次類推，在剩下的k個(gè)數(shù)中隨機(jī)選出一個(gè)元素的概率都為1/n。所以，這個(gè)算法的思路為：首先從包含n個(gè)元素的數(shù)組中隨機(jī)選出一個(gè)元素，然后把這個(gè)選中的數(shù)字與數(shù)組第一個(gè)元素交換，接著從數(shù)組后面的n-1個(gè)數(shù)字中隨機(jī)選出1個(gè)數(shù)字與數(shù)組第二個(gè)元素交換，依次類推，直到選出m個(gè)數(shù)字為止，數(shù)組前m個(gè)數(shù)字就是隨機(jī)選出來的m個(gè)數(shù)字，且它們被選中的概率相等。實(shí)現(xiàn)代碼如下所示。

functiongetRandomM(a,n,m){

if(n＜=0||n＜m){

return;

}

varj,rand,tmp;

for(vari=0;i＜m;++i){

rand=Math.floor(Math.random()*(n-i));

j=i+rand;

//獲取i到n-1之間的隨機(jī)數(shù)

//隨機(jī)選出的元素放到數(shù)組的前面

tmp=a[i];

a[i]=a[i];

a[j]=tmp;

}

}

vara=[1,2,3,4,5,6,7,8,9,10],

n=a.length,

m=6,

txt="";

getRandomM(a,n,m);

for(i=0;i＜m;++i)

txt+=a[i]+"";

console.log(txt);

//結(jié)果是隨機(jī)的,可能是189724[考點(diǎn)]排列組合與概率

6.

Sass和SCSS有哪些區(qū)別?正確答案：Sass和SCSS主要有如下4個(gè)方面的區(qū)別：

(1)Sass表示舊語法，SCSS表示新語法。

(2)新語法的文件后綴是.scss，而舊語法的文件后綴是.sass。

(3)新語法中選擇器的內(nèi)容用大括號(hào)包裹，而舊語法使用縮進(jìn)。

(4)新語法用分號(hào)(;)分隔語句，而舊語法用換行符。[考點(diǎn)]預(yù)處理器和框架

7.

編寫一個(gè)函數(shù)，用于清除字符串前后的空格。正確答案：使用String對(duì)象的replace()方法，再借助正則表達(dá)式來去除字符串前后的空格，代碼如下所示。

functiontrim(str){

returnstr.replace(/^\s+|\s+$/g,"");

}

在上面的正則表達(dá)式中，元字符“^”匹配行的開始，元字符“$”匹配行的結(jié)束；字符類“\s”表示空格；豎線(|)表示子表達(dá)式之間“或”的關(guān)系；標(biāo)志字符串“g”表示全局模式匹配，可找到文本中的所有匹配，而不是只匹配第一個(gè)。[考點(diǎn)]日期和正則表達(dá)式

8.

偽元素：:before和:before有什么區(qū)別?正確答案：早期的時(shí)候，偽元素和偽類都使用單冒號(hào)(:)。但最新的CSS3規(guī)定偽元素使用雙冒號(hào)(::)，偽類用單冒號(hào)，兩者區(qū)分更明顯。[考點(diǎn)]選擇器和層疊

9.

什么是XHTML?正確答案：HTML的格式比較松散，這會(huì)導(dǎo)致一些問題，例如兼容性差、移植性差等。為了解決上述所列的種種問題，W3C在2000年發(fā)布了XHTML1.0。XHTML是XML的一種應(yīng)用，作為HTML的一個(gè)子集，它完全兼容HTML，但格式更嚴(yán)謹(jǐn)。XHTML有過3個(gè)版本，分別是1.0、1.1和2.0。XHTML1.0與HTML4.01的不同之處在于語法規(guī)則，前者需要按照XML的要求來規(guī)范HTML，其中，XML是SGML的一個(gè)子集。[考點(diǎn)]HTML與XHTML

10.

CSS有幾種引入方式?它們有哪些區(qū)別?正確答案：有3種，分別是內(nèi)聯(lián)樣式(inlinestyle)、內(nèi)嵌樣式(embeddedstyle)和外部樣式(externalstyle)。它們的區(qū)別可參考下表中的對(duì)比，第一行描述了要比較的特征。CSS引入方式的對(duì)比方式特殊性HTTP請(qǐng)求重用范圍文檔大小偽類與偽元素內(nèi)聯(lián)樣式最高無不可重用增加不可定義內(nèi)嵌樣式與外部相同無當(dāng)前文檔增加可定義外部樣式與內(nèi)嵌相同有整個(gè)項(xiàng)目保持可定義[考點(diǎn)]HTML元素元數(shù)據(jù)

11.

給定一個(gè)數(shù)d，如何計(jì)算d的n次方?例如：d=2，n=3，d的n次方為2^3=8。正確答案：在計(jì)算過程中可以充分利用中間的計(jì)算結(jié)果，提升算法效率。例如在計(jì)算2的100次方的時(shí)候，假如已經(jīng)計(jì)算出了2的50次方tmp=2^50，那就沒必要將tmp再乘以50次2，而是直接利用tmp×tmp就能得到2^100的值。通過這個(gè)特點(diǎn)可以用遞歸的方式實(shí)現(xiàn)n次方計(jì)算，具體過程如下：

(1)當(dāng)n=0時(shí)，計(jì)算結(jié)果肯定為1。

(2)當(dāng)n=1時(shí)，計(jì)算結(jié)果肯定為d。

(3)當(dāng)n＞0時(shí)，首先計(jì)算2^(n/2)的值tmp，如果n為奇數(shù)，那么計(jì)算結(jié)果result=tmp×tmp×d，如果n為偶數(shù)，那么計(jì)算結(jié)果result=tmp×tmp。

(4)當(dāng)n＜0時(shí)，首先計(jì)算2^(|n/2|)的值tmp，如果n為奇數(shù)，那么計(jì)算結(jié)果result=1/(tmp×tmp×d)，如果n為偶數(shù)，那么計(jì)算結(jié)果result=1/(tmp×tmp)。

根據(jù)以上思路實(shí)現(xiàn)的代碼如下所示。

functionpower(d,n){

if(n==0)return1;

if(n==1)returnd;

vartmp=power(d,Math.floor(Math.abs(n/2)));

if(n＞0){

if(n%2==1)

returntmp*tmp*d;

//n為奇數(shù)

returntmp*tmp;

//n為偶數(shù)

}

if(n%2==1)

return1/(tmp*tmp*d);

return1/(tmp*tmp);

}[考點(diǎn)]基本數(shù)字運(yùn)算

12.

實(shí)現(xiàn)一個(gè)棧的數(shù)據(jù)結(jié)構(gòu)，使其具有以下方法：壓棧、彈棧、取棧頂元素、判斷棧是否為空以及獲取棧中元素個(gè)數(shù)。正確答案：在采用數(shù)組來實(shí)現(xiàn)棧的時(shí)候，主要面臨的問題是給數(shù)組申請(qǐng)多大的存儲(chǔ)空間比較合理，因?yàn)樵谑褂脳５臅r(shí)候并不確定以后棧中需要存放的數(shù)據(jù)元素的個(gè)數(shù)，申請(qǐng)多了會(huì)造成空間的浪費(fèi)，而申請(qǐng)少了則會(huì)導(dǎo)致不夠用。為了便于理解，這里采用的方法是給定一個(gè)初始值，假如這個(gè)值是10，那么就先申請(qǐng)能存儲(chǔ)10個(gè)元素的數(shù)組作為棧的存儲(chǔ)空間。在后期使用的過程中如果空間不夠用了，再擴(kuò)大這個(gè)空間。實(shí)現(xiàn)思路如下圖所示。

數(shù)組模擬的棧結(jié)構(gòu)

從圖中能夠看出，可以把數(shù)組的首地址當(dāng)作棧底，同時(shí)記錄棧中元素的個(gè)數(shù)size，可見，根據(jù)棧底指針和size就可以計(jì)算出棧頂?shù)牡刂妨?。假設(shè)數(shù)組首地址為arr，從圖中可以看出，壓棧的操作其實(shí)是把待壓棧的元素放到數(shù)組Arr[size]中，然后執(zhí)行size++操作；同理，彈棧操作其實(shí)是取數(shù)組中的Arr[size-1]元素，然后執(zhí)行size--操作。根據(jù)這個(gè)原理可以非常容易地實(shí)現(xiàn)棧，示例代碼如下所示。

//創(chuàng)建一個(gè)空數(shù)組作為棧

varstack=[];

//獲取棧頂元素

functiongetTop(stack){

returnstack[stack.length-1];

}

//向數(shù)組壓入一個(gè)元素

stack.push(1);

stack.push(2);

//輸出棧頂元素

console.log(getTop(stack));

//2

//讓棧頂元素出棧

stack.pop();

console.log(getTop(stack));

//1[考點(diǎn)]棧和隊(duì)列

13.

數(shù)字1～1000放在含有1001個(gè)元素的數(shù)組中，其中只有唯一的一個(gè)元素值重復(fù)，其他數(shù)字均只出現(xiàn)一次。設(shè)計(jì)一個(gè)算法，將重復(fù)元素找出來，要求每個(gè)數(shù)組元素只能訪問一次。正確答案：根據(jù)異或運(yùn)算的性質(zhì)可知，當(dāng)相同元素異或時(shí)，其運(yùn)算結(jié)果為0；當(dāng)相異元素異或時(shí)，其運(yùn)算結(jié)果為非0；任何數(shù)與數(shù)字0進(jìn)行異或運(yùn)算，其運(yùn)算結(jié)果為該數(shù)。本題中，正好可以使用到此方法，即將數(shù)組里的元素逐一進(jìn)行異或運(yùn)算，得到的值再與數(shù)字1，2，3，…，N進(jìn)行異或運(yùn)算，得到的最終結(jié)果即為所求的重復(fù)元素。

以數(shù)組[1，3，4，2，5，3]為例。(1^3^4^2^5^3)^(1^2^3^4^5)=(1^l)^(2^2)^(3^3^3)^(4^4)^(5^5)=0^0^3^0^0=3。示例代碼如下所示。

functionfindDup(array){

varlen=array.length,

result=0;

if(!array||len＜1)

return-1;

for(vari=0;i＜len;i++)

result^=array[i];

for(i=1;i＜len;i++)

result^=i;

returnresult;

}[考點(diǎn)]數(shù)組

14.

據(jù)說著名猶太歷史學(xué)家Josephus有過以下的故事。在羅馬人占領(lǐng)喬塔帕特后，39個(gè)猶太人與Josephus及他的朋友躲到一個(gè)洞中，39個(gè)猶太人決定寧愿死也不要被敵人抓到，于是決定了一個(gè)自殺方式：41個(gè)人排成一個(gè)圓圈，由第1個(gè)人開始報(bào)數(shù)，每到第3個(gè)人該人就必須自殺，然后再由下一個(gè)重新開始報(bào)數(shù)，直到所有人都自殺身亡為止。

然而Josephus和他的朋友并不想遵從，Josephus要他的朋友先假裝遵從，他將朋友與自己安排在第16個(gè)與第31個(gè)位置，于是逃過了這場死亡游戲。

約瑟夫問題可用代數(shù)分析來求解，假設(shè)現(xiàn)在你與m個(gè)朋友不幸參與了這個(gè)游戲，你要如何保護(hù)你與你的朋友?正確答案：實(shí)際上只要畫兩個(gè)圓圈就可以讓自己與朋友免于死亡游戲，這兩個(gè)圓圈中內(nèi)圈是排列順序，而外圈是自殺順序，如下圖所示。

排列順序和自殺順序

如果要使用公式來求解，那么只要將排列當(dāng)作環(huán)狀來處理，在陣列中由計(jì)數(shù)1開始，每三個(gè)數(shù)得到一個(gè)計(jì)數(shù)，直到計(jì)數(shù)達(dá)41為止；然后將陣列由索引1開始列出，就可以得知每個(gè)位置的自殺順序，這就是約瑟夫排列。41個(gè)人報(bào)數(shù)的約琴夫排列如下所示。

1436138152243031634425175403161826737198352792032104121112839122233132923

由上可知，最后一個(gè)自殺的是在第31個(gè)位置，而倒數(shù)第二個(gè)自殺的要排在第16個(gè)位置，之前的人都死光了，所以他們也就不知道約琴夫與他的朋友并沒有遵守游戲規(guī)則了。實(shí)現(xiàn)代碼為：

varN=41,M=3,man=[],

count=1,i=0,pos=-1,

alive=3;

//想救的人數(shù)

while(count＜=N){

do{

pos=(pos+1)%N;

//環(huán)狀處理

if(!man[pos])

i++;

i=f(i==M){

//報(bào)數(shù)為3

i=0;

break;

}

}while(1);

man[pos]=count;

count++;

}

console.log("約琴夫排列:",man.join(""));

vartxt="L表示要救的"+alive+"個(gè)人要放的位置:";

for(i=0;i＜N;i++){

if(man[i]＞(N-alive))

txt+="L";

else

txt+="D";

if((i+1)%5=0)

txt+="";

}

console.log(txt);

程序的運(yùn)行結(jié)果為：

約琴夫排列：1436138152243031634425175403161826737198352792032104121112839122233132923

L表示要救的3個(gè)人要放的位置：DDDDDDDDDDDDDDDLDDDDDDDDDDDDDDLDDDLDDDDDD[考點(diǎn)]經(jīng)典算法題

15.

什么叫二叉樹?正確答案：二叉樹(BinaryTree)也稱為二分樹、二元樹或?qū)Ψ謽涞?，它是n(n≥0)個(gè)有限元素的集合，該集合或者為空、或者由一個(gè)稱為根(root)的元素及兩個(gè)不相交的、被分別稱為左子樹和右子樹的二叉樹組成。當(dāng)集合為空時(shí)，稱該二叉樹為空二叉樹。

在二叉樹中，一個(gè)元素也稱作一個(gè)結(jié)點(diǎn)。二叉樹的遞歸定義為：二叉樹或者是一棵空樹，或者是一棵由一個(gè)根結(jié)點(diǎn)和兩棵互不相交的分別稱作根結(jié)點(diǎn)的左子樹和右子樹所組成的非空樹，左子樹和右子樹又同樣都是一棵二叉樹。[考點(diǎn)]二叉樹

16.

jQuery有哪些特色?正確答案：jQuery是一套跨瀏覽器、多功能、可擴(kuò)展、簡單易學(xué)的JavaScript類庫。它具有如下特色：

(1)強(qiáng)大的兼容處理，它修復(fù)了瀏覽器之間的差異。

(2)簡潔的鏈?zhǔn)秸Z法，結(jié)合函數(shù)式編程技巧就能用少量的代碼完成一系列功能。

(3)花式元素操作法，可對(duì)文檔中的元素進(jìn)行查找、讀寫屬性、控制樣式、注冊(cè)事件等操作。

(4)一套實(shí)用的工具，可快速實(shí)現(xiàn)Ajax、動(dòng)畫、瀏覽器嗅探、函數(shù)式編程等功能。

(5)良好的可擴(kuò)展性，吸引了眾多開發(fā)者為其設(shè)計(jì)插件，從而建立起了成熟的生態(tài)圈。[考點(diǎn)]jQuery

17.

請(qǐng)談?wù)勀銓?duì)Normalize.css的理解。正確答案：Normalize.css是一種現(xiàn)代化的、為HTML5準(zhǔn)備的優(yōu)質(zhì)重置方案，提倡元素的默認(rèn)樣式有其存在的道理。規(guī)范了元素的表現(xiàn)形式，使得元素在所有瀏覽器中呈現(xiàn)一致的、符合現(xiàn)代標(biāo)準(zhǔn)的效果，并提供安全的跨瀏覽器支持。[考點(diǎn)]布局

18.

有一個(gè)有序數(shù)列，序列中的每一個(gè)值都能夠被2或者3或者5所整除，1是這個(gè)序列的第一個(gè)元素，求第1500個(gè)值是多少?正確答案：首先可以很容易得到2、3和5的最小公倍數(shù)為30，此外，1～30這個(gè)區(qū)間內(nèi)滿足條件的數(shù)有22個(gè)，即{2,3,4,5,6,8,9,10,12,14,15,16,18,20,21,22,24,25,26,27,28,30}。由于最小公倍數(shù)為30，我們可以猜想，滿足條件的數(shù)字是否具有周期性(周期為30)呢?通過計(jì)算可以發(fā)現(xiàn)，31～60這個(gè)區(qū)間內(nèi)滿足條件的數(shù)也恰好有22個(gè)，即{32,33,34,35,36,38,39,40,42,44,45,46,48,50,51,52,54,55,56,57,58,60}，從而發(fā)現(xiàn)這些滿足條件的數(shù)確實(shí)具有周期性(周期為30)。由于1500/22=68，1500%68=4，所以可以得出第1500個(gè)數(shù)經(jīng)過了68個(gè)周期，然后在第69個(gè)周期中取第4個(gè)滿足條件的數(shù)(即1～30這個(gè)區(qū)間內(nèi)滿足條件的第4個(gè)數(shù))，即第1500個(gè)數(shù)為68×30+5=2045。根據(jù)這個(gè)思路實(shí)現(xiàn)的代碼如下所示。

functionsearch(n){

vara=[0,2,3,4,5,6,8,9,10,12,14,15,16,18,20,21,22,24,25,26,27,28,30

];

varret=Math.floor(n/22)*30+a[n%22];

returnret;

}

console.log(search(1500));

//2045[考點(diǎn)]基本數(shù)字運(yùn)算

19.

什么是錨點(diǎn)?正確答案：錨點(diǎn)(anchor)是一種特殊鏈接，能定位到HTML文檔中的某個(gè)特定位置，這個(gè)文檔既可以在當(dāng)前域名下，也可以在其他域名下，代碼如下所示。

＜ahref="#"＞返回頂部＜/a＞

＜ahref="#anchor"＞內(nèi)部定位＜/