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

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

元素屬性src和href有什么區(qū)別?正確答案：兩者的功能不同。href(hypertextreference)能夠建立一條通道，將當前文檔和定義的資源連接起（江南博哥）來。src(source)是將定義的資源嵌入到當前文檔中。[考點]HTML元素元素基礎

2.

請列舉表格布局的弊端。正確答案：表格布局主要有以下5方面的弊端。

(1)可訪問性差。表格布局中的內容從左到右和從上到下的讀取并不總是有意義，并且還缺乏依賴關系，無障礙工具(如屏幕閱讀器)從這些文檔中獲取的數(shù)據(jù)會非?；靵y，從而影響可讀性。

(2)難以實現(xiàn)響應式。通?？捎妹襟w查詢對不同設備呈現(xiàn)適合的界面，但表格布局需要用單元格嵌套表格，而單元格之間的合并要用元素的colspan或rowspan屬性，不能用CSS屬性簡單地設置。

(3)可維護性差。表格布局需要使用大量的元素屬性，并且表格之間需要相互嵌套。這使得代碼的可讀性差，特別是如果不縮進，標簽沒有層次感，更加難以理解代碼的意圖。

(4)不夠語義化。表格布局會用到大量的單元格，單元格(th或td)不像nav、header、footer等元素有明確的含義。語義化的界面既能保持代碼整齊，還可提升搜索引擎優(yōu)化。

(5)加載速度慢。嵌套的表越多，文檔就變得越臃腫，不僅會加長網(wǎng)絡傳輸?shù)臅r間，而且也會增加渲染的時間。[考點]HTML元素表單和表格

3.

請封裝一個函數(shù)，模擬getBoundingClientRect()方法，但只要返回元素到視口頂部(top)和左邊(left)的距離。正確答案：Element對象提供了一個getBoundingClientRect()方法，它返回一個靜態(tài)的不會實時更新的矩形對象(DOMRect)，它里面不但包含了元素在4個方向(left、right、top和bottom)上距離視口的偏移值，還包含了元素的寬度和高度。如果要模擬getBoundingClientRect()方法，那么可以用偏移屬性和offsetParent來實現(xiàn)。注意，在循環(huán)中疊加的偏移值并不會包含邊框寬度，如果要包含邊框寬度，那么在循環(huán)中需要分別加上包含元素的clientTop和clientLeft屬性的值，具體實現(xiàn)如下所示。

functionoffsetSum(node){

vartop=0,left=0;

while(node){

top+=node.offsetTop;

left+=node.offsetLeft;

node=node.offsetParent;

if(node){

top+=node:clientTop;

//上邊框的寬度

left+=node.clientLeft;

//左邊框的寬度

}

}

return{top:top,left:left};

}[考點]控制元素

4.

全局函數(shù)eval()有什么作用?正確答案：eval()可以執(zhí)行一段字符串中的腳本，它只有一個參數(shù)，如果傳入的參數(shù)是非字符串類型的值，那么就直接返回該值。如果傳入字符串字面量，那么將被作為JavaScript代碼進行編譯。當編譯失敗時，拋出一個語法錯誤；當編譯成功時，則開始執(zhí)行這段代碼，最后返回一個表達式或語句的值。eval()的具體用法如下所示。

eval(l);

//1

varstr="vartotal=100;console.log(total)";

eval(str);//100

在eval()中創(chuàng)建的變量或函數(shù)具有當前執(zhí)行時所處的作用域，并且聲明不能被提升，因此如果在調用eval()之前使用函數(shù)中創(chuàng)建的變量，將會拋出未定義的異常，如下所示。

functionsum(){

vardigit=1;

console.log(total);

//拋出未定義的異常

eval("vartotal=100;");

//定義變量

console.log(total);

//total和digit的作用域相同

}

在嚴格模式中，eval()不能改變作用域，因此也就不能定義新的變量或函數(shù)，如下所示。

functionsum(){

"usestrict";

eval("vartotal=100;");

//定義變量

console.log(total);

//拋出未定義的異常

}

eval()能夠編譯代碼字符串，它能力非常強大，同時也非常危險。如果傳入的是惡意代碼，那將會威脅站點的安全，造成不可估量的損失。[考點]對象

5.

