BAT最新《前端必考面試題》

1、Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義？

(1\聲明位于文檔中的最前面，處于標(biāo)簽之前。告知瀏覽器的解析器，用什

么文檔類型規(guī)范來解析這個文檔。

(2\嚴(yán)格模式的排版和JS運作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。

(3\在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行

為以防止站點無法工作。

(41DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。

2、行內(nèi)元素有哪些？塊級元素有哪些？

(1)CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型,每個元

素都有默認(rèn)的display值，比如div默認(rèn)display屬性值為"block"成為"塊

級"元素；span默認(rèn)display屬性值為"inline",是"行內(nèi)〃元素。

(2)行內(nèi)元素有:abspanimginputselectstrong(強調(diào)的語氣)塊級元

素有:divulollidldtddhlh2h3h4...p

3、linkffl@import的區(qū)別是?

(1)link屬于XHTML標(biāo)簽,ffi@import是CSS提供的；

(2)頁面被加載的時,link會同時被加載,而@10^。武引用的CSS會等到頁

面被加載完再加載；

(3)import只在IE5以上才能識別，而link是XHTML標(biāo)簽，無兼容問題；

(4)link方式的樣式的權(quán)重高于@import的權(quán)重.

4、瀏覽器的內(nèi)核分別是什么？

IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分

支1Opera內(nèi)核原為Presto,現(xiàn)為Blink;

5、HTML5有哪些新特性？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何

區(qū)分HTML和HTML5?

HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)

等功能的增加。

繪畫canvas用于媒介回放的video和audio元素本地離線存儲

localstorage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionstorage的

數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除語意化更好的內(nèi)容元素，比如article,footer,

header,nav、section表單控件,calendar,date、time、email、urL

search新的技術(shù)webworker,websockt,Geolocation

6、對語義化如何理解？

用正確的標(biāo)簽做正確的事情！

HTML語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；在沒有

樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲

依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO。使閱讀源代碼的人

對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

7、HTML5的離線儲存有幾種方式？

localstorage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionstorage數(shù)據(jù)

在瀏覽器關(guān)閉后自動刪除。

8、iframe有那些缺點？

iframe會阻塞主頁面的Onload事件；

iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁

面的并行加載。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,

最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上

兩個問題。

9、請描述一下cookies,sessionStorage和localstorage的區(qū)別?

cookie在瀏覽器和服務(wù)器間來回傳遞。sessionStorage和localstorage不會

sessionStorage和localstorage的存儲空間更大；sessionStorage和

localstorage有更多豐富易用的接口；sessionStorage和localstorage各自獨

立的存儲空間;

10、CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？CSS3新

增偽類有那些？

Lid選擇器(#myid)2.類選擇器(.myclassname)

3.標(biāo)簽選擇器(div,hl,p)4.相鄰選擇器(hl+p)

5.子選擇器(ul<li)6.后代選擇器(lia)

7.通配符選擇器(*)8.屬性選擇器(a[rel="external"])

可繼承的樣式：font-sizefont-familycolor,ULLIDLDDDT;

不可繼承的樣式：borderpaddingmarginwidthheight;

優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn)；

載入樣式以最后載入的定位為準(zhǔn)；

優(yōu)先級為：

?important>id>class>tagimportant比內(nèi)聯(lián)優(yōu)先級高

11.CSS3新增偽類舉例：

p:first-of-type選擇屬于其父元素的首個元素的每個元素。

p:last-of-type選擇屬于其父元素的最后元素的每個元素。

p:only-of-type選擇屬于其父元素唯一的元素的每個元素。

p:only-child選擇屬于其父元素的唯一子元素的每個元素。

p:nth-child(2)選擇屬于其父元素的第二個子元素的每個元素。

:enabled:disabled控制表單控件的禁用態(tài)。

：checked單選框或復(fù)選框被選中。

12、如何居中div?如何居中一個浮動元素？

給div設(shè)置一個寬度,然后添加margin:Oauto屬性

div{width:200px;margin:0auto;}

居中一個浮動元素

確定容器的寬高寬500高300的層設(shè)置層的外邊距.div(Width:500px;

height:300px;//高度可以不設(shè)Margin:-150px00

-250px;position:relative;相對定位background-colonpink;//方便看效

果left:50%;top:50%;)

列出display的值，說明他們的作用。position的值，relative和absolute定

位原點是？

Lblock象塊類型元素一樣顯示。none缺省值。象行內(nèi)元素類型一樣顯

示。inline-block象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯

示。list-item象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。

2.absolute生成絕對定位的元素,相對于static定位以外的第一個父元

素進行定位。

fixed（老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進行

定位。

relative生成相對定位的元素,相對于其正常位置進行定位。

static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中*（忽略top,bottom,

left,rightz-index聲明\

inherit規(guī)定從父元素繼承position屬性的值。

13、為什么要初始化CSS樣式？

因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒

對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。當(dāng)然，初始化樣式會對

SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法就是：*{padding:0;margin:0;}（不建議）淘寶的樣式

初始化

：body,hl,h2,h3,h4,h5,h6,hrzp,blockquote,dl,dt,dd,ul,ol,liz

pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;

padding:0;}body,button,input,select,textarea{fontl2px/1.5tahoma/

arial,/5b8b/4f53;}hl,h2,h3,h4,h5,h6{font-size:100%;Jaddress,cite,

dfn,em,var{font-style:normal;}code,kbd,pre,samp

{font-family:couriernew,courier;monospace;}small{font-size:12px;}ul,

ol{list-style:none;}a{text-decoration:none;}a:hover

text-decoration:underline;}sup

{vertical-align:text-top;}sub{vertical-align:text-bottom;Jlegend

{color:#000;Jfieldset,img{border:0;}button,input,select,textarea

{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}

14、css定義的權(quán)重

以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1,class的權(quán)重為10,id的權(quán)重為100,以

下例子是演示各種定義的權(quán)重值：/*權(quán)重為l*/div{}/*權(quán)重為10*/.classl{}/*權(quán)

重為100*/#idl{}/*權(quán)重為100+l=101*/#idldiv{}/*權(quán)重為

10+l=ll*/.classldiv{}/*權(quán)重為10+10+l=21*/.classl.class2div{}如果權(quán)

重相同，則最后定義的樣式會起作用，但是應(yīng)該避免這種情況出現(xiàn)

15、CSS3有哪些新特性？

CSS3實現(xiàn)圓角(border-radius:8px)，陰影(box-shadow:10px),對文字

加特效(text-shadow、)，線性漸變(gradient)，旋轉(zhuǎn)

(transform)transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)

skew(-9deg,0deg);〃旋轉(zhuǎn)，縮放，定位傾斜增加了更多的CSS選擇器多背景

rgba

16、介紹一下CSS的盒子模型？

(1)有兩種，IE盒子模型、標(biāo)準(zhǔn)W3C盒子模型；IE的content部分包

含了border和pading;

(2)盒模型：內(nèi)容(content)、填充(padding)、邊界(margin)、邊框

(border).

17.對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識？

標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈css和js

腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所

訪問、內(nèi)容能被更廣泛的設(shè)備聽訪問、更少的代碼和組件，容易維護、改版方便，

不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性；

18.XHTML和HTML有什么區(qū)別？

HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標(biāo)語

言最主要的不同：

XHTML元素必須被正確地嵌套。

XHTML元素必須被關(guān)閉。標(biāo)簽名必須用〃瀉字母。

XHTML文檔必須擁有根元素。

19.Doctype?嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?

用于聲明文檔使用那種規(guī)范(HTML/XHTML)一般為嚴(yán)格過度基于框架的

html文檔

加入XMI聲明可觸發(fā)，解析方式更改為IE5.5擁有IE5.5的bug

20.行內(nèi)元素有哪些?塊級元素有哪些?CSS的盒模型？

塊級元素：divphlh2h3h4formul

行內(nèi)元素:abbrispaninputselect

Css盒模型:內(nèi)容,border,margin,padding

21.CSS引入的方式有哪些？link和@1|1^。11的區(qū)別是？

內(nèi)聯(lián)內(nèi)嵌外鏈導(dǎo)入

區(qū)別：同時加載前者無兼容性，后者CSS2.1以下瀏覽器不支持

Link支持使用javascript改變樣式，后者不可

22.CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？內(nèi)聯(lián)和

important哪個優(yōu)先級高？

標(biāo)簽選擇符類選擇符id選擇符

繼承不如指定Id>dass>標(biāo)簽選擇

后者優(yōu)先級高

23.前端頁面有哪三層構(gòu)成，分別是什么?作用是什么？

結(jié)構(gòu)層HTML表示層CSS行為層js

24.CSS的基本語句構(gòu)成是?

選擇器{屬性1：值L屬性2:值2;……}

25.你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么？

Ie(Ie內(nèi)核)火狐(Gecko)谷歌(webkit)opear(Presto)

26.寫出幾種IE6BUG的解決方法

1.雙邊距BUGfloat引起的使用display

2.3像素問題使用float引起的使用dislpay:inline-3px

3.超鏈接hover點擊后失效使用正確的書寫順序linkvisitedhoveractive

4.1ez-index問題給父級添加position:relative

5.Png透明使用js代碼改

6.Min-height最小高度Important解決

7.select在ie6下遮蓋使用iframe嵌套

8.為什么沒有辦法定義lpx左右的寬度容器(IE6默認(rèn)的行高造成的，使用

ove匚hidden,zoom:0.08line-height:lpx)

9.ie6不支持!important

27.img標(biāo)簽上title與alt屬性的區(qū)別是什么?

Alt當(dāng)圖片不顯示是用文字代表。

Title為該屬性提供信息、

28.描述cssreset的作用和用途。

Reset重置瀏覽器的css默認(rèn)屬性瀏覽器的品種不同，樣式不同，然后重置,

讓他們統(tǒng)一

29.解釋csssprites,如何使用。

Css精靈把一堆小的圖片整合到一張大的圖片上，減輕服務(wù)器對圖片的請求數(shù)

量

30.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？

盒子模型渲染模式的不同

使用patMode可顯示為什么模式

31.你如何對網(wǎng)站的文件和資源進行優(yōu)化?期待的解決方案包括：

文件合并

文件最小化/文件壓縮

使用CDN托管

緩存的使用

32.什么是語義化的HTML?

直觀的認(rèn)識標(biāo)簽對于搜索引擎的抓取有好處

33.清除浮動的幾種方式，各自的優(yōu)缺點

1.使用空標(biāo)簽清除浮動clear:both(理論上能清楚任何標(biāo)簽，增加無意義的標(biāo)簽)

2.使用overflow:aut。(空標(biāo)簽元素清除浮動而不得不增加無意代碼的弊端〃使用

zoom:l用于兼容IE)

3.是用afert偽元素清除浮動(用于非IE瀏覽器)

34.javascript的typeof返回哪些數(shù)據(jù)類型

Objectnumberfunctionbooleanunderfind

35.例舉3種強制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換？

強制(

parseInt,parseFloatznumber)

隱式(==-===)

36.split()join()的區(qū)別

前者是切割成數(shù)組的形式，后者是將數(shù)組轉(zhuǎn)換成字符串

37.數(shù)組方法pop()push()unshift()shift()

Push。尾部添加pop()尾部刪除

Unshift()頭部添加shift。頭部刪除

38.事件綁定和普通事件有什么區(qū)別

39.IE和DOM事件流的區(qū)別

1.執(zhí)行順序不一樣、

2.參數(shù)不一樣

3.事件加不加on

4.this指向問題

40.IE和標(biāo)準(zhǔn)下有哪些兼容性的寫法

Varev=ev||window.event

document.document日ement.clientWidth||document.body.clientWidth

Vartarget=ev.src日ement||ev.target

41.ajax請求的時候get和post方式的區(qū)別

一個在url后面一個放在虛擬載體里面

有大小限制

安全問題

應(yīng)用不同一個是論壇等只需要請求的,一個是類似修改密碼的

42.call和apply的區(qū)別

Object.call(this/objl/obj2,obj3)

Object.apply(this,arguments)

43.ajax請求時，如何解釋json數(shù)據(jù)

使用evalparse鑒于安全性考慮使用parse更靠譜

44.閉包是什么，有什么特性，對頁面有什么影響

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

45.如何阻止事件冒泡和默認(rèn)事件

canceBubblereturnfalse

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

obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

47.解釋jsonp的原理，以及為什么不是真正的ajax

動態(tài)創(chuàng)建script標(biāo)簽，回調(diào)函數(shù)

Ajax是頁面無刷新請求數(shù)據(jù)操作

48.javascript的本地對象，內(nèi)置對象和宿主對象

本地對象為arrayobjregexp等可以new實例化

內(nèi)置對象為gloadMath等不可以實例化的

宿主為瀏覽器自帶的document,window等

49.documentload和documentready的區(qū)別

Document.onload是在結(jié)構(gòu)和樣式加載完才執(zhí)行js

Document.ready原生種沒有這個方法"query中有$().ready(function)

50.“=="和"===”的不同

前者會自動轉(zhuǎn)換類型

后者不會

51.javascript的同源策略

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是

主機名、協(xié)議和端口號的組合

52.編寫一個數(shù)組去重的方法

functionoSort(arr)

(

varresult={};

varnewArr=[];

for(vari=O;i<arr.length;i++)

{

if(!result[arr])

(

newArr.push(arr)

result[arr]=l

)

}

returnnewArr

}

</arr.length;i++)

53.你認(rèn)為最常遇到的兼容Bug有哪些?有哪些問題是你認(rèn)為解決起來最麻煩的?

IE6PNG

IE6Fixed

54.CSS定位方式有哪些?position屬性的值有哪些?他們之間的區(qū)別是什么？

在CSS中關(guān)于定位的內(nèi)容是：position:relative|absolute|static|fixed

static沒有特別的設(shè)定，遵循基本的定位規(guī)定不能通過z-index進行層次分級。

relative不脫離文檔流，參考自身靜態(tài)位置通過top,bottom,left,right定位,

并且可以通過z-index進行層次分級。

absolute脫離文檔流，通過top,bottomjeft,right定位。選53D6其最近的

父級定位元素，當(dāng)父級position為static時，absolute元素將以body坐標(biāo)

原點進行定位，可以通過z-index進行層次分級。

fixed固定定位這里他所固定的對像是可視窗口而并非是body或是父級元素。

可通過z-index進行層次分級。

55.函數(shù)的幾種定義方法？

functiona(){},

vara=function(){}

56.對象的定義方法？

a=newObject(),a={}

57.類的定義方法(prototype)(繼承)

Vara=function(){}

a.prototype={}

newa();

58.this關(guān)鍵字的指向

obj.fooQ==obj〃方法調(diào)用模式,this指向obj

foo()==window;〃函數(shù)調(diào)用模式,this指向window

newobj.fooO二二obj〃構(gòu)造器調(diào)用模式,this指向新建立對象

foo.call(obj)==obj;//APPLY調(diào)用模式,this指向obj

59.異步ajax的優(yōu)缺點都有什么？

優(yōu)點：

相對于同步ajax:不會造成UI卡死，用戶體驗好。

相對于刷新頁面，省流量

缺點：

后退按鈕無效；

多個請求同時觸發(fā)時，由于回調(diào)時間不確定，會造成混亂，避免這種混亂需要復(fù)

雜的判斷機制。

搜索引擎不友好

數(shù)據(jù)安全

60、介紹js的基本數(shù)據(jù)類型。

number;string,boolean,object,undefined

61、Javascript如何實現(xiàn)繼承？

通過原型和構(gòu)造器

62、如何創(chuàng)建一個對象？(畫出此對象的內(nèi)存圖)

functionPerson(name,age){=name;this.age=

age;this.sing=functionO{alert()}}

63、談?wù)凾his對象的理解。

this是js的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是

有一個總原則，那就是this指的是調(diào)用函數(shù)的那個對象。this一般情況下：是

全局對象GlobaL作為方法調(diào)用,那么this就是指這個對象

64、事件是什么？IE與火狐的事件機制有什么區(qū)別？如何阻止冒泡？

(1)我們在網(wǎng)頁中的某個操作(有的操作對應(yīng)多個事件\例如：當(dāng)我們點擊

一個按鈕就會產(chǎn)生一個事件。是可以被JavaScript偵測到的行為。

(2)事件處理機制：IE是事件冒泡、火狐是事件捕獲；

(3)ev.stopPropagation();

65、如何判斷一個對象是否屬于某個類？

使用instanceof(待完善)if(ainstanceofPerson){alert('yes')；}

66、Javascript中，有一個函數(shù)，執(zhí)行時對象查找時，永遠不會去查找原型,

這個函數(shù)是？

hasOwnProperty

67、對JSON的了解？

JSON（JavaScriptObjectNotation）是一種輕量級的數(shù)據(jù)交換格式。它是

基于JavaScript的一個子集。數(shù)據(jù)格式簡單，易于讀寫，占用帶寬小{‘a(chǎn)ge':'12',

'name'fback'}

68、簡述一下src與href的區(qū)別

href是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）

之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置；

在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本,img

圖片和frame等元素。當(dāng)瀏覽器解析到該元素時，會暫停其他資源的下載和處

理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將

所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

69、簡述同步和異步的區(qū)別

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執(zhí)行某個請求的時候,若該請求需要一段時間才能返回信

息，那么這個進程將會一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去；

異步是指進程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作,不管其他進程的狀

態(tài)。當(dāng)有消息返回時系統(tǒng)會通知進程進行處理，這樣可以提高執(zhí)行的效率。

70、px和em的區(qū)別

px和em都是長度單位,區(qū)別是，px的值是固定的，指定是多少就是多少，計

算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。

瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合：lem=16px。

那么

12px=0.75emz10px=0.625em

71、什么叫優(yōu)雅降級和漸進熠強？

漸進增強progressiveenhancement:

針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進

行效果、交互等改進和追加功能達到更好的用戶體驗。

優(yōu)雅降級gracefuldegradation:

一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。

區(qū)別：

a.優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給

b.漸進增強則是從一個非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴充，以

適應(yīng)未來環(huán)境的需要

c.降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其

根基處于安全地帶

72、瀏覽器的內(nèi)核分別是什么？

IE:trident內(nèi)核

Firefox:gecko內(nèi)核

Safari:webkit內(nèi)核

Opera:以前是presto內(nèi)核，Opera現(xiàn)已改用GoogleChrome的Blink內(nèi)核

Chrome:Blink(基于webkit,Google與OperaSoftware共同開發(fā))

73、如何消除一個數(shù)組里面重復(fù)的元素？

//方法一：

vararrl=[12223,334,5,6],

arr2=[];

for(vari=OJen=arrl.length;i<len;i++){

if(arr2.indexOf(arrl[i])<0){

arr2.push(arrl[i]);

)

)

document.write(arr2);//1,234,5,6

74、在Javascript中什么是偽數(shù)組？如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組？

偽數(shù)組;類數(shù)組)無法直接調(diào)用數(shù)組方法或期望length屬性有什么特殊的行為，

但仍可以對真正數(shù)組遍歷方法來遍歷它們。典型的是函數(shù)的argument參數(shù),

還有像調(diào)用getElementsByTagName,document.childNodes之類的，它們都

返回NodeList對象都屬于偽數(shù)組。可以使用

Atotype.slice.call(fakeArray)將數(shù)組轉(zhuǎn)化為真正的Array對象。

functionlog(){

varargs=Atotype.slice.call(arguments);

〃為了使用unshift數(shù)組方法，將argument轉(zhuǎn)化為真正的數(shù)組

args.unshift('(app),);

console.log.apply(console,args);

)；

75、Javascript中callee和caller的作用?

caller是返回一個對函數(shù)的引用，該函數(shù)調(diào)用了當(dāng)前函數(shù)；

callee是返回正在被執(zhí)行的function函數(shù)，也就是所指定的function對象的正

文。

76、請描述一下cookies,sessionstorage和localstorage的區(qū)別

sessionstorage用于本地存儲一個會話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在

同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此

sessionstorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而

localstorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不

會過期的。

webstorage和cookie的區(qū)別

WebStorage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的。

Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被

發(fā)送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨

域調(diào)用。

除此之外,WebStorage擁有setitem,getltemjemoveltem,clear等方法,不

像需要前端開發(fā)者自己封裝但是也

cookiesetCookie,getCookieoCookie

是不可以或缺的：Cookie的作用是與服務(wù)器進行交互，作為HTTP規(guī)范的一部

分而存在，而WebStorage僅僅是為了在本地"存儲〃數(shù)據(jù)而生。

77、手寫數(shù)組快速排序

關(guān)于快排算法的詳細說明，可以參考阮一峰老師的文章快速排序

”快速排序〃的思想很簡單，整個排序過程只需要三步：

(1)在數(shù)據(jù)集之中，選擇一個元素作為〃基準(zhǔn)〃(pivotX

(2)所有小于〃基準(zhǔn)〃的元素，都移到〃基準(zhǔn)〃的左邊；所有大于"基準(zhǔn)〃的

元素，都移到"基準(zhǔn)〃的右邊。

(3)對"基準(zhǔn)〃左邊和右邊的兩個子集，不斷重復(fù)第一步和第二步，直到所有

子集只剩下一個元素為止。

78、統(tǒng)計字符串“aaaabbbccccddfgh-中字母個數(shù)或統(tǒng)計最多字母數(shù)。

varstr="aaaabbbccccddfgh";

varobj={};

for(vari=O;istr.length;i++){

varv=str.charAt(i);

if(obj[v]&obj[v].value==v){

obj[v].count=++obj[v].count;

}else{

obj[v]={};

obj[v].count=1;

obj[v].value=v;

)

)

for(keyinobj){

document.write(obj[key].value+'='+obj[key].count+'')；//

a=4b=3c=4d=2f=lg=lh=l

)

79、一次完整的HTTP事務(wù)是怎樣的一個過程？

基本流程：

a.域名解析

b.發(fā)起TCP的3次握手

c.建立TCP連接后發(fā)起http請求

d.服務(wù)器端響應(yīng)http請求，瀏覽器得到html代碼

e.瀏覽器解析html代碼，并請求html代碼中的資源

f.瀏覽器對頁面進行渲染呈現(xiàn)給用戶

80、對前端工程師這個職位你是怎么樣理解的？

a.前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從90分進化到100

分，甚至更好

b.參與項目，快速高質(zhì)量完成實現(xiàn)效果圖，精確到lpx;

c.與團隊成員，UI設(shè)計，產(chǎn)品經(jīng)理的溝通；

d.做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗；

e.處理hack,兼容、寫出優(yōu)美的代碼格式;

f.針對服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。

最新《BATJava必考面試題集》

1、面向?qū)ο蟮奶卣饔心男┓矫妫?/p>

答：面向?qū)ο蟮奶卣髦饕幸韵聨讉€方面：

1）抽象：抽象是將一類對象的共同特征總結(jié)出來構(gòu)造類的過程，包括數(shù)據(jù)抽象和

行為抽象兩方面。抽象只關(guān)注對象有哪些屬性和行為，并不關(guān)注這些行為的細節(jié)

是什么。

2）繼承：繼承是從已有類得至坐性承信息創(chuàng)建新類的過程。提供繼承信息的類被稱

為父類（超類、基類）；得至堂嵌承信息的類被稱為子類（派生類）。繼承讓變化

中的軟件系統(tǒng)有了一定的延續(xù)性，同時繼承也是封裝程序中可變因素的重要手段

（如果不能理解請閱讀閻宏博士的《Java與模式》或《設(shè)計模式精解》中關(guān)于

橋梁模式的部分）。

3）封裝：通常認(rèn)為封裝是把數(shù)據(jù)和操作數(shù)據(jù)的方法綁定起來，對數(shù)據(jù)的訪問只能

通過已定義的接口。面向?qū)ο蟮谋举|(zhì)就是將現(xiàn)實世界描繪成一系列完全自治、封

閉的對象。我們在類中編寫的方法就是對實現(xiàn)細節(jié)的一種封裝；我們編寫一個類

就是對數(shù)據(jù)和數(shù)據(jù)操作的封裝?？梢哉f，封裝就是隱藏一切可隱藏的東西，只向

外界提供最簡單的編程接口（可以想想普通洗衣機和全自動洗衣機的差別，明顯

全自動洗衣機封裝更好因此操作起來更簡單；我們現(xiàn)在使用的智能手機也是封裝

得足夠好的，因為幾個按鍵就搞定了所有的事情）O

4）多態(tài)性：多態(tài)性是指允許不同子類型的對象對同一消息作出不同的響應(yīng)。簡單

的說就是用同樣的對象引用調(diào)用同樣的方法但是做了不同的事情。多態(tài)性分為編

譯時的多態(tài)性和運行時的多態(tài)性。如果將對象的方法視為對象向外界提供的服務(wù),

那么運行時的多態(tài)性可以解釋為：當(dāng)A系統(tǒng)訪問B系統(tǒng)提供的服務(wù)時，B系統(tǒng)

有多種提供服務(wù)的方式，但一切對A系統(tǒng)來說都是透明的（就像電動剃須刀是A

系統(tǒng)，它的供電系統(tǒng)是B系統(tǒng)，B系統(tǒng)可以使用電池供電或者用交流電，甚至還

有可能是太陽能，A系統(tǒng)只會通過B類對象調(diào)用供電的方法,但并不知道供電系

統(tǒng)的底層實現(xiàn)是什么，究竟通過何種方式獲得了動力）。方法重載（overload）

實現(xiàn)的是編譯時的多態(tài)性（也稱為前綁定），而方法重寫（override）實現(xiàn)的是

運行時的多態(tài)性（也稱為后綁定）。運行時的多態(tài)是面向?qū)ο笞罹璧臇|西，要

