JavaScript 해시 맵은 어떻게 구현됩니까?


88

저는 현재 OpenLayers로 작업하고 있으며 벡터 레이어 (100000 개 이상의 벡터)에 그릴 엄청난 양의 데이터를 가지고 있습니다.

이제 성능을 분석하기 위해이 모든 벡터를 JavaScript 해시 맵에 넣으려고합니다. JavaScript의 해시 맵이 어떻게 구현되었는지 알고 싶습니다. 실제 해시 함수입니까 아니면 단순한 데이터 구조와 검색 알고리즘을 사용하는 래핑 된 함수입니까?


2
JS 구현이 하나만있는 것이 아니므로 이에 답할 방법이 없습니다. ECMAScript는 객체에 사용할 데이터 구조를 지정하지 않으며 액세스 시간에 대한 제한을 지정하지도 않습니다. 해시는 일반적이지만 균형 잡힌 나무를 사용할 수 있습니다.
outis

1
ES6에는 순수한지도가 있습니다. 이 링크는 일반 개체와지도, 주요 세부 정보 등의 차이점을 설명합니다. MDN JavaScript Map
Den Roman

답변:


193

모든 자바 스크립트 객체 는 문자열이나 기호 를 키로 받아들이는 간단한 해시 맵 이므로 코드를 다음과 같이 작성할 수 있습니다.

var map = {};
// add a item
map[key1] = value1;
// or remove it
delete map[key1];
// or determine whether a key exists
key1 in map;

자바 스크립트 객체는 구현시 실제 해시 맵이므로 검색의 복잡성은 O (1)이지만 hashcode()자바 스크립트 문자열 전용 기능 이 없으며 자바 스크립트 엔진 (V8, SpiderMonkey, JScript.dll 등)에 의해 내부적으로 구현됩니다. .)

2020 업데이트 :

현재 자바 스크립트는 다른 데이터 유형도 지원합니다 : MapWeakMap. 기존 객체보다 해시 맵처럼 더 가깝게 작동합니다.


완전한. 나는 전에 $ ( 'div # someDiv'). data (key, value)를 사용했고 이것은 훨씬 더 간단하고 아마도 이전 브라우저를 더 잘 지원할 것입니다. 감사합니다
Swaroop 2013-10-15

지도의 길이를 찾는 방법이 있습니까?
Rolling Stone

2
@Sridhar use Object.keys (map) .length
otakustay

1
당신은 키와 같은 번호를 사용할 수 있습니다 map[2] = 'foo'하지만 내부적으로 문자열로 캐스트를 얻을 수> map = { '2': 'foo' }
해리 모레노

@otakustay는 오늘 알게 된 멋진 기능이었습니다 :) 정말 Javascript를 자세히 배워야합니다.
Pankaj Prakash

31

자바 스크립트 객체는 해시 맵 위에서 만 구현할 수 없습니다.

브라우저 콘솔에서 다음을 시도하십시오.

var foo = {
    a: true,
    b: true,
    z: true,
    c: true
}

for (var i in foo) {
    console.log(i);
}

... 사실상 표준 동작 인 삽입 순서대로 다시받을 수 있습니다.

해시 맵은 본질적으로 순서를 유지하지 않으므로 JavaScript 구현은 어떻게 든 해시 맵을 사용할 수 있지만, 해시 맵을 사용하는 경우 적어도 별도의 색인과 삽입을위한 추가 부기가 필요합니다.

다음은 v8이 객체를 구현하는 데 해시 맵을 사용하지 않는 이유를 설명 하는 Lars Bak 의 비디오입니다 .


3
"오타쿠 스테이는 기술적으로 잘못되었습니다. 최악의 잘못입니다." 조금 가혹합니다. 1 : 1이 아닐 수도 있지만 사전과 같은 해시를 사용하려는 의도와 목적에 따라 동일한 방식으로 작동합니다.
아마

1
JavaScript의 일부 구현 (예 : 대부분의 브라우저)에 대해 이것이 사실 일 수 있지만 항상 사실은 아닙니다. 키에 대한 반복 순서는 ECMAScript 표준에 의해 정의되지 않으며 임의의 순서 일 수 있으며 여전히 유효한 JS 구현입니다.
TheZ

19

다음은 Java 과 유사한 것을 사용하는 쉽고 편리한 방법입니다 .

var map= {
    'map_name_1': map_value_1,
    'map_name_2': map_value_2,
    'map_name_3': map_value_3,
    'map_name_4': map_value_4
    }

그리고 가치를 얻으려면 :

alert( map['map_name_1'] );    // fives the value of map_value_1

......  etc  .....

12

이 클래스를 시도해야합니다 Map:

var myMap = new Map();

// setting the values
myMap.set("1", 'value1');
myMap.set("2", 'value2');
myMap.set("3", 'value3');

myMap.size; // 3

// getting the values
myMap.get("1");    // "value associated with "value1"
myMap.get("2");       // "value associated with "value1"
myMap.get("3");      // "value associated with "value3"

참고 : 키와 값은 모든 유형이 될 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map


4

평범한 오래된 JavaScript 객체를 맵으로 사용할 수 있지만 일반적으로 대부분의 브라우저와의 호환성을 위해 삽입 순서를 유지하는 방식으로 구현되므로 (Craig Barnes의 답변 참조) 따라서 단순한 해시 맵이 아닙니다.

ES6 적절한지도 (참조 소개 MDN 자바 스크립트지도 그중) 표준 말한다을 :

맵 개체는 해시 테이블 또는 평균적으로 컬렉션의 요소 수에 따라 하위 선형 인 액세스 시간을 제공하는 기타 메커니즘을 사용하여 구현되어야합니다.


1
<html>
<head>
<script type="text/javascript">
function test(){
var map= {'m1': 12,'m2': 13,'m3': 14,'m4': 15}
     alert(map['m3']);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()"/>
</body>
</html>

0

나는 몇 가지 공통 키가있는 json이있는 문제에 봉착했습니다. 동일한 키를 가진 모든 값을 그룹화하고 싶었습니다. 서핑 후 나는 hashmap 패키지를 찾았습니다 . 정말 도움이됩니다.

동일한 키로 요소를 그룹화하기 위해 multi(key:*, value:*, key2:*, value2:*, ...).

이 패키지는 Java Hashmap 컬렉션과 다소 유사하지만 Java Hashmap만큼 강력하지는 않습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.