jQueryUI是什么?正確答案：jQuery只提供了DOM、CSS、事件處理和Ajax等底層功能。jQueryUI在jQuery類庫的基礎上，提供了一套抽象化、可自定義主題的用戶界面組件，例如日期選擇器、對話框、進度條等；并且內置了常用的交互，例如拖曳、排序、改變大小等；還添加了一些新的動畫效果，例如顏色變換、隱藏、顯示等。[考點]jQuery

6.

有一個數(shù)組，它的元素都是數(shù)字，找出這個數(shù)組中的最大差值。正確答案：獲取最大差值的兩個元素，換個說法就是獲取最大值和最小值。對于都是數(shù)字元素的數(shù)組，有一種簡單的實現(xiàn)方式，那就是間接調用Math對象的max()和min()方法獲得數(shù)組中的最大值和最小值，然后把這兩個值相減，具體如下所示。

functiondifference(arr){

varmax=Math.max.apply(this,arr);

varmin=Math.min.apply(this,arr);

returnmax-min;

}[考點]數(shù)組

7.

相等(==)和全等(===)運算符有哪些區(qū)別?正確答案：相等運算符用于比較兩個操作數(shù)是否相等，操作數(shù)會進行類型轉換。全等運算符用于比較兩個操作數(shù)是否嚴格相等，操作數(shù)不會進行類型轉換。代碼如下所示，第一個表達式的計算結果為true，而第二個表達式的計算結果為false。

1=="1"

//true

1==="1"

//false[考點]基本語法

8.

HTML5新增了幾個多媒體元素，請列舉使用這些元素的優(yōu)勢。正確答案：使用多媒體元素有以下4個方面的優(yōu)勢。

(1)支持移動設備，可為智能手機、平板電腦或其他移動設備提供豐富的觀看體驗。

(2)易于定制效果，使用傳統(tǒng)的CSS就能為多媒體元素設計個性化的視覺體驗，例如漸變、陰影、遮罩和動畫等。

(3)輕松實現(xiàn)響應式設計，能在不同媒體(如計算機顯示器、移動設備和輔助設備等)中渲染合適的樣式，呈現(xiàn)最優(yōu)的界面。

(4)語義化的元素，可提供明確的含義，提升文檔的可訪問性，便于閱讀與理解。[考點]多媒體和繪圖

9.

如何把一個有序整數(shù)數(shù)組放到二叉樹中?正確答案：如果要把一個有序的整數(shù)數(shù)組放到二叉樹中，那么所構建出來的二叉樹必定也是一棵有序的二叉樹。鑒于此，實現(xiàn)思路為：取數(shù)組的中間元素作為根結點，將數(shù)組分成兩部分，對數(shù)組的兩部分用遞歸的方法分別構建左右子樹。如下圖所示。

數(shù)組構建二叉樹的過程

如圖所示，首先取數(shù)組的中間結點6作為二叉樹的根結點，把數(shù)組分成左右兩部分，然后對于數(shù)組的左右兩部分子數(shù)組分別運用同樣的方法進行二叉樹的構建，例如對于左半部分子數(shù)組，取中間結點3作為樹的根結點，再把數(shù)組分成左右兩部分。以此類推，就可以完成二叉樹的構建，實現(xiàn)代碼如下所示。

varprintTxt="";

//要在控制臺輸出的文本

/**

*二叉樹的定義

*用指定的值構建二叉樹,并定義左右子樹

*@parammixedkey

結點值

*@parammixedleft

左子樹結點

*@parammixedright

右子樹結點

*/

functionBinaryTree(key,left,right){

this.key=key||null;

this.left=left;

this.right=right;

}