實現(xiàn)多態(tài)需要做兩件事：1.方法重寫（子類繼承父類并重寫父類中已有的或抽

象的方法）；2.對象造型（用父類型引用引用子類型對象，這樣同樣的引用調(diào)

用同樣的方法就會根據(jù)子類對象的不同而表現(xiàn)出不同的行為）。

2、訪問修飾符public,private,protected,以及不寫（默認(rèn)）時的區(qū)別？

答：區(qū)別如下：

作用域當(dāng)前類同包子類其他

publicVVVV

protectedVVVx

defaultVXX

privateVxxx

類的成員不寫訪問修飾時默認(rèn)為default.默認(rèn)對于同一個包中的其他類相當(dāng)于

公開(public),對于不是同一個包中的其他類相當(dāng)于私有(private)。受保

護(protected)對子類相當(dāng)于公開，對不是同一包中的沒有父子關(guān)系的類相當(dāng)

于私有。

3、String是最基本的數(shù)據(jù)類型嗎？

答：不是。Java中的基本數(shù)據(jù)類型只有8個：byte、short、int、long、float、

double,char、boolean;除了基本類型(primitivetype)和枚舉類型(en

,剩下的都是引用類型(

umerationtype)referencetype)o

4、floatf=3.4;是否正確？

答:不正確。3.4是雙精度數(shù),將雙精度型(double)賦值給浮點型(float)屬

