您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

前端js簡(jiǎn)單的面試題

0,截取字符串a(chǎn)bcdefg中的efg

Js代碼  收藏代碼

  1. var str = 'abcdefg';  

  2. alert(str.substr(4,3));  

  

1,js有哪些數(shù)據(jù)類型,數(shù)據(jù)類型的判斷函數(shù)?

String,Number,Boolean,Null,Undefined,Object

判斷函數(shù)有:typeof,instanceof,constructor,prototype

接下來我們一一對(duì)這些進(jìn)行舉例子。

Js代碼  收藏代碼

  1. var a = 'nihao';  

  2. var b = 222;  

  3. var c = [1,2,3];  

  4. var d = new Date();  

  5. var e = function(){alert('hanshu');};  

  6. var f = function(){this.name = 'hanmeimei'};  

  7. alert(typeof a);//string  

  8. alert(typeof a == String);// false  

  9. alert(typeof b);// number  

  10. alert(typeof c);// object  

  11. alert(typeof d);// object  

  12. alert(typeof e);// function  

  13. alert(typeof f);// function  

  14. alert(c instanceof Array);//true  

  15. alert(e instanceof Function);//true  

  16. alert(c.constructor === Array);//true  

  17. function A(){};  

  18. function B(){};  

  19. A.prototype = new B(); //A繼承自B注意: constructor 在類繼承時(shí)會(huì)出錯(cuò)  

  20. var aObj = new A();  

  21. alert(aObj.constructor === B);// -----------> true;  

  22. alert(aObj.constructor === A);// -----------> false;  

  23. //而instanceof方法不會(huì)出現(xiàn)該問題,對(duì)象直接繼承和間接繼承的都會(huì)報(bào)true:  

  24. alert(aObj instanceof B); //----------------> true;  

  25. alert(aObj instanceof A); //----------------> true;  

  26. //解決construtor的問題通常是讓對(duì)象的constructor手動(dòng)指向自己:  

  27. aObj.constructor = A;//將自己的類賦值給對(duì)象的constructor屬性  

  28. alert(aObj.constructor === B);// -----------> flase;  

  29. alert(aObj.constructor === A);//true  

  30. //prototype  

  31. alert(Object.prototype.toString.call(a) === '[object String]');//true;  

  32. alert(Object.prototype.toString.call(b) === '[object Number]');//true;  

  33. alert(Object.prototype.toString.call(c) === '[object Array]');//true;  

  34. alert(Object.prototype.toString.call(d) === '[object Date]');//true;  

  35. alert(Object.prototype.toString.call(e) === '[object Function]');//true;  

  36. alert(Object.prototype.toString.call(f) === '[object Function]');//true;  

 

 

2,編寫一個(gè)js函數(shù),時(shí)時(shí)顯示當(dāng)前時(shí)間,格式:“年-月-日 時(shí):分:秒”

Js代碼  收藏代碼

  1. function nowtime(){  

  2. var nowDate = new Date();  

  3. var year = nowDate.getFullYear();  

  4. var month = nowDate.getMonth() + 1;  

  5. var day = nowDate.getDate();  

  6. var hours = nowDate.getHours();  

  7. var minutes = nowDate.getMinutes();  

  8. var second = nowDate.getSeconds();  

  9. return year + '-' + month + '-' + day +' '+hours+':'+minutes +':'+second;   

  10. }  

  11. alert(nowtime());  

Js代碼  收藏代碼

  1.    

 

 

3,顯示隱藏dom元素

使用jquery

Js代碼  收藏代碼

  1. $(function(){  

  2. $("#div").show();  

  3. $("#div").hide();  

  4. });  

 

4,如果添加HTML元素的事件處理,幾種方法

a,直接元素中添加:

Js代碼  收藏代碼

  1. <a href="###" onclick="fn();" >click</a>  

 

b,找到dom節(jié)點(diǎn)如:

Js代碼  收藏代碼

  1. var ob = document.getElementById("div");  

  2. ob.onclick = function(){};  

 

c,使用jquery添加靜態(tài)的dom節(jié)點(diǎn)的事件

Js代碼  收藏代碼

  1. $("#div").click(function(){});  

  2. //動(dòng)態(tài)生成的節(jié)點(diǎn)的話:  

  3. $("#div").on("click",function(){});  

  4. $("#div").live("click",function(){});  

 

5,如何控制alert中的換行

Js代碼  收藏代碼

  1. alert('nihao\nnihao');或者  

  2. alert('nihao'+'\n'+'nihao');  

 

6,判斷字符串中出現(xiàn)次數(shù)最多的字符,統(tǒng)計(jì)這個(gè)次數(shù)。

