十個前端面試題及答案

前端面試題:

第一道:如何實現(xiàn)盒子邊框圓角及陰影效果稻励?

1用border-radius 屬性是一個簡寫屬性煤篙,用于設置四個 border-*-radius 屬性塌鸯。

提示:該屬性允許您為元素添加圓角邊框督暂!

可以分開設置揪垄,如果四邊角度一樣就可以省略,直接寫角度即可逻翁。

2 用box-shadow(sha`dang)是css3的一個新屬性饥努,用來實現(xiàn)陰影效果,陰影分為內陰影和外陰影兩個效果八回,可以通過逗號添加多個陰影效果酷愧。


<style>

.rect?{

border: 1px?solid?red;

height: 100px;

width: 200px;

border-radius: 10px;

box-shadow: 4px?4px?5px?rgba(0, 0, 0, 0.5)

}

</style>

</head>


<body>

<div?class="rect"></div>

效果如上:


?

?

?

第二道:

[if !supportLists]·?[endif]什么是閉包驾诈,閉包的用途是什么?

答案


在函數(shù)內部調用函數(shù)外部的變量溶浴,那這個變量與這個函數(shù)稱為閉包乍迄。

<<script>

function?f1() {

var?a?= 1

function?f2() {

console.log(a)

}

return?f2

} var?result?= f1()

result() // 1

</script>



上面的代碼中函數(shù)f2內部調用了函數(shù)外部的變量a,故函數(shù)f2與變量a形成了閉包士败。最后將f2與變量a封裝成函數(shù)f1闯两,便可以在外部讀取到函數(shù)f1內聲明的變量,避免了污染全局變量拱烁。閉包的作用:1)可以讀取函數(shù)內部聲明的變量生蚁,避免污染全局變量噩翠;2)讓函數(shù)內聲明變量的值一直保存在內存之中戏自。

包就是能夠讀取其他函數(shù)內部變量的函數(shù)。由于在Javascript語言中伤锚,只有函數(shù)內部的子函數(shù)才能讀取局部變量擅笔,因此可以把閉包簡單理解成“定義在一個函數(shù)內部的函數(shù)”。

所以屯援,在本質上猛们,閉包就是將函數(shù)內部和函數(shù)外部連接起來的一座橋梁。閉包可以用在許多地方狞洋。它的最大用處有兩個弯淘,一個是前面提到的可以讀取函數(shù)內部的變量,另一個就是讓這些變量的值始終保持在內存中吉懊。


閉包有三個特性:

1.函數(shù)嵌套函數(shù)?2.函數(shù)內部可以引用外部的參數(shù)和變量?庐橙。3.參數(shù)和變量不會被垃圾回收機制回收。


第三道:

請說出至少8個 HTTP 狀態(tài)碼借嗽,并描述各狀態(tài)碼的意義态鳖。例如:狀態(tài)碼200表示響應成功;

一般情況下:

[if !supportLists]1.?[endif]狀態(tài)碼201表示創(chuàng)建成功2.狀態(tài)碼300表示多種選擇3.狀態(tài)碼301表示永久移動4.狀態(tài)碼302表示臨時移動5.狀態(tài)碼400表示用戶請求語法錯誤6.狀態(tài)碼404表示服務器找不到用戶請求的網頁7.狀態(tài)碼500表示服務器內部錯誤恶导,無法完成請求8.狀態(tài)碼502表示服務器未打開

2開頭 (請求成功)表示成功處理了請求的狀態(tài)代碼浆竭。

3開頭 (請求被重定向)表示要完成請求,需要進一步操作惨寿。 通常邦泄,這些狀態(tài)代碼用來重定向。(重定向的意思一般就是指換網站了或者說網站沒了比如有的網站看著看著就被封了裂垦,或者轉成廣告正經網站不受美利堅保護了顺囊。

4開頭 (請求錯誤)這些狀態(tài)代碼表示請求可能出錯,妨礙了服務器的處理缸废。

5開頭(服務器錯誤)這些狀態(tài)代碼表示服務器在嘗試處理請求時發(fā)生內部錯誤包蓝。 這些錯誤可能是服務器本身的錯誤驶社,而不是請求出錯。5開頭碼一般不常見亡电,了解一下知道就好了

第四道:

闡述清浮動的幾種方式

1.父級div定義 height

原理:父級div手動定義height,就解決了父級div無法自動獲取到高度的問題份乒。

優(yōu)點:簡單、代碼少腕唧、容易掌握

缺點:只適合高度固定的布局,要給出精確的高度枣接,如果高度和父級div不一樣時,會產生問題


2.父級div定義 overflow:hidden

原理:必須定義width或zoom:1但惶,同時不能定義height,使用overflow:hidden時膀曾,瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點:簡單、代碼少添谊、瀏覽器支持好

[if !supportLists]3.?[endif]在盒子中增加一個.clearfix::财喳;

原理:添加一個空div,利用css提高的clearfix::清除浮動斩狱,讓父級div能自動獲取到高度

優(yōu)點:簡單耳高、代碼少、瀏覽器支持好喊废、不容易出現(xiàn)怪問題

缺點:不少初學者不理解原理祝高;如果頁面浮動布局多,就要增加很多空div污筷,讓人感覺很不好

第五道

編寫一個方法去掉數(shù)組里面重復的內容var arr=[1,2,3,4,5,1,2,3]

一個數(shù)組去重的簡單實現(xiàn)

<script>

var?arr?= [1,2,3,4,5,1,2,3]

//定義一個新的數(shù)組

var?s?= [];

//遍歷數(shù)組

for?(var?i?= 0; i?< arr.length; i++) {


if?(s.indexOf(arr[i]) == -1) { ?//判斷在s數(shù)組中是否存在工闺,不存在則push到s數(shù)組中

s.push(arr[i]);

}

}

console.log(s);//12345

</script>


















第六題undefined和 null 區(qū)別


null: Null類型,代表“空值”瓣蛀,代表一個空對象指針陆蟆,使用typeof運算得到 “object”,所以可以認為它是一個特殊的對象值惋增。


undefined: Undefined類型叠殷,當一個聲明了一個變量未初始化時,得到的就是undefined诈皿。


javaScript權威指南: null 和 undefined 都表示“值的空缺”林束,可以認為undefined是表示系統(tǒng)級的像棘、出乎意料的或類似錯誤的值的空缺,而null是表示程序級的壶冒、正常的或在意料之中的值的空缺缕题。


第七題:

講幾種簡單布局,例如左邊固定寬度右邊自由胖腾,或者中間固定兩邊自由寬度烟零。

?float方法(兩邊固定中間自由伸縮):

通過使兩邊的div左右浮動,脫離文檔流咸作,再為中間的div設置margin-left,margin-right值為左右div的寬度即可.中間的寬度設置為百分百锨阿。(缺點時div的排列要把中間的放在最下面)

<body>

<div?class="left">我最左邊的</div>

<!-- <div class="center">我是中間的</div>錯誤 -->

<div?class="right">我最右邊的</div>

<div?class="center">我是中間的</div><!--正確-->

</body>













flex方法(中間固定兩邊自由伸縮)一般用于手機端布局

<style>

.wrap?{

display: flex;佛萊克斯

flex-direction: row;/* 讓容器內盒子水平顯示*/?刀軟可腎

}

.center?{

width: 800px;

background: gold;

}

.left,

.right?{

/*flex-grow 屬性用于平均分享父盒子剩余空間。*/

flex-grow: 1;

height: 30px;

background: red;

}

</style>

</head>

<body>

<div?class="wrap">

<div?class="left">左邊</div>

<div?class="center">中間</div>

<div?class="right">右邊</div>

</div>



第八題

[if !supportLists]1.?[endif]jQuery庫中的 $() 是什么记罚?


$()函數(shù)是 jQuery() 函數(shù)的別稱墅诡,乍一看這很怪異,還使 jQuery 代碼晦澀難懂毫胜。其實非常好理解书斜。$()函數(shù)用于將任何對象包裹成 jQuery 對象诬辈,接著你就被允許調用定義在 jQuery 對象上的多個不同方法酵使。甚至可以將一個選擇器字符串傳入 $() 函數(shù),它會返回一個包含所有匹配的 DOM 元素數(shù)組的 jQuery 對象焙糟。這個問題我已經見過好幾次被提及口渔,盡管它非常基礎缺脉,它經常被用來區(qū)分一個開發(fā)人員是否了解 jQuery悦穿。





第九題

Js中的事件冒泡和事件委托

1.事件冒泡:


通俗易懂的來講,就是當一個子元素的事件被觸發(fā)的時候(如onclick事件)礁扮,該事件會從事件源(被點擊的子元素)開始逐級向上傳播太伊,觸發(fā)父級元素的點擊事件。


2.事件委托


事件委托逛钻,首先按字面的意思就能看你出來僚焦,是將事件交由別人來執(zhí)行曙痘,再聯(lián)想到上面講的事件冒泡立肘,就是將子元素的事件通過冒泡的形式交由父元素來執(zhí)行赛不。


JS事件流原理圖如下:畫圖舉例


由此可以知道  1罢洲、一個完整的JS事件流是從window開始,最后回到window的一個過程  2殿较、事件流被分為三個階段(1~5)捕獲過程淋纲、(5~6)目標過程、(6~10)冒泡過程






第十題

簡述ajax的優(yōu)缺點

  優(yōu)點:

  1)無刷新更新數(shù)據(jù)(在不刷新整個頁面的情況下維持與服務器通信)

  2)異步與服務器通信(使用異步的方式與服務器通信洽瞬,不打斷用戶的操作)

  3)前端和后端負載均衡(將一些后端的工作交給前端伙窃,減少服務器的負擔)

  4)界面和應用相分離(ajax將界面和應用分離也就是數(shù)據(jù)與呈現(xiàn)相分離)

  缺點:

  1)ajax不支持瀏覽器back按鈕

  2)安全問題 Aajax暴露了與服務器交互的細節(jié)

3)對搜索引擎的支持比較弱



簡述原型鏈

這些原型對象都像鏈條一樣連接在一起为障,所以我們把這種形式叫做原型鏈

原型鏈最主要的作用是繼承放祟。只要是在原型鏈上的屬性和方法,這個對象都能用

訪問規(guī)則:

先看自己對象里有沒有鞋喇,有拿來用眉撵,沒有找自己的原型,原型有拿來用鄙皇,沒有仰挣,再找原型的原型,有拿來用错蝴,沒有繼續(xù)找

直到找到null,都還沒有柬赐,就返回undefined



圖解原型鏈:


?

?

Constructor康死狀克特 ??prototype 普特太仆 ??

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末肛宋,一起剝皮案震驚了整個濱河市束世,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌沉帮,老刑警劉巖贫堰,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件其屏,死亡現(xiàn)場離奇詭異漫玄,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門汗盘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來询一,“玉大人健蕊,你說我怎么就攤上這事∷豕Γ” “怎么了嫡锌?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蛛倦。 經常有香客問我,道長溯壶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮钾虐,結果婚禮上,老公的妹妹穿的比我還像新娘倔监。我一直安慰自己菌仁,他們只是感情好济丘,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著疟赊,像睡著了一般近哟。 火紅的嫁衣襯著肌膚如雪鲫寄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天戳玫,我揣著相機與錄音咕宿,去河邊找鬼荠列。 笑死,一個胖子當著我的面吹牛费就,可吹牛的內容都是我干的力细。 我是一名探鬼主播固额,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼斗躏,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了笛臣?” 一聲冷哼從身側響起隧饼,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤诞丽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后拐格,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡猬膨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了谒所。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡劣领,死狀恐怖姐军,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤奕锌,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布著觉,位于F島的核電站,受9級特大地震影響惊暴,放射性物質發(fā)生泄漏饼丘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一辽话、第九天 我趴在偏房一處隱蔽的房頂上張望肄鸽。 院中可真熱鬧,春花似錦油啤、人聲如沸典徘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蝶念,卻和暖如春媒殉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背桃犬。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工子房, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像梦鉴,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5善茎? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,524評論 1 45
  • 請參看我github中的wiki,不定期更新操骡。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,137評論 2 19
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級和職位的變化跨细,入門級到專家級河质,廣度和深度都會有所增加散休。 題目類型: 理論知...
    怡寶丶閱讀 2,590評論 0 7
  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,223評論 0 3
  • 1.幾種基本數(shù)據(jù)類型?復雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結構? 基本數(shù)據(jù)類型:Undefined胁勺、Nul...
    極樂君閱讀 5,527評論 0 106