于下轉(zhuǎn)型(down-casting,也稱為窄化)會造蝙度損失，因此需要強制類型

轉(zhuǎn)換或者寫成

floatf=(float)3.4;floatf=3.4F;O

5、shortsi=1;si=si+1;有錯嗎?shortsi=1;si+=1;有錯嗎?

答：對于shortsi=1;si=si+1油于1是int類型，因此sl+1運算結(jié)

果也是int型，需要強制轉(zhuǎn)換類型才能賦值給short型。而shortsi=1;si

+=L可以正確編譯，因為sl+=1;相當(dāng)于si=(short)(sl+1);其中有隱含

的強制類型轉(zhuǎn)換。

6、Java有沒有g(shù)oto?

答：goto是Java中的保留字,在目前版本的Java中沒有使用。（根據(jù)Jame

sGosling（Java之父）編寫的《TheJavaProgrammingLanguage）一書

的附錄中給出了一個Java關(guān)鍵字列表,其中有g(shù)oto和const,但是這兩個是

目前無法使用的關(guān)鍵字,因此有些地方將其稱之為保留字，其實保留字這個詞應(yīng)

該有更廣泛的意義，因為熟悉C語言的程序員都知道，在系統(tǒng)類庫中使用過的

有特殊意義的單詞或單詞的組合都被視為保留字）

