>웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 맵 및 세트 작업: 종합 안내서

JavaScript에서 맵 및 세트 작업: 종합 안내서

Patricia Arquette
Patricia Arquette원래의
2024-12-22 14:21:15681검색

Working with Maps and Sets in JavaScript: A Comprehensive Guide

JavaScript에서 맵 및 세트 작업

MapsSetsES6(ECMAScript 2015)에 도입된 두 가지 중요한 데이터 구조로 기존 객체 및 배열에 비해 향상된 기능을 제공합니다. 지도세트를 모두 사용하면 고유한 값을 저장하고 보다 체계적이고 효율적인 방식으로 데이터를 사용할 수 있습니다.

1. JavaScript 지도

은 키와 값이 모두 임의의 데이터 유형일 수 있는 키-값 쌍의 모음입니다. 문자열이나 기호만 키로 가질 수 있는 객체와 달리 에서는 모든 값(객체, 배열, 함수 등)을 키로 사용할 수 있습니다.

지도 만들기

지도를 생성하려면 지도 생성자를 사용할 수 있습니다.

const map = new Map();

또는 키-값 쌍 배열로 맵을 초기화할 수도 있습니다.

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'New York']
]);

console.log(map);

지도에 항목 추가

set() 메소드를 사용하여 항목을 추가할 수 있습니다.

const map = new Map();

map.set('name', 'John');
map.set('age', 30);
map.set('city', 'Los Angeles');

console.log(map);

지도에서 값에 액세스

get() 메소드를 사용하여 키와 연관된 값에 액세스할 수 있습니다.

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

console.log(map.get('name'));  // Output: Alice
console.log(map.get('age'));   // Output: 25

지도에서 키 확인

키가 존재하는지 확인하려면 has() 메소드를 사용하세요.

const map = new Map([
  ['name', 'John'],
  ['age', 30]
]);

console.log(map.has('name'));  // Output: true
console.log(map.has('city'));  // Output: false

지도에서 항목 제거

delete() 메소드를 사용하여 키-값 쌍을 제거할 수 있습니다.

map.delete('age');
console.log(map.has('age'));  // Output: false

지도에서 모든 항목을 삭제하려면:

map.clear();
console.log(map.size);  // Output: 0

지도 반복

forEach() 또는 for...of 루프를 사용하여 맵의 키-값 쌍을 반복할 수 있습니다.

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

// Using forEach
map.forEach((value, key) => {
  console.log(key, value);
});

// Using for...of
for (const [key, value] of map) {
  console.log(key, value);
}

2. JavaScript에서 설정

세트는 고유한 값의 모음입니다. 즉, 중복된 값을 자동으로 제거합니다. 여러 개의 동일한 요소를 저장할 수 있는 배열과 달리 세트는 컬렉션의 모든 값이 고유한지 확인합니다.

세트 만들기

Set 생성자를 사용하여 Set을 생성할 수 있습니다.

const set = new Set();

또는 값 배열로 Set을 초기화할 수도 있습니다.

const set = new Set([1, 2, 3, 4, 5]);
console.log(set);

세트에 값 추가

add() 메소드를 사용하여 Set에 값을 추가할 수 있습니다.

const set = new Set();

set.add(1);
set.add(2);
set.add(3);
set.add(2);  // Duplicate value, won't be added

console.log(set);  // Output: Set { 1, 2, 3 }

세트의 값 확인

Set에 값이 있는지 확인하려면 has() 메서드를 사용하세요.

console.log(set.has(2));  // Output: true
console.log(set.has(4));  // Output: false

세트에서 값 제거

delete() 메소드를 사용하여 Set에서 값을 제거할 수 있습니다.

const map = new Map();

세트에서 모든 값을 지우려면:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'New York']
]);

console.log(map);

세트 반복

forEach() 또는 for...of 루프를 사용하여 Set의 값을 반복할 수 있습니다.

const map = new Map();

map.set('name', 'John');
map.set('age', 30);
map.set('city', 'Los Angeles');

console.log(map);

3. 맵과 세트의 비교

기능 지도 설정
Feature Map Set
Storage Stores key-value pairs Stores unique values only
Key Types Any type (objects, arrays, primitive types) Only values (no keys)
Uniqueness Keys must be unique, values can repeat Values must be unique
Order of Elements Iterates in insertion order Iterates in insertion order
Size map.size set.size
Methods set(), get(), has(), delete(), clear() add(), has(), delete(), clear()
저장 키-값 쌍을 저장합니다 고유한 값만 저장

키 유형

모든 유형(객체, 배열, 기본 유형) 값만(키 없음) 독창성 키는 고유해야 하며 값은 반복될 수 있습니다 값은 고유해야 합니다
    요소 순서
삽입 순서대로 반복 삽입 순서대로 반복

크기

지도.크기 세트.크기 방법 set(), get(), has(), 삭제(), 클리어() 추가(), has(), 삭제(), 클리어()
  • 4.
  • 지도 및 세트 사용 사례
지도
  • 는 고유 키를 특정 값과 연결해야 할 때 유용합니다. 예는 다음과 같습니다.

    사용자 기본 설정 저장

      구성 옵션 저장
    • 키 기반 데이터 캐싱
  • 세트는 고유한 값의 컬렉션을 저장해야 할 때 이상적입니다. 예는 다음과 같습니다.

      웹사이트의 순 방문자 추적
    • 배열에서 중복 값 제거
    • 처리되었거나 확인된 항목 추적
    결론


    은 모든 데이터 유형을 키로 지원하는 효율적인 키-값 쌍 저장소를 제공하며 삽입 순서를 유지합니다.

    세트

    는 고유한 값을 저장하며 컬렉션에 중복이 없는지 확인하려는 경우 특히 유용합니다.
    맵과 세트 모두 강력한 기능을 제공하며 보다 체계적이고 효율적인 방식으로 데이터를 관리하는 데 도움이 될 수 있습니다. 안녕하세요. 저는 Abhay Singh Kathayat입니다! 저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다. 제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

    위 내용은 JavaScript에서 맵 및 세트 작업: 종합 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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