前端面試題第三套
1.關於angularjs說法，錯誤的是 B
A.前端MVC，極大降低前端開發的耦合
B.極大豐富了DOM操作
C.實現了數據雙向綁定
D.實現了依賴注入
2.如何把7.25四捨五入爲最接近的整數 D
A.round(7.25)
B.Rnd(7.25)
C.Math.rnd(7.25)
D.Math.round(7.25)
3.下面關於CSS佈局的描述，不正確的是 D
A.塊級元素實際佔用的寬度與它的width屬性有關
B.塊級元素實際佔用的寬度與它的border屬性有關
C.塊級元素實際佔用的寬度與它的padding屬性有關
D.塊級元素實際佔用的寬度與它的background屬性有關
4.你想通過XMLHttpRequest更新以下元素，哪個是正確的做法 B
<div id = “statusCode”></div>
A. var myDiv = document.getElementById ("statusCode"); myDiv.innerHTML = req.statusCode;
B. var myDiv = document.getElementById ("statusCode"); myDiv.innerHTML = req.status;
C. var myDiv = document.getElementById ("statusCode");
myDiv.setStatus (req.statusCode);
D. var myDiv = document.getElementById ("statusCode");
myDiv.status = req.status;
5.在jquery中想要找到所有元素的同輩元素，下面哪一個是可以實現 C
A.eq(index)
B.find(expr)
C.siblings([expr])
D.next()
6.如何規避JavaScript多人開發函數重名問題 D
A.可以通過命名規範，比如根據不同的開發人員實現的功能，在函數名加前綴
B.每個開發人員都把自己的函數封裝到類中，然後調用的時候即使函數名相同，但是因爲是要類.函數名來調用，所以也減少了重複的可能性
C.A、B都不正確
D.A、B都正確
7.下面有關JavaScript內部對象的描述正確的有（多選） ABCD
A.History對象包含用戶（在瀏覽器窗口中）訪問過的URL
B.Location對象包含有關當前URL的信息
C.Window對象表示瀏覽器中打開的
D.Navigator對象包含有關瀏覽器的信息
8.使用CSS的flexbox佈局，不能實現以下哪一個效果：D
A.三列布局，隨容器寬度等寬彈性伸縮
B.多列布局，每列的高度按內容最高的一列等高
C.三列布局，左列寬度像素數確定中、右列隨容器寬度等寬彈性伸縮
D.多個寬高不等的元素，實現無縫瀑布流佈局
9.下面有關html Doctype的描述，說法錯誤的是 D
A.它的責任就是告訴瀏覽器文檔使用哪種html或者xhtml規範
B.不同文檔模式主要影響CSS內容的呈現，尤其是瀏覽器對盒模型的解析
C.不同瀏覽器在混雜模式下的行爲差異非常大，如果不使用某些hack技術，跨瀏覽器的行爲根本就沒有一致性可言。
D.如果在文檔開始處沒有發現文檔類型聲明，則所有瀏覽器都會默認開啓嚴格模式
10.下列哪個操作是W3C標準定義的阻止事件向父容器傳遞： C
A. e.preventDefault()
B. e.cancelBubble=true
C. e.stopPropagation()
D. e.stopImmediatePropagation()
11.以下js代碼輸出爲？
var length = 10
function fn(){
alert(this.length)
}
var obj = {
length: 5,
method: function(fn) {
fn() // ?
arguments[0]() // ?
}
}
答案: 這裏的坑主要是arguments，我們知道取對象屬於除了點操作符還可以用中括號，這裏fn的scope是arguments，即fn內的this===arguments，調用時僅傳了一個參數fn，因此length爲1。（5）
obj.method(fn)
12.以下js代碼輸出爲？
~function() {
alert(typeof next) // ?
~function next() {
alert(typeof next) // ?
}()
}()
答案: 外層匿名函數自執行，打印next，接着內層具名函數自執行。會發現具名的next僅在其自身函數體內可訪問，即輸出爲function。外面是不可見的，typeof就爲undefined了。（注：此題IE6/7/8中輸出爲function function， 標準瀏覽器爲undefined function）（5）
~function(){} 意思是直接運行 而沒有進行聲明。外部不可訪問，內部可訪問。
加上運算符，因爲解析的緣故 ,function會即時觸發，
以下效果都一樣，就是一個語言特徵，瞭解一下就可以了。
JavaScript code?
1
2
3
4
5 +function(){alert(1)}()
-function(){alert(1)}()
~function(){alert(1)}()
^function(){alert(1)}()
%function(){alert(1)}()
13.以下js代碼輸出爲？
a = 3
a.prop = 4
alert(a + a.prop)// ?
答案: 變量a爲數字3，給其添加prop屬性，值爲4（奇怪吧在JS中這是允許的，且不會有語法錯誤）。然後alert出a+a.prop的結果。結果是NaN。a.prop爲undefined，3+undefined爲NAN.
14.以下js代碼輸出爲？
var a = 1
function func() {
a = b = 2
}
func()
alert(a)
alert(b) // ?
答案: JS中不用var聲明的變量默認是全局變量，而這裏的連等使的情況更加隱蔽。這裏的b是全局的，因此func外可以訪問。
15.以下js代碼輸出爲？
var uname = 'jack'
function change() {
alert(uname) // ?
var uname = 'lily'
alert(uname)
}
change()
答案: 這裏容易犯迷糊的是第一個alert，如果認爲函數change外已經聲明賦值了，此時應該是jack，實際函數內又var了一次（雖然var在其後），預解析時仍然會將其置undefined。這也是爲什麼書裏都建議變量聲明都放在代碼塊的最前面。
16.如果讓你來製作一個訪問量很高的大型網站，你會如何來管理所有CSS文件、JS與圖片？
回答：涉及到人手、分工、同步；
先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
頁面進行標註（例如 頁面 模塊 開始和結束）；
CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）
JS 分文件夾存放 命民以該JS 功能爲準英文翻譯；
圖片採用整合的 images.png png8 格式文件使用 儘量整合在一起使用方便將來的管理
17.你對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
回答：
是策劃 UI設計 需要轉換成程序可實施中的必須的中間環節，這個環節直接關係到頁面的正確高效穩定還原 策劃和UI 設計的效果，同時爲程序套接做好程序表現基礎載體。這個工作的前景，只能是深造技術流的，模塊化管理，新的技術不斷更新，對於向後兼容思維的逐步放棄，比如真的淘汰掉IE6後，向前的空間還是有的。前端開發工程師的前景是非常不錯的。現在各大IT企業都在招聘這方面的人才。 WEB2.0的普及會更加促進本行業本工種的繁榮。
18.ajax技術利用了什麼協議？簡述ajax的工作機制。
答案: HTTP協議 XMLHttpRequest()
運行原理：1. 創建請求對象 2. 設置回調函數onreadystatechange
3. 初始化open() 4. 發送請求 send()
19.用js實現隨即選取10–100之間的10個數字，存入一個數組，並排序。
答案: var iArray = [];
funtion getRandom(istart, iend) {
var iChoice = istart - iend + 1;
return Math.floor(Math.random() * iChoice + istart);
}
for (var i = 0; i < 10; i++) {
iArray.push(getRandom(10, 100));
}
iArray.sort();
console.log(iArray);
20.把兩個數組合並，並刪除第二個元素。
答案: var array1 = ['a', 'b', 'c'];
var bArray = ['d', 'e', 'f'];
var cArray = array1.concat(bArray);
cArray.splice(1, 1);
21.請用CSS實現如下圖的樣式，相關尺寸如圖示，其中dom結構爲：
<div id = ”demo”></div>
答案: #demo {
width: 100px;
height: 100px;
background-color: #fff;
position: relative;
border: 2px solid #333;
}
#demo:after, #demo:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
#demo:after {
border-width: 10px;
border-left-color: #fff;
top: 20px;
}
#demo:before {
border-width: 12px;
border-left-color: #000;
top: 18px;
}
解釋：
剛看到這個題目覺得無從下手，感覺一般這種不都是一個背景圖片嗎，怎麼還能用css寫的?? 後來看到網友的答案，試着運行了一下發現真的和圖上的一模一樣，最傷心的是看到答案竟然還看不懂。。覺得自己還是好水，仔細琢磨了一下，現將心得整理一下：
實現圖示的效果涉及到的知識主要有兩點：一個是before、after僞元素，一個是border
1、before 和 after 都是css中的僞元素，他們倆用法都差不多，通過給定一個屬性content給元素添加新的內容，不同的是before用來在元素前插入新內容，after用來在元素後面插入新內容。
比如有一個p元素：水
<p>水</p>
如果給這個p元素設置一個before：
p:before{
content:"上海自來";
}
這個p就變成了：上海自來水，content屬性的值就添加到了p元素內容的前面。
相反的，如果是用after：
p:after{
content:"來自海上";
}
這個p就會變成：水來自海上。
簡單的before、after使用就是這樣，一開始看的時候覺得好簡單，不就是插入個內容嗎，但實際上插內容不算什麼，最重要的是它能設！置！樣！式！一旦給它設置各種各樣的樣式之後這個僞元素就厲害了，比如題目中的尖角，題目只給了一個div我們，但是很明顯div只能弄出一個左邊的帶邊框正方形，右邊的尖角怎麼來的呢，那就可以靠這個僞元素了。
思路很簡單，先把正方形畫出來，然後通過before或者after變出一個尖角出來，放到正方形右上角去。div如下：
#demo{
width:100px;
height:100px;
background-color:#fff;
border: 2px #000 solid;
}
好，這個時候正方形已經出來了，但是三角形怎麼畫出來呢，這就要用到border了
2、以前使用border都是border：1px #000 solid，頂多換換顏色和邊框值，沒想到畫三角形也能靠它……
以前沒發現的原因在於使用border的時候總是1px、2px的，太細了，當把邊框變成20px的時候就有意思了，下面是一個邊長10px的正方形設置其邊框長也爲10px：
我們知道可以通過設置border-left等等手動設置四個邊框爲不同顏色，分別設置之後：
馬上看出靠譜，如果把這個div的寬度減小到0之後豈不就是四個三角形了，動手實驗：
果然是，那把上下右的顏色變透明之後就能得到一個三角形拉，在這裏要注意的是把其他三個邊透明是能得到一個三角形的，但是如果只設置左邊框而不設置其他三個邊框是得不到的，自己動手試下便知，因爲如果只設置左邊框，而這個div的高度又爲0，那這個左邊框是不會向上下兩端擴展的，只有當上或下也有邊框時纔會呈現出一個三
角形，所以我們可以把所有邊框透明掉，然後把左邊框顯示即可。比如下面這樣：
diiv{
width:0px;
height:0px;
border: 20px transparent solid;
border-left-color: #000;
}
就能得到這個效果了：
那把三角形放到正方形右側就很簡單了，有一點是那個正方形是缺了一段的，我們可以讓三角形顏色爲白色覆蓋掉正方形的邊框，另外再用一個黑色的比白色三角形大一點的三角形放在白三角形下面，這樣就只漏出了三角形的兩條邊，所以這裏同時用到了before和after。
因爲before和after插入的三角形是放在指定的位置的，所以它們的position都設置爲絕對定位，那麼div就要設置成相對定位了：
#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}
首先是黑色的三角形：
#demo:before{
width:0px;
height:0px;
border: 10px transparent solid;
border-left-color: #000;
position:absolute;
top:20px;
left:100%;
content:""
}
注意content雖然沒有值，但是必須得加上。現在效果如下：
然後是比黑色三角形小一點點的白色三角形：
#demo:after{
width:0px;
height:0px;
border: 8px transparent solid;
border-left-color: #fff;
position:absolute;
top:22px;
left:100%;
content:""
}
注意白色三角形比褐色三角形要小，所以邊框長度就小2px，且top也大2px，效果如下：
由此這個題目就做完拉，當然相同的樣式可以整理下，最終樣式如下：
#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}
#demo:before, #demo:after{
width:0px;
height:0px;
border:transparent solid;
position:absolute;
left:100%;
content:""
}
#demo:before{
border-width:10px;
border-left-color: #000;
top:20px;
}
#demo:after{
border-width:8px;
border-left-color: #fff;
top:22px;
}
22.你如何看待加班？
答案: 用人單位在招聘員工的時候，雖然該職位不一定會經常加班，但用人單位還是希望求職者能夠配合公司的需要，在必要加班的情況下，能夠做出一定的犧牲。因此，“你如何看待加班”這個面試問題經常會被問起。
回答一：
如果真是非完成不可的工作，那我就會加班。我認爲，休假日也不一定就該不聞不問地休息。連休假日都需要加班的話，說明所從事的工作一定是相當充實的。只要是有意義的工作，與其昏昏然地享受休假，不如高高興興地來加班。
點評：
不只侷限於是否能在加班的問題，而且更進一步從加班談到工作的充實感，其中獨具匠心。雖然全世界都在指責日本的勤勞過度現象，在這裏卻應該對此加以褒揚。
啓示：
從這個問題的回答中可以看出應試者的敬業精神及對公司的忠誠度如何。因此，不必多費脣舌，只要理所當然地說“可以”就行了。
回答二：
加班但以後可以得到調休，所以，我覺得不會有什麼問題。個人的時間固然重要，但由於工作需要，當然也會出現不得不在休假日上班的情況。我覺得只要是自己分內的工作，就算加些班也不會有人抱怨的。
點評：
這番話在不至於變成贊成勤勞過度方面掌握着巧妙的平衡。但是，爲了自然而然地暗示這個意思而採取第三者的立場的話，就會妨礙意思的表達。如果不能堂堂正正地發表自己的意見，就會被認爲是無論做什麼事情都缺乏自信的表現。
總之，在回答“你如何看待加班”這個面試問題時，自然是要說“可以加班”了。不過有一點要當心，不要說得過度了，否則弄巧成拙，以後真的來上班的時候卻又做不到，就反爲不美了。