7、int和Integer有什么區(qū)別?

答：Java是一個近乎純潔的面向?qū)ο缶幊陶Z言，但是為了編程的方便還是引入

不是對象的基本數(shù)據(jù)類型，但是為了能夠?qū)⑦@些基本數(shù)據(jù)類型當(dāng)成對象操作，J

ava為每一個基本數(shù)據(jù)類型都引入了對應(yīng)的包裝類型（wrapperclass）,int

的包裝類就是Integer,從JDK1.5開始引入了自動裝箱/拆箱機制，使得二者

可以相互轉(zhuǎn)換。

Java為每個原始類型提供了包裝類型：

原始類型：boolean,char,byte,short,int,long,float,double

包裝類型：Boolean,Character,Byte,Short,Integer,Long,Float,Do

uble

1packagecom.lovo;

publicclassAutoUnboxingTcst(

5publicstaticvoidmain(St"ing[]args){

6Integera-newInteger(3);

7Integerb=3;

8intc-3;

9System.out.println(a-b);

10System.out.printIn(a-c);

11}

12}

補充：最近還遇到一個面試題，也是和自動裝箱和拆箱相關(guān)的，代碼如下所示：

1publicclassTest03{

2

3publicstaticvoidiaain(String[]args){

4Integerfl-100,f2-100,f3-150,f4-ISO;

5

6Systea.out.printin(f1—f2);

7Systea.out.printin(f3-f4);

8}

9)