Js代碼  收藏代碼

  1. //判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符,統(tǒng)計(jì)這個(gè)次數(shù)  

  2. //方法一  

  3. var str="aabbb";  

  4. var obj={};  

  5. for(var i=0,k;i<str.length;i++){  

  6.     k=str.charAt(i);//charAt() 方法可返回指定位置的字符。  

  7.     if(obj[k]){  

  8.         obj[k]++;  

  9.     }else{  

  10.         obj[k]=1;  

  11.     }  

  12. }  

  13. var m=0;  

  14. var i=null;  

  15. for(var k in obj){  

  16.     if(obj[k]>m){  

  17.         m=obj[k];  

  18.         i=k;  

  19.     }  

  20. }  

  21. alert(i+':'+m);  

  22. //方法二  

  23. var str ="aaaaaaaaaaabbb";  

  24. for(var i=0,len=0,temp="";i<str.length; i++){  

  25.     var s=str.substr(i,1);//substr()方法可在字符串中抽取從 start 下標(biāo)開始的指定數(shù)目的字符。  

  26.     var tt=str.split(s);//split()方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組。  

  27.     if(tt.length>len){  

  28.         len=tt.length;  

  29.         temp=s+"出現(xiàn)最多次數(shù)為"+len;  

  30.     }  

  31. }  

  32. alert(temp);  

 

 

7,判斷字符串是否是這樣組成的,第一個(gè)必須是字母,后面可以是字母,數(shù)字,下劃線,總長(zhǎng)度為5-20

有兩種方案,一種是傳統(tǒng)的遍歷每個(gè)字符來判斷,這種會(huì)比較麻煩。另一種是用正則來判斷比較方便。

下面是正則的例子

Js代碼  收藏代碼

  1. //判斷字符串是否是這樣組成的,第一個(gè)必須是字母,后面可以是字母、數(shù)字、下劃線,總長(zhǎng)度為5-20  

  2. var str = 'abcdefg';  

  3. var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;  

  4. alert(reg.test(str));  

 

8,寫一個(gè)字符串轉(zhuǎn)成駝峰的方法:

如:border-bottom-color  》  borderBottomColor

這個(gè)也是有兩種方法,一種是傳統(tǒng)的和一種正則表達(dá)式

Js代碼  收藏代碼

  1. var str = "border-bottom-color";  

  2.   

  3. function test(str){  

  4.     var arr = str.split("-");//用split()函數(shù)來進(jìn)行分割字符串a(chǎn)rr里面包括【border,bottom,color】  

  5.     for(var i=1;i<arr.length;i++){//從數(shù)組的第二項(xiàng)開始循環(huán),charAt(0)找到第一個(gè)字母。substring(1)截掉第一個(gè)字母。  

  6.         arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1);//循環(huán)之后把得到的字符賦給arr。【border,Bottom, Color】  

  7.         alert(arr[i]);  

  8.     }  

  9.     return arr.join("");//用join方法來拼接,空拼接。就變成borderBottomColor  

  10.   

  11. }  

  12. alert(test(str));  

 

 

Js代碼  收藏代碼

  1. var str = "border-bottom-color";  

  2. function test(str){  

  3.     var re = /-(\w)/g;//通過正則找到-b  -c。默認(rèn)的是匹配一次,所以要用g來全局匹配。\w指的字符。找一個(gè)-找一個(gè)字符。replace替換就是B替換-b   C替換-c。 $0代表正則,$1代表指向  

  4.     return str.replace(re, function($0,$1){  

  5.         return $1.toUpperCase();  

  6.     });  

  7. }  

  8. alert(test(str));  

 

 

9,請(qǐng)編寫一個(gè)javascript函數(shù)parseQueryString,他的用途是把URL參數(shù)解析為一個(gè)對(duì)象,如:

var url=“http:witmax,cn/index.php?key0=0&key1=1&key2=2”;

 

Js代碼  收藏代碼

  1. function parseQueryString(url) {  

  2.     var json = {};  

  3.     var arr = url.substr(url.indexOf('?') + 1,url.length).split('&');  

  4.     arr.forEach(function(item) {  

  5.         var tmp = item.split('=');  

  6.         json[tmp[0]] = tmp[1];  

  7.     })  

  8.     return json;  

  9. }  

  10. //或者  

  11. function parseQueryString(url)  

  12. {  

  13.     var obj={};  

  14.     var keyvalue=[];  

  15.     var key="",value="";   

  16.     var paraString=url.substring(url.indexOf("?")+1,url.length).split("&");  

  17.     for(var i in paraString){  

  18.         keyvalue=paraString[i].split("=");  

  19.         key=keyvalue[0];  

  20.         value=keyvalue[1];  

  21.         obj[key]=value;   

  22.     }   

  23.     return obj;  

  24. }  

  25.   

  26. var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";  

  27. var json = parseQueryString(url);  

  28. console.log(json);  

 


[教程作者:Iteye]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/wd2672.html
CSS3 Animation:background-image
無線設(shè)計(jì)-響應(yīng)式字體適配之rem
圖趣網(wǎng)微信
建議反饋
×