자바스크립트의 지도 데이터 구조에 대한 상세한 해석

이 글은 주로 es6 javascript의 지도 데이터 구조를 소개하고 있는데, 편집자는 꽤 좋다고 생각해서 공유하고 참고하겠습니다. 에디터와 함께 구경해보세요

이 글에서는 es6 자바스크립트의 맵 데이터 구조를 소개하고 공유합니다. 자세한 내용은 다음과 같습니다.

맵 구조의 목적과 기본 사용법

JavaScript 객체( 객체), 본질적으로 키-값 쌍의 모음(해시 구조)이지만 전통적으로 문자열만 키로 사용할 수 있습니다. 이는 사용에 큰 제한을 가져옵니다.

var data = {}; 
var element = document.getElementById('myp'); 
data[element] = 'metadata'; 
data['[object HTMLpElement]'] // "metadata"

위 코드의 원래 의도는 DOM 노드를 객체 데이터의 키로 사용하는 것이지만 객체는 문자열만 키 이름으로 허용하므로 요소는 자동으로 문자열 [object HTMLpElement]로 변환됩니다.

이 문제를 해결하기 위해 ES6에서는 Map 데이터 구조를 제공합니다. 객체와 유사하며 키-값 쌍의 집합이기도 하지만 "키"의 범위가 문자열에만 국한되지 않고 다양한 유형의 값(객체 포함)을 키로 사용할 수 있습니다. 즉, 개체 구조는 "문자열-값" 대응을 제공하고, 맵 구조는 "값-값" 대응을 제공하며, 이는 해시 구조를 보다 완벽하게 구현합니다. "키-값" 데이터 구조가 필요한 경우 Object보다 Map이 더 적합합니다.

var m = new Map(); 
var o = { 
 p: 'Hello World' 
}; 
m.set(o, 'content') 
m.get(o) // "content" 
m.has(o) // true 
m.delete(o) // true 
m.has(o) // false

위 코드는 set 메소드를 사용하여 객체 o를 m의 키로 처리한 다음 get 메소드를 사용하여 키를 읽은 다음 delete 메소드를 사용하여 키를 삭제합니다.
생성자로서 Map은 배열을 매개변수로 받아들일 수도 있습니다. 이 배열의 구성원은 키-값 쌍을 나타내는 배열입니다.

var map = new Map([ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]); 
map.size // 2 
map.has('name') // true 
map.get('name') // " 张三 " 
map.has('title') // true 
map.get('title') // "Author"

위 코드는 새 Map 인스턴스를 생성할 때 이름과 제목이라는 두 개의 키를 지정합니다.

Map 생성자는 배열을 매개변수로 받아들이고 실제로 다음 알고리즘을 실행합니다.

var items = [ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]; 
var map = new Map(); 
items.forEach(([key, value]) => map.set(key, value));

아래 예에서 문자열 true와 부울 true는 서로 다른 두 개의 키입니다.

var m = new Map([ 
 [true, 'foo'], 
 ['true', 'bar'] 
]); 
m.get(true) // 'foo' 
m.get('true') // 'bar'

동일한 키에 여러 값이 할당되면 이후 값이 이전 값을 덮어쓰게 됩니다.

let map = new Map(); 
map 
 .set(1, 'aaa') 
 .set(1, 'bbb'); 
map.get(1) // "bbb"

위 코드는 두 개의 연속된 값을 키 1에 할당하고 후자의 값이 이전 값을 덮어씁니다.

알 수 없는 키를 읽으면 정의되지 않음이 반환됩니다.

new Map().get('asfddfsasadf') 
 // undefined

맵 구조에서는 동일한 객체에 대한 참조만 동일한 키로 간주됩니다. 이에 대해 매우 조심하십시오.

var map = new Map(); 
map.set(['a'], 555); 
map.get(['a']) // undefined

위 코드의 set 메소드와 get 메소드는 동일한 키에 대한 것으로 보이지만 실제로는 두 개의 값이고 메모리 주소가 다릅니다. 따라서 get 메소드는 키를 읽을 수 없으며 정의되지 않은 값을 반환합니다.

마찬가지로 동일한 값의 두 인스턴스는 맵 구조에서 두 개의 키로 간주됩니다.

var map = new Map(); 
var k1 = ['a']; 
var k2 = ['a']; 
map 
 .set(k1, 111) 
 .set(k2, 222); 
map.get(k1) // 111 
map.get(k2) // 222

위 코드에서 변수 k1과 k2의 값은 동일하지만 Map 구조에서는 두 개의 키로 간주됩니다.

위에서 볼 수 있듯이 Map의 키는 실제로 메모리 주소에 바인딩되어 있습니다. 메모리 주소가 다른 한 두 개의 키로 간주됩니다. 이는 동일한 이름을 가진 속성의 충돌 문제를 해결합니다. 다른 사람의 라이브러리를 확장할 때 객체를 키 이름으로 사용하면 우리 자신의 속성이 원래 작성자의 이름과 동일한지에 대해 걱정할 필요가 없습니다.

Map의 키가 단순 유형 값(숫자, 문자열, 부울)인 경우 Map은 0과 - 0을 포함하여 두 값이 완전히 동일한 한 이를 키로 처리합니다. 또한 NaN이 자신과 엄격하게 동일하지는 않지만 Map은 이를 동일한 키로 처리합니다.

let map = new Map(); 
map.set(NaN, 123); 
map.get(NaN) // 123 
map.set(-0, 123); 
map.get(+0) // 123

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue-cli 구성 파일(자세한 튜토리얼)

jQuery를 사용하여 animate.css 캡슐화(자세한 튜토리얼)

vuex에서 유휴 상태 재설정을 구현하는 방법

위 내용은 자바스크립트의 지도 데이터 구조에 대한 상세한 해석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!