|
let map = new Map([
['컴퓨터', 1500],
['마우스', 250],
['프린터', 800]
]);
|
for ~ in
아무값도 나오지 않습니다.
|
// 아무것도 나오지 않음
for( let item in map){
document.write(`${item} <br>`);
}
document.write(`<hr>`);
|
for ~ of
배열로 나타납니다. 0번은 키값이 1번은 값이 나옵니다.
|
for( let item of map){
document.write(`${item[0]} ===> ${item[1]} <br>`);
}
컴퓨터 ===> 1500 마우스 ===> 250 프린터 ===> 800 |
map.keys()
키값 만을 얻어 옵니다.
|
for( let key of map.keys()){
document.write(`${key} <br>`);
}
|
map.values()
값만을 얻어 옵니다.
|
for( let value of map.values()){
document.write(`${value} <br>`);
}
|
map.entries()
[키, 값]의 쌍을 얻어옵니다.
|
for( let e of map.entries()){
document.write(`${typeof e} : ${JSON.stringify(e)} : ${e}<br>`);
}
object : ["컴퓨터",1500] : 컴퓨터,1500 object : ["마우스",250] : 마우스,250 object : ["프린터",800] : 프린터,800 |
map.forEach((value, key, m)=>{})
|
map.forEach((value, key, m)=>{
document.write(`${key} ${value}<br>`);
console.log(m);
});
콘솔에 출력(세번째 매개변수는 맵 자체가 됩니다.) Map(3) Map(3) Map(3) |
ex03.html 파일을 다음과 같이 만듭니다.
|
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
58
59
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javaScript Map</title>
<script>
let map = new Map([
['컴퓨터', 1500],
['마우스', 250],
['프린터', 800]
]);
// 아무것도 나오지 않음
for( let item in map){
document.write(`${item} <br>`);
}
document.write(`<hr>`);
// of사용
for( let item of map){
document.write(`${item[0]} ===> ${item[1]} <br>`);
}
document.write(`<hr>`);
// 키만
for( let key of map.keys()){
document.write(`${key} <br>`);
}
document.write(`<hr>`);
// 값만
for( let value of map.values()){
document.write(`${value} <br>`);
}
document.write(`<hr>`);
// 키와 값을 같이
for( let e of map.entries()){
document.write(`${typeof e} : ${JSON.stringify(e)} : ${e}<br>`);
}
document.write(`<hr>`);
for( let [key, value] of map.entries()){
document.write(`${key} ${value}<br>`);
}
document.write(`<hr>`);
// forEach사용하기
map.forEach((value, key, m)=>{
document.write(`${key} ${value}<br>`);
console.log(m);
});
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 맵(Map) to Object, Object to Map (0) | 2024.10.23 |
|---|---|
| [JavaScript] 맵(Map) 객체의 메서드들 (0) | 2024.10.23 |
| [JavaScript] 맵(Map) 객체의 map[key]는 객체 접근입니다. (0) | 2024.10.23 |
| [JavaScript] 맵(Map) 객체의 set(), get() (0) | 2024.10.23 |
| [JavaScript] 배열 reduce(), reduceRight() (0) | 2024.10.23 |
