JavaScript 세트:초보자를 위한 가이드

자바스크립트에서 집합을 사용하는 방법

고유한 값만 포함해야 하는 데이터 목록이 있습니까? 이것이 JavaScript Set 데이터 유형이 정말로 빛나는 곳입니다. 고유한 값의 컬렉션을 생성할 수 있는 새로운 유형의 객체입니다. 세트 내에서 중복이 허용되지 않습니다.

이 가이드에서는 집합이 무엇인지, 어떻게 작동하는지, 언제 유용할 수 있는지에 대해 이야기할 것입니다. JavaScript에서 사용할 수 있는 각 Set 메서드의 몇 가지 예를 살펴보겠습니다.

세트란 무엇입니까?

집합은 중복을 포함할 수 없는 값 집합입니다. 이 데이터 유형은 ECMAScript 6에서 도입되었습니다. 특히 세트는 다른 많은 프로그래밍 언어의 기능입니다.

목록은 여러 값을 저장할 수 있기 때문에 유용합니다. 목록은 수많은 시나리오에서 유용할 수 있는 중복 값 저장을 지원합니다.

예를 들어 커피숍에서 주문한 목록을 저장하는 경우 중복 값을 저장할 수 있어야 합니다. 두 명의 고객이 동일한 음료를 주문할 수 있습니다.

목록에 고유한 값만 저장하려는 경우가 있습니다. 그것이 Set 객체를 사용하려는 곳입니다. 세트의 값은 한 번만 나타날 수 있습니다.

JavaScript에서 집합은 다른 객체처럼 선언됩니다. 지역 찻집에서 고객이 보고한 좋아하는 케이크 목록을 저장하는 Set을 만들어 보겠습니다.

let cakes = new Set();
console.log(cakes)

코드는 다음을 반환합니다. Set [] . 우리는 방금 세트를 만들었습니다. 코드 출력에서 ​​볼 수 있듯이 현재로서는 값이 없습니다. 다음에 추가하겠습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

기본값으로 세트 초기화

집합은 배열, 문자열 또는 다른 이터러블에서 초기화될 수 있습니다. 이것은 Set에 값을 수동으로 추가할 필요가 없다는 것을 의미하기 때문에 유용합니다. 기존 작업에서 작업할 수 있습니다.

다음 목록을 고려하십시오.

let cake_list = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"];

이 값은 현재 배열에 저장되어 있습니다. Set으로 변환하려면 새 Set 객체를 생성할 때 배열을 전달할 수 있습니다.

let cakes = new Set(cake_list);
console.log(cakes)

코드 반환:

Set(3) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"]

집합에 값 추가

Set 개체는 add()라는 메서드와 함께 제공됩니다. 세트에 항목을 쉽게 추가할 수 있습니다. 세트에 항목을 추가하는 데 사용되는 메서드의 이름은 기억하기 쉽습니다. add() .

지역 빵집에서 판매되는 케이크 목록에 "보스턴 크림 파이"를 추가한다고 가정해 보겠습니다. add()를 사용합시다. 이 값을 추가하는 방법:

cakes.add("Boston Cream Pie");
console.log(cakes);

코드는 다음을 반환합니다.

Set(4) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Boston Cream Pie"]

이제 세트에 4개의 개체가 포함됩니다. 세트에 이미 있는 항목을 추가하려고 하면 해당 항목이 추가되지 않습니다. 세트는 중복 값을 저장할 수 없습니다.

값이 집합에 존재하는지 확인

"보스턴 크림 파이"가 케이크 목록에 있는지 확인해야합니다. 그것은 케이크 목록에 새로 추가되었으며 제빵사는 우리가 추가했는지 다시 확인하기를 원합니다.

바로 has()입니다. 메소드가 들어옵니다. has() 메소드를 사용하면 세트에 이(가) 있는지 여부를 확인할 수 있습니다. 특정 값. 다시 말하지만, 메서드에는 기억하기 쉬운 이름이 있습니다!

다음 코드를 고려하십시오.

var has_boston_cream_pie = cakes.has("Boston Cream Pie");
console.log(has_boston_cream_pie);

코드 반환:true . has() 메서드는 Set에 특정 값이 포함되어 있는지 여부에 따라 true 또는 false의 부울 값을 반환합니다. 이 메서드는 includes()와 유사합니다. 배열에서 사용하지만 has() 세트에서만 작동합니다.