BinaryTtotype={

/**

*檢測當前結點是否是葉子結點

*@returnboolean當結點非空并且有兩個空的子樹時為true,否則為false

*/

isLeaf:function(){

return!this.isEmpty()&&

this.left.isEmpty()&&

this.right.isEmpty();

},

/**

*檢測結點是否為空

*@returnboolean如果結點為空返回true,否則為false

*/

isEmpty:function(){

returnthis.key===null;

},

getKey:function(){

//讀取結點值

if(this.isEmpty()){

returnfalse;

}

returnthis.key;

},

attachKey:function(obj){

//給結點指定值

if(!this.isEmpty())

returnfalse;

this.key=obj;

this.left=newBinaryTree();

this.right=newBinaryTree();

},

detachKey:function(){

//刪除結點值,使得結點為空

if(!this.isLeaf())

returnfalse;

this.key=null;

this.left=null;

this.right=null;

returnthis.key;

},

getLeft:function(){

//讀取左子樹

if(this.isEmpty())

returnfalse;

returnthis.left;

},

getRight:function(){

//讀取右子樹

if(this.isEmpty())

returnfalse;

returnthis.right;

},

preorderTraversal:function(){

//前序遍歷

if(this.isEmpty()){

return;

}

printTxt+="+this.getKey();

this.getLeft().preorderTraversal();

this.getRight().preorderTraversal();

},

inorderTraversal:function(){

//中序遍歷

if(this,isEmpty()){

return;

}

this.getLeft().inorderTraversal();

printTxt+="+this.getKey();

this.getRight().inorderTraversal();

},

postorderTraversal:function(){

//后序遍歷

if(this,isEmpty()){

return;

}

this.getLeft().postorderTraversal();

this.getRight().postorderTraversal();

printTxt+="+this.getKey();

},

insert:function(obj){

//給二叉排序樹插入指定值

if(this.isEmpty()){

this.attachKey(obj);

return;

}

vardiff=pare(obj);

if(diff＜0)

this.getLeft().insert(obj);

elseif(diff＞0)

this.getRight().insert(obj);

},

compare:function(obj){

//當前結點值與傳入的值做比較

returnobj-this.getKey();

}

};

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

txt=arr.reduce(function(accumulator,current,index,array){

returnaccumulator+""+current;

});

console.log("數(shù)組:",tXt);

//12345678910

varroot=newBinaryTree();

/**

*對數(shù)組的兩部分用遞歸的方法分別構建左右子樹

*/

functionsetTree(arr,root){

varlen=arr.length;

if(len＜2){

root.insert(arr[0]);

return;

}

varmiddle=Math.floor(len/2),

left=arr.slice(0,middle),

//數(shù)組的左邊部分

right=arr.slice(middle+1);

//數(shù)組的右邊部分

root.insert(arr[middle]);

//添加中間結點

setTree(left,root.left);

//左子樹

if(len＞2)

setTree(right,root.right);

//右子樹

}

setTree(arr,root);

root.inorderTraversal();

//中序遍歷

console.log("轉換成樹的中序遍歷為:",printTxt);//12345678910[考點]二叉樹

10.

