摘要：剛剛接觸一周的時(shí)間，熟悉了最基本的知識(shí)，這是自己面對(duì)的第一個(gè)的邏輯性的代碼題目，自己嘗試了寫(xiě)了，結(jié)果還算可以，因?yàn)橛泻枚嘀R(shí)涉及到了后面的知識(shí)，就有點(diǎn)吃力了。以下代碼總結(jié)于網(wǎng)上前輩給出的參考答案和結(jié)合了自己的理解和注釋?zhuān)?qǐng)多多指正。

剛剛接觸JS一周的時(shí)間，熟悉了最基本的js知識(shí)，這是自己面對(duì)的第一個(gè)js的邏輯性的代碼題目，自己嘗試了寫(xiě)了，結(jié)果還算可以，因?yàn)橛泻枚嘀R(shí)涉及到了后面的dom知識(shí)，就有點(diǎn)吃力了。以下代碼總結(jié)于網(wǎng)上前輩給出的參考答案和結(jié)合了自己的理解和注釋?zhuān)?qǐng)多多指正。

html代碼：

    

        

            
找到數(shù)組中出現(xiàn)最多的字母并給出個(gè)數(shù)以及每一個(gè)所在的位置
            輸入字符：
            
            計(jì)算
            
            

                

                    出現(xiàn)次數(shù)最多的字符：
                
                

                    出現(xiàn)次數(shù)最多的字符出現(xiàn)的次數(shù)：
                
                

                    出現(xiàn)次數(shù)最多的字符的索引：
                
            
        
    
    
    

js部分：

function Maxchar(str) { //定義一個(gè)參數(shù)，代表我們傳入一個(gè)數(shù)組或者字符串（字符串本身來(lái)說(shuō)也是一個(gè)數(shù)組）
    this.str = str || "";
    this.maxCharMeta = {}; //一個(gè)存儲(chǔ)提取信息的對(duì)象
}
// class_name.prototype.method_name = function(first_argument) {
//     // body...
// };
Maxchar.prototype.parser = function() { //定義一個(gè)解析函數(shù)，掛在原型上，所有的實(shí)例都可以使用
    var str = this.str;
    /*
    objChar= {
        a:{
            char:"a",
            num:3,
            indexs:[2,4,6]
        },
        b:{
            char:"b",
            num:1,
            indexs:[1]
        }
    }
     */
    var objChar = {}, //存儲(chǔ)提取的信息
        maxCounter = 0;
    for (var i = 0; i < str.length; i++) { //遍歷以后，obj里面就會(huì)包含輸入字符數(shù)組的每個(gè)字符的信息了。
        if (objChar[str[i]]) { //若已存在,更新objChar里對(duì)應(yīng)身str[i]的屬性值
            objChar[str[i]].num += 1;
            objChar[str[i]].indexs.push(i);
        } else { //若不存在，則代表obj還沒(méi)有存在字符為str[i]的對(duì)象
            //定義一個(gè)臨時(shí)對(duì)象
            var metaChar = {
                char: str[i],
                num: 1,
                indexs: [i] //第一次出現(xiàn)，該字符的索引數(shù)組里面只有一個(gè)元素，即當(dāng)前的i
            }
            objChar[str[i]] = metaChar; //將臨時(shí)對(duì)象 賦給obj
        }
        // 為了找出最多出現(xiàn)次數(shù)的信息，且不再重復(fù)定義遍歷，就在此for循環(huán)中定義實(shí)現(xiàn)
        if (maxCounter < objChar[str[i]].num) { //若最大次數(shù)小于當(dāng)前str[i]的num值，就更新
            this.maxCharMeta = objChar[str[i]];
            maxCounter = objChar[str[i]].num;
        }
    }
    return this; //實(shí)現(xiàn)鏈?zhǔn)降恼{(diào)用
}

// 輸出
Maxchar.prototype.maxCharInfo = function() {
    return this.maxCharMeta;
}

// 視圖處理
// 定義對(duì)象
var maxCharOut = {
    inputStr: null, //代表獲取的輸入值
    parsedObj: null, //代表解析完成的對(duì)象
    init: function() { //執(zhí)行
        this.getStrInfo(); //獲取信息
        // this.parser(); //位置放錯(cuò)了：在頁(yè)面一刷新的時(shí)候，還沒(méi)有獲取到值，當(dāng)鼠標(biāo)點(diǎn)擊以后，才獲取到值，開(kāi)始解析

    },
    getStrInfo: function() { //從界面上獲取，利用DOM元素
        var inputStr = document.getElementById("inputStr");
        var calculateBtn = document.getElementById("calculateBtn");

        calculateBtn.onclick = function() { //給button綁定點(diǎn)擊事件
            maxCharOut.inputStr = inputStr.value; //在點(diǎn)擊的時(shí)候獲取值
            maxCharOut.parser(); //當(dāng)鼠標(biāo)點(diǎn)擊以后，才獲取到值，開(kāi)始解析
            maxCharOut.charView(); // 點(diǎn)擊時(shí)，調(diào)用結(jié)果輸出函數(shù)，即可以頁(yè)面顯示結(jié)果
        }
    },
    // 解析/計(jì)算
    parser: function() {
        // var charMeta =new Maxchar(this.inputStr)  //傳入的是一個(gè)輸入字符（即輸入框輸入的值）
        // var charMeta =new Maxchar(this.inputStr).parser() //調(diào)用 
        // var charMeta =new Maxchar(this.inputStr).parser().maxCharInfo();//輸出
        this.parsedObj = new Maxchar(this.inputStr).parser().maxCharInfo();
    },
    // 輸出，放到頁(yè)面上顯示
    charView: function() { //顯示的三個(gè)位置，利用DOM元素
        var maxChar = document.getElementById("maxChar");
        var maxCounter = document.getElementById("maxCounter");
        var strIndex = document.getElementById("strIndex");

        //賦值前先進(jìn)行判斷,parsedObj是否存在，不存在代表解析還未完成
        if (this.parsedObj) {
            maxChar.innerHTML = this.parsedObj.char;
            maxCounter.innerHTML = this.parsedObj.num;
            strIndex.innerHTML = this.parsedObj.indexs.join(","); //關(guān)于每個(gè)字符的索引數(shù)組，不能直接將數(shù)組輸出，先將其變成字符串
        }
    }
};
// 立即執(zhí)行函數(shù)
(function() {
    maxCharOut.init();
})();