>웹 프론트엔드 >프런트엔드 Q&A >es6의 맵은 무엇을 의미합니까?

es6의 맵은 무엇을 의미합니까?

WBOY
WBOY원래의
2022-03-30 18:41:324276검색

es6에서 맵은 "키-값"의 모음인 데이터 구조입니다. 키는 모든 유형의 데이터일 수 있습니다. 맵은 "값 대 값" 대응을 제공하며 구문인 더 완전한 해시 구조 구현입니다. "새 맵([반복 가능])"입니다.

es6의 맵은 무엇을 의미합니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6에서 map은 무슨 뜻인가요?

Map이란 무엇인가요?

이전에는 ES5에는 Map과 같은 데이터 수집이 없었고 ES6에서만 추가되었습니다.

Map은 키-값의 모음입니다. 키는 객체와 마찬가지로 모든 유형의 데이터일 수 있지만 객체의 키는 문자열만 될 수 있습니다.

ES6은 지도 데이터 구조를 제공합니다. 객체와 유사하며 키-값 쌍의 집합이기도 하지만 "키"의 범위가 문자열에만 국한되지 않고 다양한 유형의 값(객체 포함)을 키로 사용할 수 있습니다.

즉, 개체 구조는 "문자열-값" 대응을 제공하고, 맵 구조는 "값-값" 대응을 제공하며, 이는 해시 구조를 보다 완벽하게 구현합니다.

"키-값 쌍" 데이터 구조가 필요한 경우 Object보다 Map이 더 적합합니다.

Syntax

new Map([iterable])

Iterable은 요소가 키-값 쌍(두 요소의 배열, 예: [[ 1, 'one' ],[ 2, 'two' ])인 배열 또는 기타 반복 가능한 객체일 수 있습니다. ] ).

각 키-값 쌍이 새 지도에 추가됩니다.

null은 정의되지 않은 것으로 처리됩니다.

객체와 맵의 비교:

객체와 맵은 둘 다 키로 값에 액세스하고, 키를 삭제하고, 키가 값에 바인딩되어 있는지 감지할 수 있다는 점에서 유사합니다. 그러므로 (그리고 내장된 대안은 없습니다) 우리는 항상 객체를 맵으로 취급해 왔습니다. 그러나 맵과 객체 사이에는 몇 가지 중요한 차이점이 있습니다. 다음 상황에서는 맵을 사용하는 것이 더 나은 선택입니다

  • 객체의 키는 문자열이나 기호만 될 수 있지만 맵의 키는 어떤 값이라도 될 수 있습니다. , 함수, 객체, 기본 유형을 포함합니다.

  • 맵의 키 값은 순서가 있지만 객체에 추가된 키는 순서가 없습니다. 따라서 이를 반복하면 Map 객체는 삽입된 순서대로 키 값을 반환합니다.

  • 크기 속성을 통해 Map의 키-값 쌍 수를 직접 얻을 수 있는 반면, Object의 키-값 쌍 수는 수동으로만 계산할 수 있습니다.

  • Map은 직접 반복할 수 있지만 객체의 반복은 먼저 키 배열을 얻은 다음 반복해야 합니다.

  • 객체에는 자체 프로토타입이 있으며 프로토타입 체인의 키 이름이 객체에 설정한 키 이름과 충돌할 수 있습니다. ES5에서는 map = Object.create(null)을 사용하여 프로토타입 없이 객체를 생성할 수 있지만 이 사용법은 덜 일반적입니다.

  • Map은 키-값 쌍을 자주 추가하고 삭제하는 시나리오에서 성능상의 이점을 제공합니다.

예제는 다음과 같습니다.

// 字符串作为key,和JS对象类似
var map = new Map()
// set
map.set('name', 'John')//两个参数,分为对应map中key,value,  推进去的时候会自动检查类型,Object,String,Array等l
map.set('age', 29)
// get
map.get('name') // John
map.get('age')  // 29
这么对代码,看起来确实没有JS对象简洁
但Map的强大之处在于它的key可以是任意类型
// 对象作为key演示
var xy = {x: 10, y: 20}   // 坐标
var wh = {w: 100, h: 200} // 宽高
var map = new Map()
// set
map.set(xy, '坐标')
map.set(wh, '宽高')
// get
map.get(xy) // '坐标'
map.get(wh) // '宽高'

결과:

es6의 맵은 무엇을 의미합니까?

[관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드]

위 내용은 es6의 맵은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.