如果不明就里很容易認(rèn)為兩個輸出要么都是true要么都是false。首先需要注意

的是fl、f2、f3、f4四個變量都是Integer對象，所以下面的二二運算比較的不

是值而是引用。裝箱的本質(zhì)是什么呢？當(dāng)我們給一個Integer對象賦一個int值

的時候，會調(diào)用Integer類的靜態(tài)方法valueOf，如果看看valueOf的源代碼就

知道發(fā)生了什么。

1publicstaticIntegervalueOf(inti){

2if(i>-IntegerCache.low&&i<-IntegerCache.high)

3returnIntegerCache.cache[i+(-IntegerCache.low)];

4returnnewInteger(i);

5}

IntegerCache是Integer的內(nèi)部類,其代碼如下所示:

12privatestaticclassIntegerCache{

13staticfinalintlow--128;

14staticfinalinthigh;

ISstaticfinalIntegercache1];

16

17static{

18//hiohvoLuctnoybeconfiguredbypr^operty

19inth-127;

20StringintegerCacheHighPropValue-

21sun.oisc.VM.getSavedProperty("java.lang.Integer.IntegerCache.bigh");

22if(integerCacheHighPropValue!-null){

23try{

24inti,parselnt(integerCacheHighPropValue);

25i-Math.?ax(i>127);

26//hlaximumarraysizeisInteger.MAX_VALUE

27h-Integer.HAX_VALUE-(-low)-1)；

28}catch(NumberForaatExceptionnfe){

29:；AJ?-?p，ujuc/cunnu(.t/Crpuri??ic/Uriink.jlyriU'ci<.

30}

31)

32high■h;

33

34cache-newInteger[(high-low)+1];

35intj=low;

36for(intk-0;k<cache.lengthjki)

37cache[k]=newInteger(j++);

38

39

40assertIntegerCache.high>=127;

41}

