辭職之后最近在找前端開發(fā)的工作奋刽，1天面試3次特別累，做了很多面試題艰赞，我想通過總結(jié)一些給各位想找這方面工作的朋友佣谐，少走些彎路吧，很多面試題都是比較考基礎(chǔ)的東西方妖，包括一些新特性狭魂，還有一些聲明提前的東西。問你做得項(xiàng)目如何完成党觅，怎么去做得雌澄。差不多是這些了。進(jìn)入正題杯瞻！
1.JavaScript是一門什么樣的語言镐牺，它有哪些特點(diǎn)？
（1）一門弱類型的語言魁莉，不用預(yù)編譯睬涧，是邊解析邊執(zhí)行的。（2）是運(yùn)行在web客戶端瀏覽器上的旗唁。
（3）由Dom畦浓，Bom，ecma組成的逆皮；（4）不需要提前聲明變量的數(shù)據(jù)類型。
2.JavaScript的數(shù)據(jù)類型都有什么参袱？
基本數(shù)據(jù)類型：String,boolean,Number,Undefined,?Null
引用數(shù)據(jù)類型：Object(Array,Date,RegExp,Function)
3.表單中Readonly和Disabled的區(qū)別电谣？
Readonly和Disabled是用在表單中的兩個(gè)屬性秽梅，它們都能夠做到使用戶不能夠更改表單域中的內(nèi)容。但是它們之間有著微小的差別剿牺，總結(jié)如下：
Readonly只針對(duì)input(text / password)和textarea有效企垦，而disabled對(duì)于所有的表單元素都有效，包括select, radio, checkbox, button等晒来。
但是表單元素在使用了disabled后钞诡，當(dāng)我們將表單以POST或GET的方式提交的話，這個(gè)元素的值不會(huì)被傳遞出去湃崩，而readonly會(huì)將該值傳遞出去（這種情況出現(xiàn)在我們將某個(gè)表單中的textarea元素設(shè)置為disabled或readonly荧降，但是submit button卻是可以使用的）。
4.閉包是什么攒读，有什么特性朵诫，對(duì)頁面有什么影響?
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
5.什么是同源策略薄扁？
協(xié)議剪返、域名、端口都一致的邓梅，http://127.0.0.1:8080/test1和http://localhost:8080/test1也不屬于同源
6.jsonp的特點(diǎn)脱盲？
優(yōu)點(diǎn)：1它的兼容性更好，2不受同源策略的限制日缨。
缺點(diǎn)：1它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求2會(huì)出現(xiàn)中文亂碼钱反。
3jsonp在調(diào)用失敗的時(shí)候不會(huì)返回各種HTTP狀態(tài)碼。
7.跨域的幾種方式殿遂？8.json和jsonp的區(qū)別诈铛？JSON（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交換格式，用于在瀏覽器和服務(wù)器之間交換信息墨礁。
JSON是一種數(shù)據(jù)格式幢竹，JSONP是一種數(shù)據(jù)調(diào)用方式。
9.什么是Ajax恩静，它們的優(yōu)缺點(diǎn)焕毫？優(yōu)點(diǎn)：(1)可以使得頁面不重載全部內(nèi)容的情況下加載局部內(nèi)容，降低數(shù)據(jù)傳輸量(2)避免用戶不斷刷新或者跳轉(zhuǎn)頁面驶乾，提高用戶體驗(yàn)
缺點(diǎn)：1.代碼調(diào)試的難度增加 ?2.要實(shí)現(xiàn)ajax下的前后退功能成本較大 3.可能造成請(qǐng)求數(shù)的增加邑飒。4.跨域問題限制。
10.encodeURI和 encodeURIComponent 的作用基本功能都是把URI 非法字符轉(zhuǎn)化成合法字符级乐。
區(qū)別：傳遞參數(shù)時(shí)需要使用encodeURIComponent疙咸，這樣組合的url才不會(huì)被#等特殊字符截?cái)唷＃〞?huì)對(duì)url里面的符號(hào)進(jìn)行編碼和空格风科，范圍更大）
進(jìn)行url跳轉(zhuǎn)時(shí)可以整體使用encodeURI（會(huì)對(duì)中文和空格進(jìn)行編碼）
例如：Location.href="/encodeURI"("http://cang.baidu.com/do/s?word=百度&ct=21");
11.Ajax的實(shí)現(xiàn)步驟(面試題)撒轮？
*創(chuàng)建核心對(duì)象
*建立連接- open()
*發(fā)送請(qǐng)求數(shù)據(jù)- send()
*注冊(cè)監(jiān)聽- onreadystatechange
*獲取通信狀態(tài)- readyState
*接收響應(yīng)數(shù)據(jù)- status
var xhr=getxhr();
xhr.open(mothod, url);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status=200){
var data=xhr.responseText;
}
}
function getxhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=newActiveXObject(‘Microsoft.XMLHttp’);
}
}
13.cookies和sessionStorage,localstorage的特點(diǎn)乞旦？
Cookies：存儲(chǔ)在用戶本地終端上的數(shù)據(jù)。每次請(qǐng)求http都會(huì)攜帶cookies题山；有性能的問題兰粉。
localStorage：沒有存儲(chǔ)時(shí)間的限制。
sessionStorage：當(dāng)用戶關(guān)閉瀏覽器窗口后顶瞳，數(shù)據(jù)會(huì)被刪除
14玖姑。數(shù)組轉(zhuǎn)為json字符串？現(xiàn)代瀏覽器中提供了JSON.stringify()方法 將數(shù)組慨菱，對(duì)象轉(zhuǎn)成json焰络。
JSON.stringify 把一個(gè)對(duì)象轉(zhuǎn)換成json字符串，
JSON.parse 把一個(gè)json字符串解析成對(duì)象抡柿。
15.html5增添了哪些新標(biāo)簽和api舔琅？
16.數(shù)組去重復(fù)？
方法1：var aa=[1,3,5,4,3,3,1,4];
var newaa=[];
for(var i=0;i
if(newaa.indexOf(aa[i])==-1){
newaa.push(aa[i]);
}
}
方法2：每次從原數(shù)組中取出一個(gè)元素洲劣，然后到對(duì)象中去訪問這個(gè)屬性备蚓，如果能訪問到值，則說明重復(fù)囱稽。
var aa=[1,3,5,4,3,3,1,4];
Array.prototype.chongfu=function(){
var obj={},newaa=[];
for(var i=0;i
if(!obj[this[i]]){
newaa.push(this[i]);
obj[this[i]]=1;
}
}
return newaa;
}
aa.chongfu();
17.在數(shù)組中出現(xiàn)的次數(shù)最多的郊尝？
var str="Hello World"
function calc(str){
var hash=str.split("");
hash.sort();
str=hash.join("");
console.log(str);
hash=str. (/(.)\1*/gi);//返回一個(gè)數(shù)組
//return hash;
for(var i=0;i
console.log(
hash[i].charAt(0)+":"+hash[i].length);
}
}
console.log(calc(str));18.js 手寫冒泡排序？var aa=[1222,33,5222,4,31,321,13,14];
function bubbleSort(){
var text=null;
for(var j=0;j
for(var i=0;i
if(aa[i]>aa[i+1]){
aa[i]+=aa[i+1];
aa[i+1]=aa[i]-aa[i+1];
aa[i]-=aa[i+1];
}
}
}
return aa;
}
bubbleSort(aa);
19.用過哪些框架战惊，什么場景的選擇流昏，優(yōu)缺點(diǎn)？ ?解決了兼容性問題吞获！
Angular：優(yōu)點(diǎn)---實(shí)現(xiàn)了數(shù)據(jù)况凉，邏輯，表現(xiàn)的分離各拷。缺點(diǎn)---提高了代碼的復(fù)雜程度刁绒。
Bootstrap：優(yōu)點(diǎn)---樣式好，缺點(diǎn)--烤黍，數(shù)據(jù)不能定制知市，代碼比較麻煩
20.常用的優(yōu)化手段？
代碼優(yōu)化（css速蕊、html嫂丙、js優(yōu)化）
減少HTTP請(qǐng)求（雪碧圖，文件合并…）
無阻塞（內(nèi)聯(lián)CSS规哲，JS置后…）
緩存
預(yù)加載跟啤，懶加載。
綁定的事件處理函數(shù)的個(gè)數(shù)越少，頁面運(yùn)行效率就越高隅肥！
21.瀏覽器的兼容性关顷？（前綴，后綴武福，條件注釋）1.通過他的父對(duì)象的prototype對(duì)象進(jìn)行添加屬性和方法！
2.通過navigator.userAgent對(duì)不同版本引入不同的JS代碼痘番！
22.什么是閉包捉片？怎么實(shí)現(xiàn)？
1.外層函數(shù)封裝受保護(hù)的變量以及專門操作變量的內(nèi)層函數(shù)
2.外層函數(shù)將操作變量的內(nèi)層函數(shù)返回到外部
3.調(diào)用外層函數(shù)汞舱，獲得內(nèi)層函數(shù)的對(duì)象伍纫。
23.外框固定高度，內(nèi)框（高度不定）垂直 水平居中昂芜？ ??(重點(diǎn))方法一：position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
方法二：模擬表格：
子元素--display：inline-block莹规；
父元素--display：table-cell；vertical-align：middle泌神；text-align：center良漱；
方法三：flex：
.div1{//父容器
display: flex;
height:150px;
justify-content:center; （水平居中）
align-items:center; ?（垂直居中）
}
23.如何做移動(dòng)端的適配？
如果加載頁面的時(shí)候欢际，使用JS根據(jù)屏幕的大小動(dòng)態(tài)設(shè)置html標(biāo)簽的font-size母市，隨著html標(biāo)簽font-size的值變化，div的1.2rem換算成px的值 也跟著變化损趋，即實(shí)現(xiàn)了div隨屏幕大小變化而變化患久，而CSS代碼始終是width:1.2rem。以此類推到頁面所有的元素浑槽。
