Set은 중복을 허용하지 않는 값을 모아논 컬렉션입니다.
셋에는 키가 없는 값이 저장됩니다.
Methods
new Set(iterable) – iterable object를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 set에 넣어줌.
set.add(value) – 값을 추가하고 set 자신을 반환.
set.delete(value) – 값을 제거함. 호출 시점에 set의 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.
set.has(value) – set 내에 값이 존재하면 true, 아니면 false를 반환
set.clear() – set을 비움.
set.size – set에 몇 개의 값이 있는지 세어줌.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javaScript Set</title>
<script>
let set = new Set();
set.add('한사람');
set.add('두사람').add('세사람').add('네사람').add('오사람');
document.write(`Set : ${set.size}개 : ${set} ==> ${[...set]}<br><hr>`);
// 중복을 허용하지 않는다.
set.add('두사람').add('세사람').add('네사람').add('오사람');
set.add('두사람').add('세사람').add('네사람').add('오사람');
document.write(`Set : ${set.size}개 : ${set} ==> ${[...set]}<br><hr>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
set 컬렉션의 요소를 반복해 봅니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javaScript Set</title>
<script>
let set = new Set();
set.add('한사람').add('두사람').add('세사람').add('네사람').add('오사람');
document.write(`Set : ${set.size}개 : ${set}===>${[...set]}<br><hr>`);
// forEach()메서드로 반복
set.forEach((value) => {
document.write(`${value} `);
});
document.write(`<hr>`);
// 키를 forEach()메서드로 반복
set.keys().forEach((value) => {
document.write(`${value} `);
});
document.write(`<hr>`);
// 값을 forEach()메서드로 반복
set.values().forEach((value) => {
document.write(`${value} `);
});
document.write(`<hr>`);
// 키와 값을 forEach()메서드로 반복
set.entries().forEach(([value, key]) => {
document.write(`${value}(${key}) `);
});
document.write(`<hr>`);
// for~in으로 반복 : 아무것도 나오지 않음
for(let value in set){
document.write(`${value} `);
}
document.write(`<hr>`);
// for~of로 반복
for(let value of set){
document.write(`${value} `);
}
document.write(`<hr>`);
// for~of로 entries() 반복
for(let [value, key] of set.entries()){
document.write(`${value}(${key}) `);
}
document.write(`<hr>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
나머지 메서드를 사용해 보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javaScript Set</title>
<script>
let set = new Set();
set.add('한사람').add('두사람').add('세사람').add('네사람').add('오사람');
document.write(`Set : ${set.size}개 : ${set} ===>${[...set]}<br><hr>`);
set.forEach((value) => {
document.write(`${value}<br>`);
});
document.write(`<hr>`);
document.write(`영구 ${set.has('영구') ? "있다." : "없다."}<hr>`);
document.write(`세사람 ${set.has('세사람') ? "있다." : "없다."}<hr>`);
set.delete('세사람');
document.write(`세사람 ${set.has('세사람') ? "있다." : "없다."}<hr>`);
set.clear();
document.write(`${set.size}개<hr>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
set을 이용해서 로또번호 자동 생성기를 만들어 보자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javaScript Set</title>
<script>
let lottoSet = new Set();
while(lottoSet.size<6){
lottoSet.add(parseInt(Math.random()*45)+1);
console.log(lottoSet);
}
// set을 array로 만드는 3가지 방법!!!
/*
let lottoArray = [];
lottoSet.forEach((n)=>{
lottoArray.push(n);
});
*/
// let lottoArray = Array.from(lottoSet);
let lottoArray = [...lottoSet];
// 숫자로 정렬
lottoArray.sort((x,y)=>x-y)
document.write(`로또(${lottoArray.length}개) : ${lottoArray}<br><hr>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
보너스 로또 번호 자동 생성기2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javaScript Set</title>
<script>
window.onload = () => {
document.querySelector("#btn").onclick = ()=>{
let lottoSet = new Set();
document.querySelector("#lotto").innerHTML = "";
for(let i=0;i<10;i++){
while(lottoSet.size<6){
lottoSet.add(parseInt(Math.random()*45)+1);
console.log(lottoSet);
}
let lottoArray = [...lottoSet];
// 숫자로 정렬
lottoArray.sort((x,y)=>x-y)
let result = lottoArray.map((n)=>`${n}`.padStart(2,0) + ' ');
document.querySelector("#lotto").innerHTML += `${i+1}`.padStart(2,0) + `번 게임 : ${result.join(' ')} <br>`;
lottoSet.clear();
}
}
}
</script>
</head>
<body>
<h2>로또번호 자동 생성기</h2>
<button id="btn">로또번호 10개생성하기</button> <br> <br>
<div id="lotto" style="width: 250px;padding: 5px;height: 215px;border: 1px solid gray;"></div>
</body>
</html>
|
cs |
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] Spread Operator(전개 연산자) 객체의 결합/복사 (1) | 2024.10.17 |
|---|---|
| [JavaScript] Spread Operator(전개 연산자) 배열의 결합/복사 (0) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 기본 사용법 (0) | 2024.10.17 |
| [JavaScript] json-server 사용해보기 (6) | 2024.10.17 |
| [JavaScript] 모듈(module) import/export 알아보기 (1) | 2024.10.16 |
