面試題目彙總
前言
近期在找工作，也在讀 前端面試江湖 這本書，書中整理了很多基礎的面試題目，在書中也發現了一些錯誤。
好記性不如爛筆頭，於是整理下對自己有益的題目，都是一些較為基礎的題目,後期還會更新。時時刻刻勉勵自己，注重基礎。
現在在找工作，初中級前端，如有哪位熱心的仁兄公司在招前端，希望@我一下，目標廣州，前端路很長，希望一起努力向前。
js初級之操作字串
-
擷取字串 var a = “www.qdjhu.com中的qdjhu”。
- 考察知識點，substr()第一個引數為起始位置，第二個引數為擷取的長度，注意第一個引數為負數則從末尾往前找，第二個引數為負數則返回空字串，此方法不會修改原字串，只是查詢並返回查詢的結果，與slice()方法不同的是，slice()方法第二個引數為結束位置，slice()的第一個引數如果大於第二個引數則返回空字串。
a.substr(4,5)或者a.slice(4,9)
- 考察知識點，substr()第一個引數為起始位置，第二個引數為擷取的長度，注意第一個引數為負數則從末尾往前找，第二個引數為負數則返回空字串，此方法不會修改原字串，只是查詢並返回查詢的結果，與slice()方法不同的是，slice()方法第二個引數為結束位置，slice()的第一個引數如果大於第二個引數則返回空字串。
-
判斷字串是否是這樣組成的，第一個必須是字母，後面的可以使字母，數字，下劃線，總長度為5-20。
- 考察知識點，正則。[a-zA-Z]是匹配所有字母，w表示匹配任意字母，數字，下劃線。{n}代表重複幾次，{n,m}代表重複至少n次，至多m次。
var a = /^[a-zA-Z]{1}w{4，19}/
- 考察知識點，正則。[a-zA-Z]是匹配所有字母，w表示匹配任意字母，數字，下劃線。{n}代表重複幾次，{n,m}代表重複至少n次，至多m次。
-
給定一個字串 “IamWangZhiJun”,要求查詢裡面的字串Wang。
-
考查知識點，對String物件的操作，indexOf()方法表示查詢一個字串在另一個字串中的位置，返回一個整數，字串匹配開始的位置。
var a ="IamWangZhiJun" var b ="Wang" var c =a.indexOf(b) //3 var d = a.substr(c,b.length)
-
-
如何實現一個刪除字串左邊為空白字元的方法。
- 知識點1，replace(),第一個引數為匹配模式（正則），第二個引數為替換的內容。
-
知識點2，量詞符和貪婪模式，？表示0次或者1次{0，1}，*表示0次或者多次{0，}，+表示1次或者多次{1,}。預設情況下匹配貪婪模式。
function leftTrim(str){ return str.replace(/^s*/,"") }; var a = leftTrim(" abc")//abc
-
JavaScript 的typeof 都返回那些資料型別。
- 知識點，js的6種資料基本型別。underfined,String,Number,Object,function,boolean 。
-
請定義一個函式，實現字串的反轉。
-
知識點，主要是把字串從末尾開始的每一個元素擷取後，在重新組成一個新字串，用到的方法charAt(), 返回指定位置的字元，注意是從0開始。
function reverStr(str){ var temStr = ""; for(var i = str.length-1:i>=0:i—-){ temStr+=str.charAt(i)} } returun temStr; }
-
7. 字串的操作主要有那些。
* 查詢型別
* indexOf()，返回匹配開始的位置。
* search(),返回匹配的第一個位置。
* match()，返回一個陣列，成員為匹配的字串。
* length(),返回字串的長度
* 擷取，拼接,替換類
* slice(),從原字串中取回字串並返回,第一個引數為起始位置，第二個引數為結束位置。
* substr(),從原字串中取回字串並返回，第一個引數是子字串的開始位置，第二個引數是子字串的長度。
* concat(),方法用於連線兩個字串，返回一個新字串，不改變原字串。
* replace(),第一個引數為被替換的內容，第二個引數為要替換的內容，一般只匹配一個。
* charAt()方法返回指定位置的字元，引數是從0開始編號的位置。
* trim()
* 轉換類
* split(),第一個引數為起始位置 第二個引數為限定放回陣列的成員數，注意，第一個引數如果為空，則返回陣列的成員是原字串的每一個字元。此方法會將字串裝換為陣列。
8. 有一個字串 abcd-ef-ghi,請用js把它處理成ghi&ed&abcd。
* 知識點，字串和陣列之間的裝換。 var a ="abcd-ef-ghi";
var b = a.split("-");
var result = b.reverse().join("&")
```-
請編寫程式碼擴充JavaScript中string物件，讓其有一個方法刪除字串中所有英文句號”.”。
String.prototype.killPoint = function(){ return this.replace(/^./g,""); } -
將字串”wang zhi j un”中由空格分割的每個單詞首字母大小寫。
function str(words) { words = words.split(" "); for(var i = 0;i<words.length;i++){ words[i] = words[i].charAt(0).toUpperCase + words[i].slice(1); } return words; } var words = "wang zhi j un"; str(words);
JS初級之變數,DOM，迴圈語句
-
JS如何檢測變數是一個string型別？請寫出函式實現。
function isString(str){ if(typeof(str) === "string" || str.constructor === String){ return true; }else{ return false; } } var str = "hello world"- 這裡需要注意的是也要判斷這個值的資料型別。
-
請說明javaScript中的nodeName,nodeVaule,nodeType的區別
* nodeName 表示節點的名稱 * 元素節點的nodeName是標籤名稱 * 屬性節點的nodeName是屬性名稱 * 文字節點的nodeName是#text * 文件節點的nodeName是#document * nodeVaule 表示文字內容 * 對於文字節點，nodeVaule屬性包含文字 * 對於屬性節點，nodeValue屬性包含屬性值 * nodeType 屬性返回節點的型別,常用的如下 * 元素型別對應的節點型別為1 * 屬性型別對應的節點型別為2 * 文字屬性對應的節點型別為3 -
下列程式碼執行後，結果是什麼
for(i=0,j=0;i<6,j<10;i++,j++){ var k =i+j } alert(k) //18 for(i=0,j=0;i<10,j<6;i++,j++){ var k =i+j } alert(k) //10- 知識點，在for語句中條件用逗號隔開，就相當於“並且”。
- var t =(4,5,6),console.log(t) //6,這裡也說明逗號表示式返回的結果是由最後一個表示式決定的。
-
統計從1-400之間的自然對數中含有多少個1？
var count = 0; for(var i=0;i<=400;i++){ for(var j=0;j<=i.toString().length;j++){ if(i.toString()[j]=="1"){ count++} } } alert(count) -
js中基本資料型別有哪些？本地物件，內建物件，宿主物件有那些？
-
基本資料型別
string,boolean,number,null,undefined,object。 - 本地物件(常用)
-
Object,Function,String,Number,Boolean,Data,Array,RegExp。
-
內建物件
- 簡單的說，內建物件是本地物件的一種，其中包含2種物件，Math,Global(isNaN,parseInt,parseFloat)
-
宿主物件
所有BOM,DOM都是宿主物件
其中BOM常用物件有- localtion
- navigation
- screen
- history
JS中級之函式
-
編寫一個函式，引數為一個元素，返回指定元素的第一個元素，函式越簡單越好
function getFirst(el){ var nodes = el.children; return nodes.length!=0?nodes[0]:null; } -
簡述JavaScript中this的理解。
- this代表函式執行的時候，自動生成一個內部物件，在函式內使用
- this指的是呼叫函式的那個物件
-
一下討論this的四種用法
-
純粹的函式呼叫，說明此時this代表全域性物件。
var x = 1; function test(){ this.x = 0;//這裡等同於x = 0;已改寫 } test();//window.test() alert(x);//0 -
作為物件方法的呼叫，說明此時this指向這個的上級物件。
function test(){ alert(this.x); } var o = {}; o.x=1; o.m = test; o.m()//1 -
作為建構函式的呼叫，說明此時this是指向新物件，不是全域性物件！！！
var x = 2; function test(){ this.x = 1; } var o = new test(); alert(o.x)//1 alert(x)//2 -
apply呼叫
var x = 0; function test(){ alert(this.x)} var o = {}; o.x = 1; o.m = test; o.m.apply()//0,當引數為空的時候，預設呼叫全域性 o.m.apply(o)//1
-
-
什麼是閉包？閉包的特性？對頁面有什麼影響？好處和壞處？請寫出一個閉包的簡單例項？
- 閉包就是能夠讀取其他函式內部變數的函式。
-
閉包特性
- 閉包外層是一個函式
- 閉包內層也是一個函式
- 閉包會return內部函式
- 閉包返回的函式內部不能有return
- 執行閉包後，閉包內部的變數會快取
- 閉包只有被執行的時候才會呼叫
-
好處和壞處
- 方便上下文呼叫
- 加強封裝性
- 壞處 浪費記憶體
-
例項
function a(){ var i = 0; function b(){ console.log(++i) // i=null 解決記憶體洩漏 } return b; } var c = a();//執行a函式 c()//執行b函式，也就是執行閉包，結果為1 c()//2 …
-
IE和Firefox處理相容。
-
繫結事件監聽
function addEvent(elem,eventName,handler){ if(elem.attachEvent){ elem.attachEvent("on"+eventName,handler) }else if{ elem.addEventListener(eventName,handler,false)} }else{ elem["on"+eventName] } function removeEvent(elem,eventName,handler){ if(elem.detachEvent){ elem.detachEvent("on"+eventName,handler) }else if{ elem.removeEventListener(eventName,handler,false) }else{ elem["on"+eventName] } } -
獲取到event物件
function getEvent(e){ return e ? e : windowm.event; } function getTarget(e){ return e.target||e.srcElement } //阻止預設和冒泡 function prevent(e){ if(e.prevent){ e.preventDefault(); }else{ e.returnValue = false } } function stop(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble()} }
-
-
將$(“.red”).attr(“sth”,4)裝換成Js實現
-
知識點，得到的是陣列，要遍歷。
var a = document.getElementsByClassName("red"); for(var i =0;i<a.length;i++){
-
}
6. 作用域問題
var a = {n:1};
var b =a;
a.x=a={n:2};//a.x={n:2};a={n:2}
console.log(a.x);//undefined
console.log(b.x);//{n:2}
理解，首先 `var a = {n:1}` a這裡指向一個物件，`var b =a ` 則是將b也指
向這個物件，第三行程式碼，實際是已經不共享物件了，a已經改寫了，而b.x裡面則添
加了x = {n:2}，故有上結果。
7. Boolean物件和Boolean值
var x = new Boolean(false);
if (x) {
alert(`hi`);
}
var y = Boolean(0);
if (y) {
alert(`hello`);
}
//alert(“hi”),undefined
8.什麼是跨域？跨域的幾種實現方法？
* 跨域是通過js在不同域進行資料傳輸或者通訊，當埠號，協議，域名 不同的情況下，使用ajax是拿不到資料的。
* 解決方法
* 使用window.name進行跨域,
a.html頁面,比如說域名是www.abc.com/a.html;這裡需要注意的是 資料只能是字串形式。
<script>window.name = "我是a.html頁面的資料，我是跨域請求的資料"</script>
```
b.html頁面，比如說www.baidu.com/b.html
```
<iframe id="proxy" src="www.abc.com/a.html" style="display:none" onload="getdata()"></iframe>
<script>
var iframe = document.getElementById("proxy");
function getdata(){
iframe.onload = function (){
var data = iframe.contentWindow.name;
alert(data);
}
iframe.src = "about:blank";
}
</script>
```- 用H5 window.postMessage,可自行百度。
9.判斷當前瀏覽器的型別
var useAgent = window.navigator.useAgent;
if(useAgent.indexOf("Chorme")){
alert("是Chorme瀏覽器")
};
if(useAgent.indexOf("Safari")){
alert("是Safari瀏覽器")
};
if(useAgent.indexOf("Firefox")){
alert("是Firefox瀏覽器")
};
主要涉及的知識點 是考察window物件下的navgator物件的useAgent屬性，得到是字串，返回最字串進行操作。HTML5，CSS3初級，中級面試題
-
CSS3新特性有哪些？請做說明。不少於5條
-
選擇器類(稍微特別一點的)
* first-child * last-child * nth-child * :cheecked -
文字樣式
-
@font-face
@font-face{ font-family:BorderWeb; src:url(BorderWeb.eot) } .border{ font-family:"BorderWeb" } -
text-overflow & white-space & word-warp
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;} - text-decoration為文字新增下劃線 預設值none
- 邊框，背景 樣式
- 圓角 border-radius,四個引數 從上左到下右 4個方位
-
漸變，
-
線性漸變.
- linear-gradient(left,#333,#999)(預設是從上到下)
-
第一個引數為方位，可以是對角,如left to。也可以是角度，注意這裡是順時鐘，如180deg就是從下到上
-
徑向漸變.
- radial-gradient(center,circle,yellow 10%,bule 30%)
- 陰影，box-shadow.反射,box-reflect
- 背景，background-clip
-
佈局
- flex佈局
- 多列布局column,引數column-count,column-gap,column-rule
-
-
動畫,過渡
* transition * transform * animation
-
-
-
HTML有哪些新特性？
-
新增標籤
<header><footer><nav><section><artical><aside><figure> <figcaption><details>
- 用於繪畫的 canvas 元素
- 用於媒介回放的 video 和 audio 元素
- 對本地離線儲存的更好的支援 Local storge，sessionStorage
- 新的表單控制元件，比如 calendar、date、time、email、url、search，移動端體驗更好
- 新增獲取地理位置，上傳檔案等API
- 新的跨域通訊機制 window.postMessage
-
3.localStorage,sessionStorage,cookie 的區別
- localStorage 用於持久化的本地儲存，關閉頁面還有，除非主動刪除，否則一直存在，儲存量大
- sessionStorage 不是持久化的本地儲存，關閉頁面就不會有
- cookie 是與伺服器互動的，作為http規範的一部分而存在，在瀏覽器和伺服器之間來回，儲存量小
4.如何觸發頁面的迴流reflow,重繪repaint,解釋下它們的基本原理
- DOM元素的修改，新增，刪除。
- 僅改變DOM元素的字型顏色，只有repaint
- 應用新的樣式或者修改任何元素外觀的屬性
- resilze瀏覽器視窗，滾動
- 讀取元素 如(offsetTop,offsetLeft等等)
-
原理解析
- repaint 重繪 是當一個元素的外觀被改變的時候產生重繪。
- reflow 重排（迴流），是當DOM發生改變，如寬高等。如果reflow 的頻繁，會導致GPU使用率上升
-
減少效能影響的方法
1. 減少對DOM的操作，如 查詢時候將值賦值給區域性變數，減少迴圈對DOM的操作。 2. 使用JSON格式來進行資料交換
5.transition的侷限性
- transition 需要事件觸發
- transition 是一次性的，不能重複，除非一在觸發
- transition 只有開始和結束2種狀態，不能定義中間狀態
- transition 只能定義一個屬性的變化，不能涉及多個屬性。
- transition 不能識別display的變化。
6.如何優化頁面速度，提高頁面響應。
- 取消重定向，原因是網站都會首先載入一個空白的頁面，然後在定向到另外的頁面。
- 合併javaScript
- 合併css
- 使用css sprite
- 啟用GZIP
- css,js引入檔案位置，css放在
<head>裡面，js放在尾部 - img標籤要新增alt屬性
- 清除無效的a標籤，並給a標籤加上title屬性
- 快取靜態資源
- 不用iframe/frame
- 減少DNS域名查詢時間，將DNS的時間設定為較低的水平，比如60-100ms進行一次DNS查詢
7.如何提高前端效能
- 用webStorage代替cookie,可以減少HTTP請求的資料量
- 使用css3動畫，開啟GPU加速。translate3d()
- 快取HTML標記
8.如何對網站的檔案和資源進行優化
- 檔案合併
- 檔案最小化
- 使用cdn託管
- 快取的使用
9.請簡單說明浮動和絕對定位的區別和應用。
- 二者都會脫離文件流，並自動轉換為塊級元素。不同的是絕對定位的元素是按照瀏覽器的左上角計算的或者對設定相對定位的父元素開始的，它的脫離文件流不佔據空間，因此會產生覆蓋頁面上的其他元素，故有了z-index屬性。
- 浮動元素還是基於正常的文件流，只是在文件流中抽出，並儘可能的移動到最左側或者右側，文字內容會圍繞在浮動元素周圍，仍然在文件流中的元素會替補原先的空間。
10.說說移動端的相容和常見問題解決方案(整理了自己用過的)
1. meta 元標籤基礎知識
* 將視窗調整為裝置視窗，並禁止使用者縮放
```
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
```
* 忽略頁面中的數字識別為電話號碼,Android平臺對郵箱的識別
```
<meta name="format-detection",content="telephone=no">
```
```
<meta name="format-detection",content="email=no">
```
* 當網站新增到主螢幕快速啟動方式,以及頂部導航條樣式
```
<meta name="apple-mobile-wep-app-capable",content="yes">
```
```
<meta name="apple-mobile-web-app-status-bar-sytle",content="black">
```
2. 移動端字型
* 中文使用預設字型，英文用Helvetica
3. 觸控事件的響應順序
```
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
```
4. Retina螢幕下問題解決
* 移動端的視覺稿通常會設計為傳統PC的2倍，通常把設計稿乘以2/1得到實際書寫時候打大小
* 圖片則設定為 實際寬高的50%,如 background-position:50% 50%;
5. IOS系統下被觸控的時候有半透明遮罩
```
a,button,input,textarea{-webkit-tap-heightlight-color:rgb(0,0,0,0);}
```
6. webkit表單元素的預設外觀怎麼重置
```
.css{-webkit-appearance:none;}
```
7. 打電話，發郵件
```
<a href="tel:020-62682400">打電話給020-62682400</a>
```
```
<a href="email:13249791010@163.com">13249791010@163.com</a>
```
8. 移動端模擬hover效果，新增ontouchstart,ontouchend事件
```
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
this.className = "btn-blue btn-blue-on"}
btnBlue.ontouchend = function(){
this.className = "btn-blue"}
9. ios下禁止調整字型大小body{-webkit-text-size-adjust:100%}
```
10. ios下輸入框取消大寫
```<input autocapitalize=”off” autocorrect=”off”>
11. css3動畫儘可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位,用translate3D開啟加速
11.說說移動端2欄佈局，左側定寬，右側自適應的幾種方法
* HTML程式碼
<div class="main">
<div class="left">左側固定</div>
<div class="right">右側自適應<div>
</div>
``` -
第一種方法，浮動+定位(等高佈局)
.main{ position:relative; padding-left:100px; display:inline-block; } .left{ position:relative; float:left; width:100px; margin-left:-100px; } .right{ float:left;
}
.right,.left{
height:200px;
min-height:200px;
height:auto !important;
}
``` -
第二種，浮動(等高佈局)
.main{ overflow:hidden; } .left{ float:left; width:100px; padding-bottom:9999px; margin-bottom:9999px; } .right{ margin-left:100px; padding-bottom:9999px; margin-bottom:9999px; } .right,.left{ height:200px; min-height:200px; height:auto !important; } -
第三種方法，定位+margin
.left{ position:absolute; top:0; left:0; width:100px; height:400px; } .right{ margin-left:100px; height:400px; } -
第四種方法，定位
.left{ position:absolute; top:0; left:0; width:100px; height:400px; } .right{ position:absolute; top:0; left:100px; height:400px; } -
第五種方法，flex
.main{ display:flex; } .left{ width:100px; height:400px; } .right{ flex:1; height:400px; } -
第六種方法 table
.main{ display:table; width:100%; } .left{ display:table-cell width:100px; height:400px; } .right{ display:table-cell }
12.websocket是什麼？和http有什麼關聯(只是基於自己的理解，暫無相關專案經驗)
- websocket屬於H5新增的，websocket是基於http的,和http沒有基本關係(或者說交集不大)，http只負責websokect的連線
- http不是永續性的協議，websocket是永續性的協議，在http中一個request對應一個response,也就說明了 http的缺點 http是被動的，伺服器端不能主動發起請求
- ajax的輪詢，每隔幾秒發起一個請求給服務端，這樣比較消耗記憶體,需要更快的響應速度
- polling 則是採用阻塞模型(打電話，如果沒資訊值一直不掛)，則是需要更多的電話，ajax的輪詢和 polling 的作用是實時推送
- websokect解決的問題是，讓服務端有主動性，只需要消耗一次的HTTP請求
前後端分離的理解
- 近期前後端分離特別熱門，一直搞不懂前後端分離是個什麼鬼，有個什麼作用。只知道以前前端把寫好的頁面發給後端，後端套用介面，這樣就比較容易出現問題，工作量也比較繁瑣。當我自己用vue做webapp，寫json資料結構的時候，才稍微有點意識，以前直接是把資料寫死或者從後臺呼叫在html上顯示，但是在用了vue之後，你是不是很少看見在html模板裡面有直接的資料顯示！！！基本都是前後端通過json在交流，前端用vue去實現元件化，工程化，但是有一個缺點是不利於seo優化，你html裡面都沒關鍵字怎麼優化。最後關鍵一點，後端值負責資料，前端值負責顯示。
-
分離的好處
- 以前崇尚全棧工程師，一個人不但管前端並且管後端，甚至資料庫。長期以往，程式碼的解耦性可能不是很好。
- 前後端分離以後，前後端值專注於只自己的開發工作，打造一個全棧式的團隊。特點之二是實現前後端的解耦，前後端只需要按照溝通好的引數和介面，只要這個不改變，也只要前端人員修改程式碼，減少工作量。
-
要不要前後端分離，分為三點。
-
輕前端頁面
- 佈局簡單，樣式較少，無css動畫，只有少量的業務邏輯，只需要在不同終端相容
-
重前端頁面
- 頁面佈局複雜，樣式多，css動畫多，有複雜的業務程式碼，需要在不同終端和瀏覽器上做相容。
-
前後端均衡
- 頁面佈局始終，樣式適中，少許動畫，業務邏輯較為簡單，且只需要在不同終端上相容
-