如何將字符串“get-element-by-id”轉化成駝峰表示法的“getElementById”?正確答案：可以使用String對象中的replace()方法執(zhí)行字符替換，replace()的第二個參數(shù)可以定義為一個回調函數(shù)，該函數(shù)的參數(shù)如下表所列?；卣{函數(shù)的參數(shù)參數(shù)描述match匹配的文本p1、p2...pn分組中匹配的文本，即捕獲的文本，p1表示第一個index匹配的文本在原字符串中的索引input被檢索的字符串

下面利用這個回調函數(shù)，在函數(shù)中將連接符和字符的組合(如“-e”、“-b”等)替換為一個大寫字符(如“E”、“B”等)，如下所示。

varstr="get-element-by-id";

str.replace(/-([a-z])/g,function(match,p1,index,input){

returnp1.toUpperCase();

});[考點]日期和正則表達式

11.

如何不使用“^”符號實現(xiàn)異或運算?正確答案：下面介紹一種簡單的實現(xiàn)方法：x^y=(x|y)&(～x|～y)，其中x|y表示如果在x或y中的位值是1，那么結果中的這個位值也為1，顯然這個結果包括三種情況，即這個位只有在x中為1，或只有在y中為1，或在x和y中都為1。要在這個基礎上計算出異或的結果，顯然要去掉第三種情況，也就是說去掉在x和y中都為1的情況，而當一個位在x和y中都為1的時候“～x|～y”的值為0，因此(x|y)&(～x|～y)的值等于x^y。實現(xiàn)代碼如下所示。

functionmyXOR(x,y){

return(x|y)&(～x|～y);

}[考點]基本數(shù)字運算

12.

執(zhí)行下面的代碼，效果如下圖所示，雖然給p元素定義了15px的上外邊距，但為何失效了?

＜style＞

div{

float:left;

width;80px;

height:80px;

background:#FFCC00;

}

p{

clear:both;

margin-top:15px;

}

＜/style＞

＜section＞

＜div＞＜/div＞

＜p＞已設置上外邊距＜/p＞

＜/section＞

上外邊距失效正確答案：浮動元素會脫離正常流，clear屬性會讓元素增加上外邊距，使其在浮動元素的下面。在上面的代碼中，浮動元素的高是80px，所以clear屬性會給p元素增加80px的上外邊距，比定義的15px要大，因此最終的上外邊距是80px，正好在浮動元素的下面。[考點]CSS屬性浮動和定位

13.

如何用iframe元素實現(xiàn)無刷新文件上傳?正確答案：過去不能直接處理上傳按鈕中的本地文件，為了不刷新窗口也能上傳，只能通過iframe元素來做中介。如以下代碼所示，實現(xiàn)無刷新上傳的關鍵是使form元素的target屬性指向iframe元素。

＜formaction="action.php"enctype="multipart/form-data"method="post"

target="upload"＞

＜iframename="upload"＞＜/iframe＞

＜inputname="attach"type="file"/＞

＜inputtype="submit"/＞

＜/form＞[考點]HTML元素iframe

14.

用多種方式為下面的＜div＞元素設置一個名為ui-border的CSS類。

＜divid="info"＞＜/div＞正確答案：總共有3種方式可以為元素設置CSS類。第一種是定義元素的className屬性；第二種是利用HTML5新增的classList屬性；第三種是使用Element對象的setAttribute()方法。3種方式具體的實現(xiàn)如下所示。

vardiv=document.getElementById("info");

div.className="ui-border";

//方式一

varlist=info.classList;

list.add("ui-border");

//方式二

div.setAttribute("class","ui-border");

//方式三[考點]控制元素

15.

在三位的整數(shù)中，例如153可以滿足1^3+5^3+3^3=153，這樣的數(shù)稱之為Armstrong數(shù)，試寫出一程序找出所有三位數(shù)的Armstrong數(shù)。正確答案：Armstrong數(shù)的尋找，其實是將一個數(shù)字分解為個位數(shù)、十位數(shù)、百位數(shù)……，只要使用除法與余數(shù)運算即可求出個、十、百位的數(shù)字，例如輸入一個數(shù)字為abc，則：

百位：a=Math.floor(input/100)

十位：b=Math.floor((input%100)/10)

個位：c=input%10

實現(xiàn)代碼為：

vara,b,c,x,y,txt="Armstrong數(shù):";

for(varnum=100;num＜=999;num++){

a=Math.floor(num/100);

b=Math.floor((num%100)/10);

c=num%10;

x=a*a*a+b*b*b+c*c*c;

y=num;

if(x==num)

txt+=num+"";

}

console.log(txt);

//153370371407[考點]經(jīng)典算法題

16.

將一個匿名函數(shù)像下面這樣用圓括號包裹，有什么作用?

(function(){})()正確答案：這是即時函數(shù)(immediatefunction)，也就是那些剛定義好就能馬上自動執(zhí)行的函數(shù)。即時函數(shù)用途非常廣泛，常用于創(chuàng)建塊級作用域、解決循環(huán)中的異步回調問題和類庫封裝等。[考點]函數(shù)

17.

給定一個由n-1個整數(shù)組成的未排序的數(shù)組，其元素是1～n中的不同整數(shù)。請寫出一個尋找數(shù)組中缺失整數(shù)的線性時間算法。正確答案：首先分析一下數(shù)學性質。假設缺失的數(shù)字是X，那么這n-1個數(shù)一定是1～n之間除了X以外的所有數(shù)。試想一下，1～n一共n個數(shù)的和是可以求出來的，數(shù)組中的元素和也是可以求出來的，二者相減，其值是不是就是缺失的數(shù)字X呢?

為了更好地說明上述方法，舉一個簡單的例子加以說明。假設數(shù)組為[2,1,4,5]，一共4個元素，n的值為5，要想找出這個缺失的數(shù)字，可以首先對1～5五個數(shù)字求和，求和結果為15(1+2+3+4+5=15)，而數(shù)組元素的和為array[0]+array[1]+array[2]+array[3]=2+1+4+5=12，所以，缺失的數(shù)字為15-12=3。

通過上面的例子可以很容易形成以下具體思路：定義兩個數(shù)suma