42

43privateIntegerCache(){}

44}

簡單的說,如果字面量的值在-128到127之間，那么不會new新的Integer

對象，而是直接引用常量池中的Integer對象,所以上面的面試題中fl==f2的

結(jié)果是true,而f3==f4的結(jié)果是false。越是貌似簡單的面試題具中的幺機就

越多，需要面試者有相當(dāng)深厚的功力。

8、&和&&的區(qū)別？

答：&運算符有兩種用法：⑴按位與；（2）邏輯與。&&運算符是短路與運算。

邏輯與跟短路與的差別是非常巨大的，雖然二者都要求運算符左右兩端的布爾值

都是true整個表達式的值才是true。&&之所以稱為短路運算是因為,如果&

&左邊的表達式的值是false,右邊的表達式會被直接短路掉，不會進行運算。

很多時候我們可能都需要用&&而不是&，例如在驗證用戶登錄時判定用戶名不

是null而且不是空字符串,應(yīng)當(dāng)寫為：username!=null&&!username.eq

uals（""）,二者的順序不能交換，更不能用&運算符，因為第一個條件如果不

成立，根本不能進行字符串的equals比較，否則會產(chǎn)生NullPointerException

異常。注意：邏輯或運算符（|）和短路或運算符（||）的差別也是如此。

