一些前端开发的笔试题及答案(期待更好的答案)

前些天有网友发来一些前端面试的题目,虽然说不是很难,但却是我们开发过程中经常碰到的问题,而且有些公司也喜欢面试这类的题目来考察面试者的能力,所以我觉得有必要收集一下有关这些的题目。

题目一:找出字符串中出现次数最多的那一个字符?

要解答这道题其实很简单,但怎么答得好才是关键,你写出的方法性能好才能得高分

 1 // 方法一(推荐)
 2 // 用到了正则,然后剔除了已计算过的字符,减少了循环的次数,所以性能是比较好的
 3 function getMostChar1(str){
 4     var mostChar = [],
 5         maxLen = 0,
 6         oldStr, char, reChar, charLen;
 7     
 8     while(str !== ''){
 9         oldStr = str;
10         char = str.charAt(0);
11         reChar = char;
12         
13         // 如果是正则特殊字符,则转义
14         if(/[\$\(\)\*\+\.\?]/.test(reChar)) reChar = '\\' + reChar;
15         str = str.replace(new RegExp(reChar, 'g'), '');
16         
17         charLen = oldStr.length - str.length;
18         if(charLen > maxLen){
19             mostChar = [char];
20             maxLen = oldStr.length - str.length;
21         }else if(charLen === maxLen){
22             mostChar.push(char);
23         }
24     }
25     return {'mostChar': mostChar.join(), 'maxLen': maxLen};
26 }
27 
28 // 方法2 
29 // 1、转换成键值格式数据 eg.'程序员程序员' -> {'程': 2, '序': 2, '员': 2} 
30 // 2、再转换成数组格式 eg.{'程': 2, '序': 2, '员': 2}  ->[2]:['程', '序', '员']。
31 function getMostChar2(str) {
32     var strArr = str.split(''), 
33         obj = {}, 
34         arr = [],
35         len = strArr.length, i, key;
36         
37     for(i = 0; i < len; i++){
38         obj[strArr[i]] ? obj[strArr[i]]++ : obj[strArr[i]] = 1; //记录数目
39     }
40     
41     for(key in obj){
42         arr[obj[key]] ? arr[obj[key]].push(key) : arr[obj[key]] = [key]; //取出
43     }
44     
45     return {'mostChar': arr[arr.length - 1].join(), 'maxLen': arr.length - 1};
46     
47 }
48 
49 // 方法3
50 // 代码最少,充分利用数组的sort方法根据出现频繁排序。
51 function getMostChar3(str){
52     var most = str.split('').sort().join('').match(/(.)\1*/g); //排列重复字符
53     most = most.sort(function(a,b){
54                     return a.length - b.length
55                 })
56                 .pop();//按出现频繁排序
57     return {'mostChar': most.charAt(0), 'maxLen': most.length};
58 } 

题目二:请写一个将字符串转成驼峰的方法?例如:border-bottom-color  -> borderBottomColor

1 function camelCase(str){
2     return str && str.replace(/-([a-z]|[0-9])/ig, function(all, $1){
3         return ($1 + '').toUpperCase();
4     });
5 }

题目三:写一个方法,为元素添加class?

// 使用方式:addClass(oDiv,'b');
// 使用前:<div class="a"></div>
// 使用后:<div class="a b"></div>
// 如果该元素内已有一个class名为“b”,就不能重复添加

1 function addClass(elem, className){
2     if(!elem) return;
3     var reClass = new RegExp('\\b' + className + '\\b');
4     !reClass.test(elem.className) && (elem.className += ' ' + className);
5 }

题目四:写一个方法,把字符串反转,例如reverse(str)

// var str='我爱你';
// alert(reverse(str));
// 弹出结果:'你爱我';

巧妙地运用了数组的reverse方法,所以高效

1 if(!String.prototype.reverse){
2     String.prototype.reverse = function(){
3         return this.split('').reverse().join('');
4     };
5 }

题目五:为数组写一个获取索引方法:indexOf()

 1 if(!Array.prototype.indexOf){
 2     Array.prototype.indexOf = function(value){
 3         for(var i=0, len=this.length, item; i<len; i++){
 4             item = this[i];
 5             if(item === value){
 6                 return i;
 7             }
 8         }
 9         return -1;
10     }
11 }

