個人收集javascript面試題，你值得擁有。
一、字串反轉，如將 '12345678' 變成 '87654321'
//大牛做法；
//思路：先將字串轉換為陣列split()，利用陣列的反序函式reverse()顛倒陣列，再利用jion()轉換為字串
varstr='12345678';
str=str.split('').reverse().join('');二、將數字 12345678 轉化成 RMB形式 如： 12,345,678
//個人方法； //思路：先將數字轉為字元，str=str+''; //利用反轉函式，每三位字元加一個','最後一位不加；re()是自定義的反轉函式，最後再反轉回去！ for(vari=1;i<=re(str).length;i++){ tmp+=re(str)[i-1]; if(i%3==0&&i!=re(str).length){ tmp+=','; } }
三、生成5個不同的隨機數；
//思路：5個不同的數，每生成一次就和前面的所有數字相比較，如果有相同的，則放棄當前生成的數字！
varnum1=[];
for(vari=0;i<5;i++){
num1[i]=Math.floor(Math.random()*10)+1;//範圍是[1,10]
for(varj=0;j<i;j++){
if(num1[i]==num1[j]){
i--;
}
}
}四、去掉陣列中重複的數字 方法一；
//思路：每遍歷一次就和之前的所有做比較，不相等則放入新的陣列中！ //這裡用的原型個人做法； Array.prototype.unique=function(){ varlen=this.length, newArr=[], flag=1; for(vari=0;i<len;i++,flag=1){ for(varj=0;j<i;j++){ if(this[i]==this[j]){ flag=0;//找到相同的數字後，不執行新增資料 } } flag?newArr.push(this[i]):''; } returnnewArr; }
方法二：
(function(arr){
varlen=arr.length,
newArr=[],
flag;
for(vari=0;i<len;i+=1,flag=1){
for(varj=0;j<i;j++){
if(arr[i]==arr[j]){
flag=0;
}
}
flag?newArr.push(arr[i]):'';
}
alert(newArr);
})([1,1,22,3,4,55,66]);五、階乘函式；
//原型方法 Number.prototype.N=function(){ varre=1; for(vari=1;i<=this;i++){ re*=i; } returnre; } varnum=5; alert(num.N());
六、window.location.search() 返回的是什麼？
答：查詢(引數)部分。除了給動態語言賦值以外，我們同樣可以給靜態頁面,並使用javascript來獲得相信應的引數值
返回值：?ver=1.0&id=timlq 也就是問號後面的！
七、window.location.hash返回的是什麼？
答：錨點 ，返回值：#love ；
八、window.location.reload() 作用？
答：重新整理當前頁面。
九、阻止冒泡函式
functionstopPropagation(e){
e=e||window.event;
if(e.stopPropagation){//W3C阻止冒泡方法
e.stopPropagation();
}else{
e.cancelBubble=true;//IE阻止冒泡方法
}
}
document.getElementById('need_hide').onclick=function(e){
stopPropagation(e);
}十、什麼是閉包？ 寫一個簡單的閉包？；
答：我的理解是，閉包就是能夠讀取其他函式內部變數的函式。在本質上，閉包就是將函式內部和函式外部連線起來的一座橋樑。
functionouter(){
varnum=1;
functioninner(){
varn=2;
alert(n+num);
}
returninner;
}
outer()();十一、javascript 中的垃圾回收機制？
答：在Javascript中，如果一個物件不再被引用，那麼這個物件就會被GC回收。如果兩個物件互相引用，而不再 被第3者所引用，那麼這兩個互相引用的物件也會被回收。因為函式a被b引用，b又被a外的c引用，這就是為什麼 函式a執行後不會被回收的原因。
十二、Ajax中XMLHTTPRequest的幾個狀態
答：存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。readyState
0 (未初始化) 物件已建立，但是尚未初始化（尚未呼叫open方法）
1 (初始化) 物件已建立，尚未呼叫send方法
2 (傳送資料) send方法已呼叫，但是當前的狀態及http頭未知
3 (資料傳送中) 已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText獲取部分資料會出現錯誤，
4 (完成) 資料接收完畢,此時可以通過通過responseXml和responseText獲取完整的迴應資料
十三、看題做答：
functionf1(){
vartmp=1;
this.x=3;
console.log(tmp);//A
console.log(this.x)；//B
}
varobj=newf1();//1
console.log(obj.x)//2
console.log(f1());//3分析：
這道題讓我重新認識了物件和函式，首先看程式碼（1），這裡例項話化了 f1這個類。相當於執行了 f1函式。所以這個時候 A 會輸出 1， 而 B 這個時候的 this 代表的是 例項化的當前物件 obj B 輸出 3.。 程式碼（2）毋庸置疑會輸出 3， 重點 程式碼（3）首先這裡將不再是一個類，它只是一個函式。那麼 A輸出 1， B呢？這裡的this 代表的其實就是window物件，那麼this.x 就是一個全域性變數 相當於在外部 的一個全域性變數。所以 B 輸出 3。最後程式碼由於f沒有返回值那麼一個函式如果沒返回值的話，將會返回 underfined ，所以答案就是 ： 1， 3， 3， 1， 3， underfined 。
十四、get與post的區別
GET請求的資料會附在URL之後，POST把提交的資料則放置在是HTTP包的包體中。
GET方式提交的資料最多隻能是1024位元組，理論上POST沒有限制，可傳較大量的資料
POST的安全性要比GET的安全性高
十五、下面輸出多少？
varo1=newObject();
varo2=o1;
o2.name="CSSer";
console.log(o1.name);如果不看答案，你回答真確了的話，那麼說明你對javascript的資料型別瞭解的還是比較清楚了。js中有兩種資料型別，分別是：基本資料型別和引用資料型別（object Array）。對於儲存基本型別值的變數，變數是按值訪問的，因為我們操作的是變數實際儲存的值。對於儲存引用型別值的變數，變數是按引用訪問的，我們操作的是變數值所引用（指向）的物件。答案就清楚了： //CSSer;
十六、再來一個
functionchangeObjectProperty(o){
o.siteUrl="http://www.csser.com/";
o=newObject();
o.siteUrl="http://www.popcg.com/";
console.log(o.siteUrl);//餓了麼面試題
}
varCSSer=newObject();
changeObjectProperty(CSSer);
console.log(CSSer.siteUrl);//如果CSSer引數是按引用傳遞的，那麼結果應該是"http://www.popcg.com/"，但實際結果卻仍是"http://www.csser.com/"。事實是這樣的：在函式內部修改了引用型別值的引數，該引數值的原始引用保持不變。我們可以把引數想象成區域性變數，當引數被重寫時，這個變數引用的就是一個區域性變數，區域性變數的生存期僅限於函式執行的過程中，函式執行完畢，區域性變數即被銷燬以釋放記憶體。
（補充：內部環境可以通過作用域鏈訪問所有的外部環境中的變數物件，但外部環境無法訪問內部環境。每個環境都可以向上搜尋作用域鏈，以查詢變數和函式名，反之向下則不能。餓了麼面試官問了個問題： 如何引用一個物件，但是不改變原有物件的值： 解決方法就是在一個函式中去引用，就如這一道題！）
十七:
vara=6;
setTimeout(function(){
vara=666;
alert(a);//輸出666，
},1000);
a=66;因為var a = 666;定義了局部變數a，並且賦值為666，根據變數作用域鏈，
全域性變數處在作用域末端，優先訪問了區域性變數，從而覆蓋了全域性變數 。
vara=6;
setTimeout(function(){
alert(a);//輸出undefined
vara=666;
},1000);
a=66;
因為var a = 666;定義了局部變數a，同樣覆蓋了全域性變數，但是在alert(a);之前
a並未賦值，所以輸出undefined。
vara=6;
setTimeout(function(){
alert(a);
vara=66;
},1000);
a=666;
alert(a);
//666,undefined;記住： 非同步處理，一切OK 宣告提前
十八：
functionsetN(obj){
obj.name='屌絲';
obj=newObject();
obj.name='腐女';
};
varper=newObject();
setN(per);
alert(per.name);//屌絲內部十九：JS的繼承性
window.color='red';
varo={color:'blue'};
functionsayColor(){
alert(this.color);
}
sayColor();//red
sayColor.call(this);//redthis-window物件
sayColor.call(window);//red
sayColor.call(o);//blue二十：精度問題: JS 精度不能精確到 0.1 所以 。。。。同時存在於值和差值中
varn=0.3,m=0.2,i=0.2,j=0.1;
alert((n-m)==(i-j));//false
alert((n-m)==0.1);//false
alert((i-j)==0.1);//true二十一：加減運算
alert('5'+3);//53string
alert('5'+'3');//53string
alert('5'-3);//2number
alert('5'-'3');//2number二十二：map函式
['1','2','3'].map(parseInt);
//[1,NaN,NaN]二十三：什麼是同源策略？
指： 同協議、埠、域名的安全策略，由王景公司提出來的安全協議！
二十四：call和applay的區別是什麼？
引數形式不同，call(obj, pra, pra)後面是單個引數。applay(obj, [args])後面是陣列。
二十五： undefined和undeclared的區別？
undefined: 是變數聲明瞭，但是沒有賦值，在執行時不會報錯，輸出 undefined.
undeclared: 變數及沒宣告又沒賦值，執行時報錯。(is not defined).
二十六：為什麼不能定義1px左右的div容器？
IE6下這個問題是因為預設的行高造成的，解決的方法也有很多，例如：overflow:hidden|zoom:0.08|line-height:1px二十七：結果是什麼？
functionfoo(){
foo.a=function(){alert(1)};
this.a=function(){alert(2)};
a=function(){alert(3)};
vara=function(){alert(4)};
};
foo.prototype.a=function(){alert(5)};
foo.a=function(){alert(6)};
foo.a();//6
varobj=newfoo();
obj.a();//2
foo.a();//1二十八：輸出結果
vara=5;
functiontest(){
a=0;
alert(a);
alert(this.a);//沒有定義a這個屬性
vara;
alert(a)
}
test();//0,5,0
newtest();//0,undefined,0//由於類它自身沒有屬性a，所以是undefined二十九： 計算字串位元組數：
newfunction(s){
if(!arguments.length||!s)returnnull;
if(""==s)return0;
varl=0;
for(vari=0;i<s.length;i++){
if(s.charCodeAt(i)>255)l+=2;elsel+=1;//charCodeAt()得到的是unCode碼
}//漢字的unCode碼大於255bit就是兩個位元組
alert(l);
}("helloworld!");三十、結果是：
varbool=!!2;alert(bool)；//true;雙向非操作可以把字串和數字轉換為布林值。
三十一、宣告物件，新增屬性，輸出屬性
varobj={
name:'leipeng',
showName:function(){
alert(this.name);
}
}
obj.showName();三十二、匹配輸入的字元：第一個必須是字母或下劃線開頭，長度5-20
varreg=/^[a-zA-Z][a-zA-Z0-9_]{5,20}/,
name1='leipeng',
name2='0leipeng',
name3='你好leipeng',
name4='hi';
alert(reg.test(name1));
alert(reg.test(name2));
alert(reg.test(name3));
alert(reg.test(name4));三十三、檢測變數型別
functioncheckStr(str){
typeofstr=='string'?alert('true'):alert('false');
}
checkStr('leipeng');
三十四、如何在HTML中新增事件，幾種方法？
1、標籤之中直接新增 οnclick="fun()";
2、JS新增 Eobj.onclick = method;
3、現代事件 IE： obj.attachEvent('onclick', method)；
FF: obj.addEventListener('click', method, false);
三十五、BOM物件有哪些，列舉window物件？
1、window物件 ，是JS的最頂層物件，其他的BOM物件都是window物件的屬性；
2、document物件，文件物件；
3、location物件，瀏覽器當前URL資訊；
4、navigator物件，瀏覽器本身資訊；
5、screen物件，客戶端螢幕資訊；
6、history物件，瀏覽器訪問歷史資訊；
三十六、請問程式碼實現 outerHTML
//說明：outerHTML其實就是innerHTML再加上本身；
Object.prototype.outerHTML=function(){
varinnerCon=this.innerHTML,//獲得裡面的內容
outerCon=this.appendChild(innerCon);//新增到裡面
alert(outerCon);
}演示程式碼：
<!doctypehtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<divid="outer">
hello
</div>
<script>
Object.prototype.outerHTML=function(){
varinnerCon=this.innerHTML,//獲得裡面的內容
outerCon=this.appendChild(innerCon);//新增到裡面
alert(outerCon);
}
function$(id){
returndocument.getElementById(id);
}
alert($('outer').innerHTML);
alert($('outer').outerHTML);
</script>
</body>
</html>
三十七、JS中的簡單繼承 call方法！
//頂一個父母類，注意：類名都是首字母大寫的哦！
functionParent(name,money){
this.name=name;
this.money=money;
this.info=function(){
alert('姓名：'+this.name+'錢：'+this.money);
}
}
//定義孩子類
functionChildren(name){
Parent.call(this,name);//繼承姓名屬性，不要錢。
this.info=function(){
alert('姓名：'+this.name);
}
}
//例項化類
varper=newParent('parent',800000000000);
varchi=newChildren('child');
per.info();
chi.info();
三十八、寫出HTML5的文件宣告方式
<DOCYPEhtml>三十九、HTML5和CSS3的新標籤
HTML5：nav,footer,header,section,hgroup,video,time,canvas,audio...;
CSS3:RGBA,opacity,text-shadow,box-shadow,border-radius,border-image,border-color,transform...;四十、自己對標籤語義化的理解
在我看來，語義化就是比如說一個段落， 那麼我們就應該用 <p>標籤來修飾，標題就應該用 <h?>標籤等。符合文件語義的標籤。
四十一、bind(), live(), delegate()的區別
bind： 繫結事件，對新新增的事件不起作用，方法用於將一個處理程式附加到每個匹配元素的事件上並返回jQuery物件。
live： 方法將一個事件處理程式附加到與當前選擇器匹配的所有元素（包含現有的或將來新增的）的指定事件上並返回jQuery物件。
delegate： 方法基於一組特定的根元素將處理程式附加到匹配選擇器的所有元素（現有的或將來的）的一個或多個事件上。
四十二、typeof 的返回型別有哪些？
alert(typeof[1,2]);//object
alert(typeof'leipeng');//string
vari=true;
alert(typeofi);//boolean
alert(typeof1);//number
vara;
alert(typeofa);//undefined
functiona(){;};
alert(typeofa)//function四十三、簡述link和import的區別？
區別1：link是XHTML標籤，除了載入CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS。
區別2：link引用CSS時，在頁面載入時同時載入；@import需要頁面網頁完全載入以後載入。
區別3：link是XHTML標籤，無相容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支援。
區別4：link支援使用Javascript控制DOM去改變樣式；而@import不支援。
四十四、window.onload 和 document.ready的區別？
load要等到圖片和包含的檔案都加在進來之後執行；
ready是不包含圖片和非文字檔案的文件結構準備好就執行；
四十五： 解析URL成一個物件？
String.prototype.urlQueryString=function(){
varurl=this.split('?')[1].split('&'),
len=url.length;
this.url={};
for(vari=0;i<len;i+=1){
varcell=url[i].split('='),
key=cell[0],
val=cell[1];
this.url[''+key+'']=val;
}
returnthis.url;
}
varurl='?name=12&age=23';
console.log(url.urlQueryString().age);轉載於:https://my.oschina.net/leipeng/blog/263983