補充：如果你熟悉那你可能更能感受到短路運算的強大，想成為

JavaScript,J

avaScript的高手就先從玩轉(zhuǎn)短路運算開始吧。

9、解釋內(nèi)存中的棧（stack八堆（heap）和靜態(tài)存儲區(qū)的用法。

答：通常我們定義一個基本數(shù)據(jù)類型的變量，一個對象的引用，還有就是函數(shù)調(diào)

用的現(xiàn)場保存都使用內(nèi)存中的?？臻g；而通過new關(guān)鍵字和構(gòu)造器創(chuàng)建的對象

放在堆空間；程序中的字面量（literal）如直接書寫的100."hell。"和常量都

是放在靜態(tài)存儲區(qū)中。棧空間操作最快但是也很小，通常大量的對象都是放在堆

空間，整個內(nèi)存包括硬盤上的虛擬內(nèi)存都可以被當(dāng)成堆空間來使用。

Stringstr=newString（"hello"）;

上面的語句中str放在棧上，用new創(chuàng)建出來的字符串對象放在堆上，而"hel

I。"這個字面量放在靜態(tài)存儲區(qū)。

補充：較新版本的Java中使用了一項叫“逃逸分析”的技術(shù),可以將一些局部

對象放在棧上以提升對象的操作性能。

