前端面試題：
第一道：如何實(shí)現(xiàn)盒子邊框圓角及陰影效果？
1用border-radius 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置四個(gè) border-*-radius 屬性。
提示：該屬性允許您為元素添加圓角邊框！
可以分開(kāi)設(shè)置，如果四邊角度一樣就可以省略，直接寫(xiě)角度即可。
2 用box-shadow（sha`dang）是css3的一個(gè)新屬性，用來(lái)實(shí)現(xiàn)陰影效果，陰影分為內(nèi)陰影和外陰影兩個(gè)效果，可以通過(guò)逗號(hào)添加多個(gè)陰影效果。
<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ù)內(nèi)部調(diào)用函數(shù)外部的變量，那這個(gè)變量與這個(gè)函數(shù)稱(chēng)為閉包。
<<script>
function?f1() {
var?a?= 1
function?f2() {
console.log(a)
}
return?f2
} var?result?= f1()
result() // 1
</script>
上面的代碼中函數(shù)f2內(nèi)部調(diào)用了函數(shù)外部的變量a，故函數(shù)f2與變量a形成了閉包。最后將f2與變量a封裝成函數(shù)f1，便可以在外部讀取到函數(shù)f1內(nèi)聲明的變量，避免了污染全局變量。閉包的作用：1)可以讀取函數(shù)內(nèi)部聲明的變量，避免污染全局變量；2）讓函數(shù)內(nèi)聲明變量的值一直保存在內(nèi)存之中。
包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Javascript語(yǔ)言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡(jiǎn)單理解成“定義在一個(gè)函數(shù)內(nèi)部的函數(shù)”。
所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁。閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。
閉包有三個(gè)特性：
1.函數(shù)嵌套函數(shù)?2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量?。3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收。
第三道：
請(qǐng)說(shuō)出至少8個(gè) HTTP 狀態(tài)碼，并描述各狀態(tài)碼的意義。例如：狀態(tài)碼200表示響應(yīng)成功；
一般情況下：
[if !supportLists]1.?[endif]狀態(tài)碼201表示創(chuàng)建成功2.狀態(tài)碼300表示多種選擇3.狀態(tài)碼301表示永久移動(dòng)4.狀態(tài)碼302表示臨時(shí)移動(dòng)5.狀態(tài)碼400表示用戶(hù)請(qǐng)求語(yǔ)法錯(cuò)誤6.狀態(tài)碼404表示服務(wù)器找不到用戶(hù)請(qǐng)求的網(wǎng)頁(yè)7.狀態(tài)碼500表示服務(wù)器內(nèi)部錯(cuò)誤，無(wú)法完成請(qǐng)求8.狀態(tài)碼502表示服務(wù)器未打開(kāi)
2開(kāi)頭 （請(qǐng)求成功）表示成功處理了請(qǐng)求的狀態(tài)代碼。
3開(kāi)頭 （請(qǐng)求被重定向）表示要完成請(qǐng)求，需要進(jìn)一步操作。 通常，這些狀態(tài)代碼用來(lái)重定向。（重定向的意思一般就是指換網(wǎng)站了或者說(shuō)網(wǎng)站沒(méi)了比如有的網(wǎng)站看著看著就被封了，或者轉(zhuǎn)成廣告正經(jīng)網(wǎng)站不受美利堅(jiān)保護(hù)了。）
4開(kāi)頭 （請(qǐng)求錯(cuò)誤）這些狀態(tài)代碼表示請(qǐng)求可能出錯(cuò)，妨礙了服務(wù)器的處理。
5開(kāi)頭（服務(wù)器錯(cuò)誤）這些狀態(tài)代碼表示服務(wù)器在嘗試處理請(qǐng)求時(shí)發(fā)生內(nèi)部錯(cuò)誤。 這些錯(cuò)誤可能是服務(wù)器本身的錯(cuò)誤，而不是請(qǐng)求出錯(cuò)。（5開(kāi)頭碼一般不常見(jiàn)，了解一下知道就好了）
第四道：
闡述清除浮動(dòng)的幾種方式：
1.父級(jí)div定義 height
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題。
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題
2.父級(jí)div定義 overflow:hidden
原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好
[if !supportLists]3.?[endif]在盒子中增加一個(gè).clearfix::；
原理：添加一個(gè)空div，利用css提高的clearfix:：清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁(yè)面浮動(dòng)布局多，就要增加很多空div，讓人感覺(jué)很不好
第五道
編寫(xiě)一個(gè)方法去掉數(shù)組里面重復(fù)的內(nèi)容var arr=[1,2,3,4,5,1,2,3]
一個(gè)數(shù)組去重的簡(jiǎn)單實(shí)現(xiàn)
<script>
var?arr?= [1,2,3,4,5,1,2,3]
//定義一個(gè)新的數(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類(lèi)型，代表“空值”，代表一個(gè)空對(duì)象指針，使用typeof運(yùn)算得到 “object”，所以可以認(rèn)為它是一個(gè)特殊的對(duì)象值。
undefined： Undefined類(lèi)型，當(dāng)一個(gè)聲明了一個(gè)變量未初始化時(shí)，得到的就是undefined。
javaScript權(quán)威指南： null 和 undefined 都表示“值的空缺”，可以認(rèn)為undefined是表示系統(tǒng)級(jí)的、出乎意料的或類(lèi)似錯(cuò)誤的值的空缺，而null是表示程序級(jí)的、正常的或在意料之中的值的空缺。
第七題：
講幾種簡(jiǎn)單布局，例如左邊固定寬度右邊自由，或者中間固定兩邊自由寬度。
?float方法（兩邊固定中間自由伸縮）：
通過(guò)使兩邊的div左右浮動(dòng)，脫離文檔流，再為中間的div設(shè)置margin-left,margin-right值為左右div的寬度即可.中間的寬度設(shè)置為百分百。（缺點(diǎn)時(shí)div的排列要把中間的放在最下面）
<body>
<div?class="left">我最左邊的</div>
<!-- <div class="center">我是中間的</div>錯(cuò)誤 -->
<div?class="right">我最右邊的</div>
<div?class="center">我是中間的</div><!--正確-->
</body>
flex方法（中間固定兩邊自由伸縮）一般用于手機(jī)端布局
<style>
.wrap?{
display: flex;佛萊克斯
flex-direction: row;/* 讓容器內(nèi)盒子水平顯示*/?刀軟可腎
}
.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庫(kù)中的 $() 是什么？
$()函數(shù)是 jQuery() 函數(shù)的別稱(chēng)，乍一看這很怪異，還使 jQuery 代碼晦澀難懂。其實(shí)非常好理解。$()函數(shù)用于將任何對(duì)象包裹成 jQuery 對(duì)象，接著你就被允許調(diào)用定義在 jQuery 對(duì)象上的多個(gè)不同方法。甚至可以將一個(gè)選擇器字符串傳入 $() 函數(shù)，它會(huì)返回一個(gè)包含所有匹配的 DOM 元素?cái)?shù)組的 jQuery 對(duì)象。這個(gè)問(wèn)題我已經(jīng)見(jiàn)過(guò)好幾次被提及，盡管它非常基礎(chǔ)，它經(jīng)常被用來(lái)區(qū)分一個(gè)開(kāi)發(fā)人員是否了解 jQuery。
第九題
Js中的事件冒泡和事件委托
1.事件冒泡：
通俗易懂的來(lái)講，就是當(dāng)一個(gè)子元素的事件被觸發(fā)的時(shí)候（如onclick事件），該事件會(huì)從事件源（被點(diǎn)擊的子元素）開(kāi)始逐級(jí)向上傳播，觸發(fā)父級(jí)元素的點(diǎn)擊事件。
2.事件委托
事件委托，首先按字面的意思就能看你出來(lái)，是將事件交由別人來(lái)執(zhí)行，再聯(lián)想到上面講的事件冒泡，就是將子元素的事件通過(guò)冒泡的形式交由父元素來(lái)執(zhí)行。
JS事件流原理圖如下：畫(huà)圖舉例
由此可以知道 1、一個(gè)完整的JS事件流是從window開(kāi)始，最后回到window的一個(gè)過(guò)程 2、事件流被分為三個(gè)階段(1~5)捕獲過(guò)程、(5~6)目標(biāo)過(guò)程、(6~10)冒泡過(guò)程
第十題
簡(jiǎn)述ajax的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
1）無(wú)刷新更新數(shù)據(jù)（在不刷新整個(gè)頁(yè)面的情況下維持與服務(wù)器通信）
2）異步與服務(wù)器通信（使用異步的方式與服務(wù)器通信，不打斷用戶(hù)的操作）
3）前端和后端負(fù)載均衡（將一些后端的工作交給前端，減少服務(wù)器的負(fù)擔(dān)）
4）界面和應(yīng)用相分離（ajax將界面和應(yīng)用分離也就是數(shù)據(jù)與呈現(xiàn)相分離）
缺點(diǎn)：
1）ajax不支持瀏覽器back按鈕
2）安全問(wèn)題 Aajax暴露了與服務(wù)器交互的細(xì)節(jié)
3）對(duì)搜索引擎的支持比較弱
簡(jiǎn)述原型鏈
這些原型對(duì)象都像鏈條一樣連接在一起，所以我們把這種形式叫做原型鏈
原型鏈最主要的作用是繼承。只要是在原型鏈上的屬性和方法，這個(gè)對(duì)象都能用
訪問(wèn)規(guī)則：
先看自己對(duì)象里有沒(méi)有，有拿來(lái)用，沒(méi)有找自己的原型，原型有拿來(lái)用，沒(méi)有，再找原型的原型，有拿來(lái)用，沒(méi)有繼續(xù)找
直到找到null，都還沒(méi)有，就返回undefined
圖解原型鏈：
?
?
Constructor康死狀克特 ??prototype 普特太仆 ??
