JavaScript中HashMap的實現

什么是HashMap?

基於哈希表的 Map 接口的實現。此實現提供所有可選的映射操作，並允許使用 null 值和 null 鍵。（除了非同步和允許使用 null 之外，HashMap 類與 Hashtable 大致相同。）此類不保證映射的順序，特別是它不保證該順序恆久不變。 此實現假定哈希函數將元素適當地分布在各桶之間，可為基本操作（get 和 put）提供穩定的性能。迭代 collection 視圖所需的時間與 HashMap 實例的“容量”（桶的數量）及其大小（鍵-值映射關系數）成比例。
所以，如果迭代性能很重要，則不要將初始容量設置得太高（或將加載因子設置得太低）。

JavaScript中HashMap的實現

    var emojMap = ["[笑臉]", "[微笑]", "[喜歡]", "[飛吻]", "[尖叫]"
        , "[大哭]", "[哭笑不得]", "[墨鏡]", "[餓了]", "[發呆]",
        "[沉思]", "[不屑]", "[鬼臉]", "[得意]", "[發怒]",
        "[眨眼]", "[汗]", "[舒服]", "[糟糕]", "[張嘴]",
        "[口罩]", "[沒有嘴]", "[惡魔]", "[睡覺]", "[困乏]",
        "[難受]", "[調皮]", "[倔強]", "[困惑]", "[天使]",
        "[不看]", "[不聽]", "[不說]", "[祈禱]", "[剪刀手]",
        "[拳頭]", "[樓上]", "[好的]", "[贊]", "[鄙視]",
        "[鼓掌]", "[星星]", "[心]", "[心碎]", "[滿分]",
        "[錢袋]", "[便便]", "[鬼魂]", "[眼睛]", "[鼻子]",
        "[耳朵]", "[嘴巴]", "[舌頭]", "[豬]", "[狗]",
        "[猴子]", "[小馬]", "[熊貓]", "[熊]", "[外星人]"
    ];

這個數組裝的我們開發過程中約定的Emoji識別數據,發送給Server端的數據

eg:我是HelloWord![微笑]格式

我們需要解析以"[XX]"這樣格式的數據來匹配相對應的圖片

HashMap的常用方法

鑒於HashMap的操作我們需要封裝一下常用操作方法

    function HashMap(){
        this.map = {};
    }
    HashMap.prototype = {
        put : function(key , value){// 向Map中增加元素（key, value) 
            this.map[key] = value;
        },
        get : function(key){ //獲取指定Key的元素值Value，失敗返回Null 
            if(this.map.hasOwnProperty(key)){
                return this.map[key];
            }
            return null;
        },
        remove : function(key){ // 刪除指定Key的元素，成功返回True，失敗返回False
            if(this.map.hasOwnProperty(key)){
                return delete this.map[key];
            }
            return false;
        },
        removeAll : function(){  //清空HashMap所有元素
            this.map = {};
        },
        keySet : function(){ //獲取Map中所有KEY的數組（Array） 
            var _keys = [];
            for(var i in this.map){
                _keys.push(i);
            }
            return _keys;
        }
    };
    HashMap.prototype.constructor = HashMap;

以上就是我們封裝的HashMap操作方法。

利用HashMap開發Emoji表情庫

最開始我想過幾種方案,就像emojiMap數組一樣,如果對方發消息過來

eg:我是HelloWord![微笑]格式

    var r = /\[(.+?)\]/g;
    var str = "[笑臉][喜歡]emoji表情";
    var txt,url,tpl;
    for (var i in str.match(r)) {
        tpl = "<img src='" + i + ".png' >";
        str = str.replace(str.match(r)[i],tpl);
    }
    console.log(str);

我最開始的想法是利用split分割成數組,然后用replace替換相對應的圖片,后來發現這種方案表情發多了會出現問題,無法替換.
而且需要指定數組下標的index位置
后來我改成以下方法:

    var hashMap = new HashMap();
    //先向hashMap中存入元素
    for(var i in emojMap){
        hashMap.put(emojMap[i] ,(parseInt(i))+'.png');
    }
    var r = /([^\[\]]+)(?=\])/g;
    var str = "[笑臉][喜歡]emoji表情";
    var txt,url,tpl;
    for (var i in str.match(r)) {
        //獲取hashMap中對應的Value
        txt = hashMap.get(str.match(r)[i])
        tpl = "<img src='" + i + ".png' >";
        str = str.split(m[i]).join(tpl);
    }
    str=str.replace(/\[|]/g,'');
    console.log(str);

使用HasMap的好處就是不用擔心key的位置了,因為每個key都對應一個val。

這樣就可以完美替換成Emoji圖片展示了。