10、Math.round(11.5)等于多少？Math.round(?lL5)等于多少?

答:Math.roundQ1.5）的返回值是12,Math.roundC-ll.SJS^JiSInKMS-llo四

舍五入的原理是在參數(shù)上加0.5然后進行下取整。

11.swtich是否能作用在byte上，是否能作用在long上，是否能作用在S

tring±?

答：早期的JDK中,switch（expr）中,expr可以是byte、short、char、int。

從1.5版開始,Java中引入了枚舉類型（enum）,expr也可以是枚舉,從JD

K1.7版開始，還可以是字符串（String）。長整型（long）是不可以的。

12、用最有效率的方法計算2乘以8?

答：2<<3（左移3位相當(dāng)于乘以2的3次方，右移3位相當(dāng)于除以2的3

次方）。

補充：我們?yōu)榫帉懙念愔貙慼ashCode方法時，可能會看到如下所示的代碼，

其實我們不太理解為什么要使用這樣的乘法運算來產(chǎn)生哈希碼（散列碼），而且

為什么這個數(shù)是個素數(shù),為什么通常選擇31這個數(shù)？前兩個問題的答案你可以

自己百度一下，選擇31是因為可以用移位和減法運算來代替乘法，從而得到更

好的性能。說到這里你可能已經(jīng)想到了：31*num<==>（num<<5）-n

um,左移5位相當(dāng)于乘以2的5次方（32）再減去自身就相當(dāng)于乘以31?，F(xiàn)

在的VM都能自動完成這個優(yōu)化。

packagecom.loonstudio;

3publicclassPhoneNumber{

4privateintareaCode;

5privateStringprefix;

6privateStringlineNunber;

7

8^Override

9publicinthashCode(){

10finalintpriae-31;

11intresult-1;

12result-prime*result+areaCode;

13result=prime*result

14+((lineNumber=?null)?0:lineNuaber.hashCode());

15result=prime*result+((prefix==null)?0:prefix.hashCode());

16returnresult;

17}

19^Override

20publicbooleanequals(Objectobj){

21if(this??obj)

22returntrue;

23if(obj■,null)

24returnfalse;

25if(getClass()!-obj.getClass())

26returnfalse)

27PhoneNumberother■(PhoneNuober)obj;

28if(areaCode!?other.areaCode)

29returnfalse;

30if(lineNumber==null){

31if(other.lineNumber!-null)

32returnfalse;

33}elseif(!lineNumber.equals(other.lineNumber))

34returnfalse;

35if(prefix■■null){

36if(other.prefixI-null)

37returnfalse;

38}elseif(!prefix.equals(other.prefix))

39returnfalse;

40returntrue;

41}

42

43}

13、數(shù)組有沒有l(wèi)ength。方法?String有