> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트에 해시맵이 있나요?

자바스크립트에 해시맵이 있나요?

藏色散人
풀어 주다: 2021-11-18 11:13:43
원래의
3832명이 탐색했습니다.

자바스크립트에는 해시맵이 있는데, 해시맵을 구현하는 방법은 "function HashMap(){this.map = {};}HashMap.prototype = {put : function...}"입니다.

자바스크립트에 해시맵이 있나요?

이 글의 운영 환경: windows7 시스템, javascript 버전 1.8.5, DELL G3 컴퓨터

javascript에 해시맵이 있나요?

JavaScript로 HashMap 구현

HashMap이란 무엇인가요?

해시 테이블을 기반으로 Map 인터페이스를 구현합니다. 이 구현은 모든 선택적 매핑 작업을 제공하고 null 값과 null 키를 허용합니다. (HashMap 클래스는 동기화되지 않고 null을 허용한다는 점을 제외하면 Hashtable과 거의 동일합니다.) 이 클래스는 맵의 순서를 보장하지 않으며 특히 순서가 불변임을 보장하지 않습니다. 이 구현은 해시 함수가 버킷에 요소를 적절하게 배포한다고 가정하여 기본 작업(가져오기 및 넣기)에 안정적인 성능을 제공합니다. 컬렉션 뷰를 반복하는 데 필요한 시간은 HashMap 인스턴스의 "용량"(버킷 수)과 해당 크기(키-값 매핑 수)에 비례합니다.
따라서 반복 성능이 중요하다면 초기 용량을 너무 높게(또는 로딩 인자를 너무 낮게) 설정하지 마세요.

JavaScript로 HashMap 구현
    var emojMap = ["[笑脸]", "[微笑]", "[喜欢]", "[飞吻]", "[尖叫]"
        , "[大哭]", "[哭笑不得]", "[墨镜]", "[饿了]", "[发呆]",
        "[沉思]", "[不屑]", "[鬼脸]", "[得意]", "[发怒]",
        "[眨眼]", "[汗]", "[舒服]", "[糟糕]", "[张嘴]",
        "[口罩]", "[没有嘴]", "[恶魔]", "[睡觉]", "[困乏]",
        "[难受]", "[调皮]", "[倔强]", "[困惑]", "[天使]",
        "[不看]", "[不听]", "[不说]", "[祈祷]", "[剪刀手]",
        "[拳头]", "[楼上]", "[好的]", "[赞]", "[鄙视]",
        "[鼓掌]", "[星星]", "[心]", "[心碎]", "[满分]",
        "[钱袋]", "[便便]", "[鬼魂]", "[眼睛]", "[鼻子]",
        "[耳朵]", "[嘴巴]", "[舌头]", "[猪]", "[狗]",
        "[猴子]", "[小马]", "[熊猫]", "[熊]", "[外星人]"
    ];
로그인 후 복사

이 숫자는 개발 과정에서 합의한 이모티콘 인식 데이터를 모아서 서버측으로 보냅니다.

예: 저는 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 배열처럼 상대방이 메시지를 보내면 여러 가지 해결책을 생각했습니다


예: 저는 HelloWord입니다. [Smile] 형식

    var r = /\[(.+?)\]/g;
    var str = "[笑脸][喜欢]emoji表情";
    var txt,url,tpl;
    for (var i in str.match(r)) {
        tpl = "<img src=&#39;" + i + ".png&#39; >";
        str = str.replace(str.match(r)[i],tpl);
    }
    console.log(str);
로그인 후 복사
나 초기 아이디어는 분할을 사용하여 배열을 분할한 다음 교체를 사용하여 해당 그림을 바꾸는 것이었습니다. 나중에 이 솔루션은 이모티콘이 너무 많이 게시되어 교체할 수 없으면 문제가 될 수 있다는 것을 알았습니다. 배열 첨자의 인덱스 위치를 지정해야 합니다


나중에 다음 방법으로 변경합니다.

    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=&#39;" + i + ".png&#39; >";
        str = str.split(m[i]).join(tpl);
    }
    str=str.replace(/\[|]/g,'');
    console.log(str);
로그인 후 복사
HasMap을 사용하면 각 키가 다음에 해당하므로 키 위치에 대해 걱정할 필요가 없다는 것입니다. 발.

이렇게 하면 표시용 이모티콘 사진으로 완벽하게 교체할 수 있습니다.

추천 학습: "

JavaScript 기본 튜토리얼

"

위 내용은 자바스크립트에 해시맵이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