一些前端開發的筆試題及答案（期待更好的答案）

前些天有網友發來一些前端面試的題目，雖然說不是很難，但卻是我們開發過程中經常碰到的問題，而且有些公司也喜歡面試這類的題目來考察面試者的能力，所以我覺得有必要收集一下有關這些的題目。

題目一：找出字符串中出現次數最多的那一個字符？

要解答這道題其實很簡單，但怎么答得好才是關鍵，你寫出的方法性能好才能得高分

// 方法一(推薦)
// 用到了正則，然后剔除了已計算過的字符，減少了循環的次數，所以性能是比較好的
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{ width: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） 分享您我的經驗，相互交流，共享資源，不怕競爭，才會學習得更快。