단비의 코딩 공부 blog

[Vanilla JS]study 24일차 - 배열반복 본문

javascript&jquery

[Vanilla JS]study 24일차 - 배열반복

황굽달 2023. 4. 26. 08:56

1. for of 구문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 에러</title>
    </head>
    <body>
        <p>1~10사이의 숫자를 입력하세요.</p>
        <input type="text" id="numBox">
        <button id="btn">테스트</button>
        <p id="test"></p>
        <script>
            //finally{ } : 결과와 관계없는 try catch구문 후에 코드를 실행하는 구문

            //입력상자에 1~10사이의 숫자를 입력한 것이 아닐 때 오류 발생
            //비어있음, 숫자가 아님, 숫자가 큰경우, 숫자가 작은경우

            //문서객체 선택
            const numBox = document.getElementById('numBox');
            const btn = document.getElementById('btn');
            const test = document.getElementById('test');

            btn.addEventListener('click', function(){
                //기존에 들어간 에러메시지 제거
                test.textContent = '';

                let v = numBox.value;

                try{
                    if(v == ''){
                        throw '비어있음';
                    }
                    if(inNan(v)){
                        throw '숫자가 아님';
                    }
                    if(v > 10){
                        throw '숫자가 큼'
                    }
                    if(v < 1){
                        throw '숫자가 작음'
                    }
                }
                catch(err){
                    test.textContent = '에러메시지 : ' + err;
                }
                //위의 구문에 에러가 있든 없든 발생하고 싶은 코드를 작성
                //입력상자 값을 비우고, 입력상자에 다시 초점가게 처리
                finally{
                    numBox.value = '';
                    numBox.focus();
                }
            });
        </script>
    </body>
</html>

2. from 메서드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배열 반복</title>
    </head>
    <body>
        <script>
            //from() : length속성이 있는 객체나, 문자열을 배열로 반환

            let test = '안녕하세요';
            const newArray = Array.from(test);

            alert(newArray);
        </script>
    </body>
</html>

3. keys 메서드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배열 반복</title>
    </head>
    <body>
        <script>
            //keys() : 배열의 키가 있는 것을 객체로 반환

            const test = ['바나나', '오렌지', '사과', '딸기'];
            const newKeys = test.keys();

            console.log(newKeys);
        </script>
    </body>
</html>

4. entries 메서드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배열 반복</title>
    </head>
    <body>
        <p id="testBox"></p>
        <script>
            //entries() : 키/값 쌍으로 반복

            const test = ['바나나', '오렌지', '사과', '딸기'];
            const newTest = test.entries();

            const testBox = document.getElementById('testBox');

            for(let x of newTest){
                testBox.innerHTML += x + '<br>';
            }
           
        </script>
    </body>
</html>

5. includes 메서드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배열 반복</title>
    </head>
    <body>
        <p id="testBox"></p>
        <script>
            //includes(값) : 값이 있으면 true를 반환, 그렇지 않으면 false 반환

            const test = ['바나나', '오렌지', '사과', '딸기'];
           
            alert(test.includes('바나나'));

        </script>
    </body>
</html>

6. some 메서드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배열 반복</title>
    </head>
    <body>
        <p id="testBox"></p>
        <script>
            //some() : 일부배열값이 테스트를 통과하는지 확인하는 메서드

            const nums = [5,4,9,16,15];

            function testFx(value,index,array){
                return value > 20;
            }

            let numsTest = nums.some(testFx);

            const testBox = document.getElementById('testBox');

            testBox.innerHTML = numsTest;
        </script>
    </body>
</html>

7. every 메서드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배열 반복</title>
    </head>
    <body>
        <p id="testBox"></p>
        <script>
            //every() : 모든 배열값이 테스트를 통과하는것을 확인하는 메서드

            const nums = [45,4,9,16,55];

            function testFx(value,index,array){
                return value > 20;
            }

            let numsTest = nums.every(testFx);

            const testBox = document.getElementById('testBox');

            testBox.innerHTML = numsTest;
        </script>
    </body>
</html>

8. reduce 메서드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배열 반복</title>
    </head>
    <body>
        <p id="testBox"></p>
        <script>
            //reduce() : 매개변수의 함수를 통해서 단일 값으로 축소

            const nums = [45,4,9,16,25];
           
            //합계 구하기
            function testFx(total,value,index,array){
                //total : 초기값/기존반환값
                return total + value;
            }

            let numsTest = nums.reduce(testFx);

            const testBox = document.getElementById('testBox');

            testBox.innerHTML = numsTest;
        </script>
    </body>
</html>

9. map 메서드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배열 반복</title>
    </head>
    <body>
        <p id="testBox"></p>
        <script>
            //map() : 매개변수의 함수를 통해서 새로운 배열을 만드는 메서드

            const nums = [45,4,9,16,25];
           
            function squere(x){
                return x * x;
            }

            const newNums = nums.map(squere);

            const testBox = document.getElementById('testBox');
            testBox.innerHTML = newNums;
        </script>
    </body>
</html>
저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 26일차 - 네이버 회원가입창 제작  (0) 2023.05.08
[Vanilla JS]study 25일차 - 정규표현식  (0) 2023.05.03
[Vanilla JS]study 23일차 - Templete Literals  (0) 2023.04.25
[Vanilla JS]study 22일차 - 에러  (1) 2023.04.17
[Vanilla JS]study 21일차 - Cookie  (0) 2023.04.14
'javascript&jquery' Related Articles more