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

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

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

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

// 方法一(推荐)
// 用到了正则，然后剔除了已计算过的字符，减少了循环的次数，所以性能是比较好的
function getMostChar1(str){
    var mostChar = [],
        maxLen = 0,
        oldStr, char, reChar, charLen;
    
    while(str !== ''){
        oldStr = str;
        char = str.charAt(0);
        reChar = char;
        
        // 如果是正则特殊字符，则转义
        if(/[\$\(\)\*\+\.\?]/.test(reChar)) reChar = '\\' + reChar;
        str = str.replace(new RegExp(reChar, 'g'), '');
        
        charLen = oldStr.length - str.length;
        if(charLen > maxLen){
            mostChar = [char];
            maxLen = oldStr.length - str.length;
        }else if(charLen === maxLen){
            mostChar.push(char);
        }
    }
    return {'mostChar': mostChar.join(), 'maxLen': maxLen};
}

// 方法2 
// 1、转换成键值格式数据 eg.'程序员程序员' -> {'程': 2, '序': 2, '员': 2} 
// 2、再转换成数组格式 eg.{'程': 2, '序': 2, '员': 2}  ->[2]:['程', '序', '员']。
function getMostChar2(str) {
    var strArr = str.split(''), 
        obj = {}, 
        arr = [],
        len = strArr.length, i, key;
        
    for(i = 0; i < len; i++){
        obj[strArr[i]] ? obj[strArr[i]]++ : obj[strArr[i]] = 1; //记录数目
    }
    
    for(key in obj){
        arr[obj[key]] ? arr[obj[key]].push(key) : arr[obj[key]] = [key]; //取出
    }
    
    return {'mostChar': arr[arr.length - 1].join(), 'maxLen': arr.length - 1};
    
}

// 方法3
// 代码最少，充分利用数组的sort方法根据出现频繁排序。
function getMostChar3(str){
    var most = str.split('').sort().join('').match(/(.)\1*/g); //排列重复字符
    most = most.sort(function(a,b){
                    return a.length - b.length
                })
                .pop();//按出现频繁排序
    return {'mostChar': most.charAt(0), 'maxLen': most.length};
} 

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

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

题目三：写一个方法，为元素添加class？

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

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

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

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

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

if(!String.prototype.reverse){
    String.prototype.reverse = function(){
        return this.split('').reverse().join('');
    };
}

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

if(!Array.prototype.indexOf){
    Array.prototype.indexOf = function(value){
        for(var i=0, len=this.length, item; i<len; i++){
            item = this[i];
            if(item === value){
                return i;
            }
        }
        return -1;
    }
}

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

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

题目七：为数组写一个去重方法：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

function region(num1, num2){
    var min = Math.min(num1, num2),
        max = Math.max(num1, num2),
        ret = [];
    for(++min; min < max; ){
        ret.push(min++);
    }
    if(num1 > num2) return ret.reverse().join();
    
    return ret.join();
}

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

// 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']

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

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

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

function getStyle(elem, cssArr){
    if(elem && elem.nodeType){
        // border-top -> borderTop
        cssArr = typeof cssArr === 'string' ? camelCase(cssArr) : '';
        
        // 优先获取
        if(elem.style[cssArr]) return elem.style[cssArr];
        // for IE
        else if(elem.currentStyle) return elem.currentStyle[cssArr];
        // for w3c
        else if(document.defaultView && document.defaultView.getComputedStyle){
            // borderTop -> border-top
            cssArr = cssArr.replace(/([A-Z])/g, '-$1').toLowerCase();
            
            var style = document.defaultView.getComputedStyle(elem, '');
            return style && style.getPropertyValue(cssArr);
        }
    }
    return null;
}

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

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

function textEncode(text){
    var encodeArr = [];
    for(var i=0, len=text.length; i<len; i++){
        encodeArr.push(text.charCodeAt(i).toString(8));
    }
    return encodeArr.join('-');
}

function textDecode(text){
    var encodeArr = text.split('-'),
        decodeArr = [];
    for(var i=0, len=encodeArr.length; i<len; i++){
        decodeArr.push(String.fromCharCode(parseInt(encodeArr[i], 8)));
    }
    return decodeArr.join('');
}

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

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