摘要：剛剛接觸一周的時間，熟悉了最基本的知識，這是自己面對的第一個的邏輯性的代碼題目，自己嘗試了寫了，結果還算可以，因為有好多知識涉及到了后面的知識，就有點吃力了。以下代碼總結于網上前輩給出的參考答案和結合了自己的理解和注釋，請多多指正。

剛剛接觸JS一周的時間，熟悉了最基本的js知識，這是自己面對的第一個js的邏輯性的代碼題目，自己嘗試了寫了，結果還算可以，因為有好多知識涉及到了后面的dom知識，就有點吃力了。以下代碼總結于網上前輩給出的參考答案和結合了自己的理解和注釋，請多多指正。

html代碼：

    

        

            
找到數組中出現最多的字母并給出個數以及每一個所在的位置
            輸入字符：
            
            計算
            
            

                

                    出現次數最多的字符：
                
                

                    出現次數最多的字符出現的次數：
                
                

                    出現次數最多的字符的索引：
                
            
        
    
    
    

js部分：

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

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

// 視圖處理
// 定義對象
var maxCharOut = {
    inputStr: null, //代表獲取的輸入值
    parsedObj: null, //代表解析完成的對象
    init: function() { //執(zhí)行
        this.getStrInfo(); //獲取信息
        // this.parser(); //位置放錯了：在頁面一刷新的時候，還沒有獲取到值，當鼠標點擊以后，才獲取到值，開始解析

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

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

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