집합에서 값 제거

제빵사는 딸기 치즈 케이크를 더 이상 제과점에서 제공하지 않기로 결정했습니다. 딸기 치즈케이크는 다른 케이크보다 만드는 시간이 오래 걸리고 인기가 없었어요.

적절한 이름의 delete()를 사용하여 세트에서 값을 제거할 수 있습니다. 방법. 세트에서 "Strawberry Cheesecake" 값을 제거하겠습니다.

cakes.delete("Strawberry Cheesecake");
console.log(cakes);

코드 반환:

Set(3) ["Lemon Cake", "Carrot Cake", "Boston Cream Pie"]

딸기 치즈 케이크가 우리 세트에서 제거되었습니다.

clear()를 사용하여 세트에서 모든 값을 제거할 수 있습니다. 방법.

세트 반복

목록과 마찬가지로 집합은 반복 가능한 개체입니다. 이것이 무엇을 의미하는지 알 수 있습니다. 반복할 수 있습니다.

for-each 루프를 사용하여 케이크 세트를 반복할 것입니다. for-each 루프는 목록의 모든 항목(목록의 각 항목에 대해)을 살펴보고 콘솔에 인쇄합니다.

cakes.forEach(cake => {
	console.log(cake);
}

우리의 코드는 Set의 각 값을 콘솔에 출력하는 반복자를 반환합니다.

Lemon Cake
Carrot Cake
Boston Cream Pie

간단합니다! for-of 루프를 사용할 수도 있습니다.

for (let cake of cakes) {
	console.log(cake);
}

이 코드는 forEach와 동일한 출력을 반환합니다. 루프:

Lemon Cake
Carrot Cake
Boston Cream Pie

for 루프를 사용하여 Set을 반복하도록 선택할 수 있지만 Sets는 반복 가능한 객체이기 때문에 for-each 또는 for-of 루프를 사용하는 것이 더 쉽습니다.

Set을 사용하여 중복 값 제거

배열로 Set을 초기화하면 모든 중복 값이 ​​자동으로 제거됩니다. 이것은 매우 유용한 기능입니다.

여러 케이크 주문이 포함된 목록이 있다고 가정해 보겠습니다.

var cakes = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Lemon Cake", "Chocolate Cake", "Chocolate Fudge Cake", "Chocolate Cake", "Red Velvet Cake"];

이 세트에는 베이커리에서 주문한 모든 케이크가 포함되어 있습니다. 총 8개의 값이 있습니다. 두 값이 중복됩니다.

빵 굽는 사람이 주문한 다른 종류의 케이크가 무엇인지 알고 싶어 부엌 준비를 시작할 수 있다고 가정해 보겠습니다. Set을 목록으로 변환하여 이를 찾을 수 있습니다.

var unique_cakes = new Set(cakes);
console.log(unique_cakes);

코드 반환:

Set(6) [ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

우리의 목록은 6개의 값으로 축소되었습니다. 이는 주문 목록의 모든 고유 값입니다. 한 단계 남았습니다.

표준 목록 방법을 사용하여 상호 작용할 수 있도록 케이크 세트를 다시 목록으로 변환해야 합니다. Array.from()을 사용하여 그렇게 할 수 있습니다. 방법:

let final_cakes = Array.from(unique_cakes);
console.log(final_cakes);

코드 반환:

[ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

이 코드의 출력은 Set과 유사하지만 한 가지 큰 차이점이 있습니다. 데이터가 이제 배열로 저장된다는 것입니다. 즉, 내장된 모든 JavaScript 배열 메서드를 사용하여 상호 작용할 수 있습니다.

결론

Set 개체를 사용하면 고유한 값만 포함할 수 있는 항목 목록을 저장할 수 있습니다. 목록이나 문자열과 같은 기존의 반복 가능한 객체에서 집합을 초기화할 수 있습니다.

Set 개체는 중복 값을 제거하므로 배열에서 중복 값을 제거하는 방법으로 사용할 수 있습니다. 그런 다음 완료되면 Set을 다시 배열로 변환할 수 있습니다.

이제 전문가처럼 JavaScript에서 Sets를 사용할 준비가 되었습니다!