> 웹 프론트엔드 > 프런트엔드 Q&A > es6 세트와 맵의 차이점은 무엇입니까

es6 세트와 맵의 차이점은 무엇입니까

青灯夜游
풀어 주다: 2022-04-15 18:38:11
원래의
7975명이 탐색했습니다.

차이점: 1. Set은 "세트" 구조를 나타내고 Map은 "사전" 구조를 나타냅니다. 2. Set은 "[값, 값]" 형식으로 요소를 저장하는 반면 Map은 다음 형식으로 요소를 저장합니다. "[key, value]"; 3. Map은 get()을 사용하여 키로 특정 값을 찾아 반환할 수 있지만 set은 그럴 수 없습니다.

es6 세트와 맵의 차이점은 무엇입니까

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

간단한 설명:

  • Set 및 Map의 주요 응용 시나리오는 데이터 재구성 및 데이터 저장입니다.
  • Set은 Set이라는 데이터 구조이고, Map은 Dictionary라는 데이터 구조입니다.

세트와 딕셔너리의 차이점:

  • 공통점: 세트와 딕셔너리는 고유한 값을 저장할 수 있습니다. ​
  • 차이점: 세트 저장소 요소는 [값, 값] 형식으로, 사전은 요소를 다음과 같은 형식으로 저장합니다. [키, 값]

Set 형식의 저장소:

ES6에는 배열과 유사한 새로운 데이터 구조가 추가되지만 멤버가 고유하고 순서가 없으며 중복된 값이 없습니다.

Set 자체는 Set 데이터 구조를 생성하는 데 사용되는 생성자입니다.

Set 개체를 사용하면 기본 값이든 개체 참조이든 관계없이 모든 유형의 고유한 값을 저장할 수 있습니다.

const s = new Set()
[1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))
for (let i of s) {
    console.log(i)	// 1 2 3 4
}
// 去重数组的重复对象
let arr = [1, 2, 3, 2, 1, 1]
[... new Set(arr)]	// [1, 2, 3]
로그인 후 복사

참고: Set에 값을 추가하면 유형 변환이 발생하지 않으므로 `5`와 `"5"`는 서로 다른 두 값입니다. Set은 두 값이 다른지 여부를 내부적으로 결정합니다. 사용되는 알고리즘은 **정확한 동등성** 연산자(`===`)와 유사합니다. *`NaN`은 자신과 동일하지만, 완전 동일성 연산자는 `NaN`이 자신과 같지 않은 것으로 간주합니다. **

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

let set1 = new Set()
set1.add(5)
set1.add('5')
console.log([...set1])	// [5, "5"]
로그인 후 복사

작업 방법:

  • add(value): 새로운 항목, 배열 푸시와 동일합니다.

  • delete(value): 컬렉션에 값이 있으면 삭제합니다.

  • has(value): 값이 집합에 존재하는지 확인합니다.

  • clear(): 컬렉션을 지웁니다.

순회 방법: 순회 방법(순회 순서는 삽입 순서)

  • keys(): 컬렉션의 모든 키를 포함하는 반복자를 반환합니다.

  • values(): 컬렉션의 모든 값을 포함하는 반복자를 반환합니다.

  • entries(): Set 객체의 모든 요소를 ​​포함하는 키-값 반복자를 반환합니다.

  • forEach(callbackFn, thisArg): 컬렉션 멤버에 대해 callbackFn 작업을 수행하는 데 사용됩니다. thisArg 매개변수가 제공되면 콜백의 this가 이 매개변수가 됩니다. 반환 값이 없습니다.

사전(지도):

은 검색 속도가 매우 빠른 키-값 쌍의 구조입니다.

const m = new Map()
const o = {p: 'haha'}
m.set(o, 'content')
m.get(o)	// content

m.has(o)	// true
m.delete(o)	// true
m.has(o)	// false
로그인 후 복사

작동 방법:

  • set(key, value): 사전에 새 요소를 추가합니다.
  • get(key): 키로 특정 값을 찾아서 반환합니다.
  • has(key): 키 키가 사전에 존재하는지 확인합니다.
  • delete(key): 키 키를 통해 사전에서 해당 데이터를 제거합니다.
  • clear(): 이 사전의 모든 요소를 ​​삭제합니다.

Traversal 메서드:

  • Keys(): 사전에 포함된 모든 키 이름을 반복자 형식으로 반환합니다.
  • values(): 사전에 포함된 모든 값을 반복자 형태로 반환합니다.
  • entries(): 모든 멤버의 반복자를 반환합니다.
  • forEach(): 사전의 모든 구성원을 순회합니다.

요약**: **

Set:

  • 은 "set" 구조

  • [value, value]를 나타내며, 키 값과 키 이름이 일치합니다(또는 키 값만, 키 이름 없음).

  • 키로 특정 값을 찾을 수 없습니다

Map:

  • 은 "사전" 구조를 참조합니다

  • [키, 값], 키 값과 키 이름이 일치하지 않습니다

  • Map get () 키로 특정 값을 찾아 반환

[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]

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

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