前端面試題:
第一道:如何實現(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]
<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 普特太仆 ??