题目六:为数组写一个检测是否包含值方法:contains()

 1 if(!Array.prototype.contains){
 2     Array.prototype.contains = function(value){
 3         for(var i=0, len=this.length, item; i<len; i++){
 4             item = this[i];
 5             if(item === value){
 6                 return true;
 7             }
 8         }
 9         return false;
10     }
11 }

题目七:为数组写一个去重方法:unique()

if(!Array.prototype.unique){
    Array.prototype.unique = function(value){
        var newArr = [], done = {};
        for(var i=0, len=this.length, item; i<len; i++){
            item = this[i];
            if(!done[item]){
                newArr.push(item);
                done[item] = true;
            }
        }
        return newArr;
    }
}

题目八:写一个方法region(),获取数字的区间

// 示例1:alert(region(3,6));
// 弹出结果:4,5
// 示例2:alert(region(9,5));
// 弹出结果:8,7,6

 1 function region(num1, num2){
 2     var min = Math.min(num1, num2),
 3         max = Math.max(num1, num2),
 4         ret = [];
 5     for(++min; min < max; ){
 6         ret.push(min++);
 7     }
 8     if(num1 > num2) return ret.reverse().join();
 9     
10     return ret.join();
11 }

题目九:请将数组的日期从前到后排序

// var myDate=['2012-4-19','2012-4-29','2012-4-2','2012-4-5'];
// 输出:['2012-4-2','2012-4-5','2012-4-19','2012-4-29']

1 function sortDate(arr){
2     return arr.sort(function(date1, date2){
3         // 统一转换成 yyyy/MM/dd 的格式,兼容IE,否则new Date返回NaN
4         date1 = date1.replace('-', '/');
5         date2 = date2.replace('-', '/');
6         return new Date(date1).getTime() - new Date(date2).getTime();
7     });
8 }

题目十:写一个getStyle()函数,获取div的边框粗细,并兼容所有浏览器

// #div1{ width:100px; height:100px; border:5px solid red;}
// getStyle(div1, 'border-top-width');

 1 function getStyle(elem, cssArr){
 2     if(elem && elem.nodeType){
 3         // border-top -> borderTop
 4         cssArr = typeof cssArr === 'string' ? camelCase(cssArr) : '';
 5         
 6         // 优先获取
 7         if(elem.style[cssArr]) return elem.style[cssArr];
 8         // for IE
 9         else if(elem.currentStyle) return elem.currentStyle[cssArr];
10         // for w3c
11         else if(document.defaultView && document.defaultView.getComputedStyle){
12             // borderTop -> border-top
13             cssArr = cssArr.replace(/([A-Z])/g, '-$1').toLowerCase();
14             
15             var style = document.defaultView.getComputedStyle(elem, '');
16             return style && style.getPropertyValue(cssArr);
17         }
18     }
19     return null;
20 }

题目十一:写一个为字符串加密解密的方法:textEncode(),textDecode()

// var str='无赖君子';
// alert(textEncode(str));
// 执行结果: "62740-106526-52033-55520"

 1 function textEncode(text){
 2     var encodeArr = [];
 3     for(var i=0, len=text.length; i<len; i++){
 4         encodeArr.push(text.charCodeAt(i).toString(8));
 5     }
 6     return encodeArr.join('-');
 7 }
 8 
 9 function textDecode(text){
10     var encodeArr = text.split('-'),
11         decodeArr = [];
12     for(var i=0, len=encodeArr.length; i<len; i++){
13         decodeArr.push(String.fromCharCode(parseInt(encodeArr[i], 8)));
14     }
15     return decodeArr.join('');
16 }

暂时就收集这些,长期更新。而且以上的答案也不一定是最好的,如果读者们有更好的答案,希望能留言。

欢迎加入web前端交流群(75701468) 分享您我的经验,相互交流,共享资源,不怕竞争,才会学习得更快。

 

 

 

 

 

 

 

posted @ 2013-04-29 16:56  无赖君子  阅读(3579)  评论(2编辑  收藏  举报