一些前端开发的笔试题及答案（期待更好的答案）
- - 博客园_首页前些天有网友发来一些前端面试的题目，虽然说不是很难，但却是我们开发过程中经常碰到的问题，而且有些公司也喜欢面试这类的题目来考察面试者的能力，所以我觉得有必要收集一下有关这些的题目. 题目一：找出字符串中出现次数最多的那一个字符. 要解答这道题其实很简单，但怎么答得好才是关键，你写出的方法性能好才能得高分.
一些前端开发的笔试题及答案（期待更好的答案）
标签：
前端
开发
答案
| 发表时间：2013-04-29 16:56 | 作者：无赖君子
出处：http://www.cnblogs.com/
前些天有网友发来一些前端面试的题目，虽然说不是很难，但却是我们开发过程中经常碰到的问题，而且有些公司也喜欢面试这类的题目来考察面试者的能力，所以我觉得有必要收集一下有关这些的题目。
题目一：找出字符串中出现次数最多的那一个字符？
要解答这道题其实很简单，但怎么答得好才是关键，你写出的方法性能好才能得高分
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） 分享您我的经验，相互交流，共享资源，不怕竞争，才会学习得更快。
相关 [前端 开发 答案] 推荐：
前端开发大众手册
- Ran - FeedzShare来自: xilo's blog - FeedzShare . 发布时间:2009年03月09日, 已有 3 人推荐. 一直觉得前端开发缺个手册，这是个体力活. 今天闲来无事，把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下. 这个标题起地大了点，肯定会有很多地方没列到，包括类目的分法也可能考虑不周，所以还请大家积极补充指正，可以直接留言，也可以发邮件给我.
前端开发 – 我们的职业
- aoao - 崔凯,前端开发写给“正在纠结”、“准备纠结”的前端开发们，希望对大家求职有所帮助：. 很多人提出薪资要求的时候，会说：“现在房租是多少多少、吃饭要多少多少、泡妞会多少多少”，所以，至少拿多少多少的工资，才满足自己的需求. 如果说这些话的人，已经是公司的老员工，和老板私人关系很不错，那这么讲还凑合. 但如果是职场新人，首次过来应聘，谈这些就很不在点上.
CssGaga：前端开发和部署利器
- Anew - 前端观察涛哥@ytzong 开发的cssgaga用了好久，确实是个好工具，早想把它推荐给大家用了. 今天就做个简介，涛哥网站有详细的介绍，这里不多说. （工作量）一般都能减少20%以上吧，没怎么统计. 一个极端的例子：某人使用了CssGaga后从原来早9点到晚11点下班，午休都在做到现在晚5点半下班，中午还能看一部完整电影 (via twitter).
前端开发流程自动化
- Lee - 《程序员》杂志官网如今前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程上浪费的时间精力也越来越多. 精简流程、提高效率，是每一个前端团队都会遇到的问题. 大部分前端团队使用Ant脚本进行这一系列流程的自动操作. Ant主要用于代码构建、打包、部署的自动化操作. 早先主要用于Java开发，但由于它具有接口开放、便于配置、Java跨平台等特性，在前端流程自动化方面同样可以发挥强大的功用.
前端开发中的MCRV模式
- 亚威 - 百度泛用户体验MCRV设计模式 Javascript MVC Web开发标准. 1.Web前端开发面临的问题. 早期的Web页开发(Web前端开发)中，Web页面较为简单，大多数Web页面的功能仅限于用HTML和简单样式展示静态信息，或向服务器发送数据，Web页面与用户的交互较少. 随着Web的发展，DHTML、CSS、javascript等技术出现，Web页不再仅限于展示静态信息，动态、交互成为Web页的主流功能之一.
关于前端开发这份工作
- paaboo - 小麦的自习教室一直想写点关于前端开发职位本身的文字，但写了好几次都没发. 最近又在持续的招聘，对应聘和招聘有些感想，零散的写多少算多少吧. 关于“前端开发工程师”这个职位. 当一个词开始泛滥，就会被人忘记它的本意. 首先，它是“开发工程师”，也就是程序员. 所以，程序员应该具备的素质，比如逻辑能力，写代码的水平等等，算是它最最基础的要求.
前端开发大众手册
- Ease - 膘叔很明显，这段内容是ctrl+c,ctrl+v而来的，做备份和资料查询用，挺好的. 原文来自：http://www.chencheng.org/blog/2008/10/25/f2e-manual/#f2e-manual-s1. 另外还搞了个Firefox插件《前端开发工具集》，把资源整合到一个菜单下，方便查询.