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

    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
    저작자표시

    'JavaScript' 카테고리의 다른 글

    [모던 JavaScript] 5.11 과제 정리!  (0) 2022.12.13
    [모던 JavaScript] 5.9~ 5.10 과제 정리!  (0) 2022.12.09
    [모던 JavaScript] 5.4~ 5.5 과제 정리!  (0) 2022.12.04
    [모던 JavaScript] 4.6 ~ 5.3 과제 정리!  (0) 2022.12.01
    [모던 JavaScript] 4.5 과제 정리  (0) 2022.11.25

    관련글

    댓글

    라이브러리 브랜드 그룹 | 심리학도의 좌충우돌 개발 여행기

    티스토리툴바