JavaScript

[모던 JavaScript] 5.6~ 5.8 과제 정리!

보라해바라기 2022. 12. 8. 17:56
SMALL
  • 5.6 iterable 객체
  • 5.7 맵과 셋
  • 5.8 위크맵과 위크셋

5.7 (1) 배열에서 중복 요소 제거하기

<!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>
    <script>
        // Array.from 사용 (객체 -> 배열)
        function unique(arr) {
            return Array.from(new Set(arr));
        }

        let values = ["Hare", "Krishna", "Hare", "Krishna",
        "Krishna", "Krishna", "Hare", "Hare", ":-O"
        ];

        alert( unique(values) ); // 얼럿창엔 `Hare, Krishna, :-O`만 출력되어야 합니다.
    </script>
</body>
</html>

5.7 (2) 애너그램 걸러내기

<!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>
    <script>
        // 복습 필요!
        function aclean(arr){
            let map = new Map();

            for (let word of arr) {
                let sorted = word.toLowerCase().split('').sort().join('');
                map.set(sorted, word)
            }

            return Array.from(map.values());
        }

        let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"];

        alert( aclean(arr) ); 
        // "nap,teachers,ear"나 "PAN,cheaters,era"이 출력되어야 합니다.
    </script>
</body>
</html>

5.7 (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>
    <script>
        let map = new Map();

        map.set("name", "John");

        let keys = Array.from(map.values());

        // Error: keys.push is not a function
        keys.push("more");

        alert(keys);

        // 이유? map.keys()는 배열 X (이터러블 객체 반환)
    </script>
</body>
</html>

5.8 (1) '읽음' 상태인 메시지 저장하기

<!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>
    <script>
        //WeakSet 사용
        let messages = [
        {text: "Hello", from: "John"},
        {text: "How goes?", from: "John"},
        {text: "See you soon", from: "Alice"}
        ];

        let readMessages = new WeakSet();

        readMessages.add(messages[0]);
        readMessages.add(messages[1]);

        alert("message 0은 읽음 상태? " + readMessages.has(messages[0]));

        messages.shift(); // shift: 배열에서 첫번째 요소 삭제 후 반환
    </script>
</body>
</html>

5.8 (2) 읽은 날짜 저장하기

<!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>
    <script>
        let messages = [
        {text: "Hello", from: "John"},
        {text: "How goes?", from: "John"},
        {text: "See you soon", from: "Alice"}
        ];

        let readMap = new WeakMap();

        readMap.set(messages[0], new Date(2017, 1, 1));
    </script>
</body>
</html>

 

 

 

 

 

 

728x90
저작자표시 (새창열림)