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

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

html代碼：

    

        

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

                

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

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

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

js部分：

function Maxchar(str) { //定義一個參數(shù)，代表我們傳入一個數(shù)組或者字符串（字符串本身來說也是一個數(shù)組）
    this.str = str || "";
    this.maxCharMeta = {}; //一個存儲提取信息的對象
}
// class_name.prototype.method_name = function(first_argument) {
//     // body...
// };
Maxchar.prototype.parser = function() { //定義一個解析函數(shù)，掛在原型上，所有的實例都可以使用
    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里面就會包含輸入字符數(shù)組的每個字符的信息了。
        if (objChar[str[i]]) { //若已存在,更新objChar里對應(yīng)身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] //第一次出現(xiàn)，該字符的索引數(shù)組里面只有一個元素，即當(dāng)前的i
            }
            objChar[str[i]] = metaChar; //將臨時對象 賦給obj
        }
        // 為了找出最多出現(xiàn)次數(shù)的信息，且不再重復(fù)定義遍歷，就在此for循環(huán)中定義實現(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; //實現(xiàn)鏈式的調(diào)用
}

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

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

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

        calculateBtn.onclick = function() { //給button綁定點擊事件
            maxCharOut.inputStr = inputStr.value; //在點擊的時候獲取值
            maxCharOut.parser(); //當(dāng)鼠標點擊以后，才獲取到值，開始解析
            maxCharOut.charView(); // 點擊時，調(diào)用結(jié)果輸出函數(shù)，即可以頁面顯示結(jié)果
        }
    },
    // 解析/計算
    parser: function() {
        // var charMeta =new Maxchar(this.inputStr)  //傳入的是一個輸入字符（即輸入框輸入的值）
        // 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();
    },
    // 輸出，放到頁面上顯示
    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(","); //關(guān)于每個字符的索引數(shù)組，不能直接將數(shù)組輸出，先將其變成字符串
        }
    }
};
// 立即執(zhí)行函數(shù)
(function() {
    maxCharOut.init();
})();