728x90
반응형
SMALL
1. 세트(set)
- set 객체는 중복되지 않은 유일한 값들의 집합
- 요소 순서에 의미가 없음
- 인덱스로 요소에 접근할 수 없음
- 교집합, 합집합, 차집합, 여집합 등을 구현
const 세트명 = new Set([요소1, 요소2, ...])
2. 메서드 및 프로퍼티
2-1. add()
- 새로운 요소를 추가
- 중복된 요소는 추가되지 않음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세트</title>
</head>
<body>
<h2>세트</h2>
<script>
const set = new Set([1,2,3,4,5])
console.log(set)
set.add(6)
console.log(set) // 6개
set.add(6)
console.log(set) // 6개, 중복불가
</script>
</body>
</html>
2-2. has()
- 특정 요소가 Set에 있는지 확인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세트</title>
</head>
<body>
<h2>세트</h2>
<script>
const set = new Set([1,2,3,4,5])
console.log(set)
console.log(set.has(2)) //true
console.log(set.has(10)) // false
</script>
</body>
</html>
2-3. delete()
- 특정 요소를 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세트</title>
</head>
<body>
<h2>세트</h2>
<script>
const set = new Set([1,2,3,4,5])
console.log(set)
set.add(6)
console.log(set) // 6개
set.add(6)
console.log(set) // 6개, 중복불가
set.delete(6)
console.log(set) // 특정 데이터 삭제
</script>
</body>
</html>
2-4. clear()
- 모든 요소를 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세트</title>
</head>
<body>
<h2>세트</h2>
<script>
const set = new Set([1,2,3,4,5])
console.log(set)
set.clear()
console.log(set) // 전부 삭제
</script>
</body>
</html>
2-5. size
- set에 포함된 요소 개수 확인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세트</title>
</head>
<body>
<h2>세트</h2>
<script>
const set = new Set([1,2,3,4,5])
console.log(set)
console.log(set.size) //5
</script>
</body>
</html>
3. 반복문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세트</title>
</head>
<body>
<h2>세트</h2>
<script>
const set = new Set([1,2,3,4,5])
console.log(set)
// console.log(set.size) //5
// console.log(set.has(2)) //true
// console.log(set.has(10)) // false
set.forEach((item) => console.log(item)) // 첫번째: 값
console.log('------')
for (let value of set.values()){
console.log(value)
}
console.log('------')
for (let value of set){
console.log(value)
}
</script>
</body>
</html>
✅ 다음과 같은 배열에서 중복된 이모지를 제거해보자.
['🍎','🍌','🍎','🍋','🍑','🍉','🍑','🍈','🥝','🍈']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세트</title>
</head>
<body>
<h2>세트</h2>
<script>
const fruits = ['🍎','🍌','🍎','🍋','🍑','🍉','🍑','🍈','🥝','🍈']
function removeDuplication(arr){
return [...new Set(arr)] // fruit 복사하여 set
}
console.log(removeDuplication(fruits))
</script>
</body>
</html>
MDN: set
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set
Set - JavaScript | MDN
Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다.
developer.mozilla.org
728x90
반응형
LIST
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 예외처리 - try~catch~finally, throw문 (0) | 2023.04.20 |
|---|---|
| [JavaScript] map 객체 - has(), get(), set(), delete(), clear(), entries(), values() (0) | 2023.04.20 |
| [JavaScript] Spread 연산자( ... ) (0) | 2023.04.20 |
| [JavaScript] 제네레이터(Generator) (0) | 2023.04.19 |
| [JavaScript] 이터레이터(Iterator) & 이터러블(Iterable) (0) | 2023.04.19 |
