java에서 for문을 사용할 때 ArrayList라던지 값을 한번에 빼는 방법으로


향상된 for문을 사용하여 간편하게 값을 빼냈다.


하지만 아쉽게도 JS에는 향상된 for문이 없고


for each라는 구문이 있다.


forEach는 함수를 인자로 받아 반복할 구문을 실행한다.


그 함수는 두가지의 매개변수가 들어가는데 item(배열의 항목), idx(인덱스, 항목 번호)를 받는다.


이 두가지 매개변수로 반복문을 실행한다.


예제를 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>반복문</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

        // for 문으로 개별 값 출력
        for(var i = 0; i < num.length; i++){
            console.log(num[i]);
        }

        // For Each 문으로 개별값 출력
        // 배열.forEach(실행 함수 구문);
        num.forEach(function(item, idx){  // 익명함수 활용
            console.log(idx + ", " + item);
        });

        num.forEach(printNum);
        function printNum(item, idx){   // 일반 함수 활용
            console.log("[" + idx + "] " + item);
        }
    </script>
</html>



저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-001.기본 뼈대 새창으로 열기톰캣 다운로드 및 자바스크립트 개발 환경 구축, 파일 생성 실행  (0) 2018.11.05
[JS]04-09.데이터 타입 구분, 콘솔(console), 바디(body)의 요소 스크립트(script)로 가져오기 및 이벤트 객체 정보 보는 법  (0) 2018.10.19
[JS]04-07.Shallow Copy 현상, 배열 대입 이상  (0) 2018.10.19
[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19

Shallow Copy는 A가 B에 대입을 하고


A의 값을 바꿨을 때 B의 값도 따라서 변경이 된다.


이 현상은 대입 할 때 A의 값을 그대로 넣는게 아니고


값을 참조하는 것이기 때문이다.


C언어에서 포인터를 배운 사람은 이해가 갈 것이다.



처음 접하는 사람은 이게 무슨 소리인가 하는데


예를 들자면


A의 값이 "한식이, 두식이, 석삼"이 있을 때


각각의 값의 주소가 1번지 2번지 3번지라고 치자


이럴 때 B에게 대입을 하면 "한식이, 두식이, 석삼"을 받는것이 아니고


1번지, 2번지, 3번지를 받아 그 위치에 있는 값을 참조하라는 것이다.


이 문제를 해결하기 위한 방법으로 값을 하나하나 씩 대입하면 된다.


예제를 한번 확인해보자.



<html>
    <head>
        <meta charset="UTF-8">
        <title>배열 통 카피</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        
        var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

        function shallowCopy(){
            var copyNum = num;
            console.log("num : " + num);
            console.log("copyNum : " + copyNum);
            num[0] = 50;
            console.log("num : " + num);
            console.log("copyNum : " + copyNum);
        }
        shallowCopy();
        // 위 코드를 동작하면 num을 나중에 바꾸는데 copy엔 값도 안넣었지만
        // copy도 따라서 변경된다. 이 현상을 shallow copy현상이라고 한다.

        function copyArr(){
            var copy = [];
            // 배열간 복사를 위해서는 값을 하나씩 전달 해야 한다.
            for(var i = 0; i < num.length; i++){
                copy[i] = num[i];
            }
            copy[0] = 99;
            console.log("copy : " + copy);
            console.log("num : " + num);
        }

        copyArr();

    </script>
</html>





콘솔의 결과가 다음과 같이 나온다.


두번째의 결과는 하나하나 씩 대입하여 참조 형식으로 들어가지 않았다.


이 현상은 자기도 모르게 아무 생각없이 대입하여 나오는 실수로


값이 예상과 다르게 나온다면 꼭 의심해보고 주의하여야 한다.


저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-09.데이터 타입 구분, 콘솔(console), 바디(body)의 요소 스크립트(script)로 가져오기 및 이벤트 객체 정보 보는 법  (0) 2018.10.19
[JS]04-08.for each문, 반복문 한꺼번에  (0) 2018.10.19
[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18

js에서 배열방에 사용할 수 있는 다양한 메소드를 알아보자.


splice는 특정 번호의 방, R 부터 N개의 데이터를 지우고 R번호 부터 데이터를 집어 넣을 수 있다.


slice는 N1번 부터 N2번 까지의 데이터를 반환한다.


split은 java에서 사용하던 split과 똑같이 요소를 특정 단어로 나눠준다.


sort는 정렬기능


reverse는 역정렬


delete는 삭제하여 empty로 비워둠


concat, 배열 합치기


valueOf 배열의 값 반환


join, 배열의 값을 반환할 때 구분자를 추가하여 반환


정렬의 경우 5~10개 까지는 안정적으로 작동한다.


splice의 경우 무슨말인지 모를 수 있는데 예제를 실행하여 결과를 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>배열 함수</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <button onclick="spliceDel()">spliceDel</button>
        <button onclick="spliceAdd()">spliceAdd</button>
        <button onclick="sliceEx()">sliceEx</button>
        <button onclick="splitEx()">splitEx</button>

        <br/><br/><br/>

        <button onclick="sortEx()">sortEx</button>
        <button onclick="reverseEx()">reverseEx</button>
        <button onclick="numberSort()">numberSort</button>

        <br/><br/><br/>

        <button onclick="delEx()">delEx</button>
        <button onclick="concatEx()">concatEx</button>
    </body>
    <script>
        var arr = ["마", "가", "다", "바", "나", "라"]
        /////////////////////////////////////////////// 정말 자주 쓰이는

        // splice를 이용한 요소 삭제
        function spliceDel(){
            console.log(arr);
            arr.splice(2, 2); // 2번 인덱스 포함 2개 삭제
            console.log(arr);
        }

        // splice를 이용한 요소 추가
        function spliceAdd(){
            console.log(arr);
            // 2번 인덱스부터 지울 갯수 0개, 추가할 값...
            arr.splice(2, 0, "C", "D");
            // arr.splice(2, 2, "C", "D"); 지울 갯수를 지정하여 교체형식 지우고 추가 형식도 가능
            console.log(arr);
        }

        //범위 자르기(원본데이터는 보존된다.)
        function sliceEx(){
            numArr = [0,1,2,3,4,5];
            console.log(numArr);
            //1번인덱스 부터 보여주고, 3번부터 버림
            var newArr = numArr.slice(1,3);            
            console.log(newArr);
            console.log(numArr);
        }

        //특정한 구분자로 자르기
        function splitEx(){
            var txt = "D:/img/girlgroup/twice.jpg";
            var depth = txt.split("/");
            console.log(depth);
            //twice.jpg 출력 하기
            console.log(depth[3]);
            console.log(depth[depth.length-1]);
        }

        /////////////////////////////////////////////// 자주 쓰이는

        // 배열 정렬(문자열)
        function sortEx(){
            arr.sort();
            console.log(arr);
        }

        // 배열 역정렬(문자열)
        function reverseEx(){
            arr.reverse();
            console.log(arr);
        }

        // 숫자 정렬(커스터마이징)
        var num = [3, 2, 4, 1, 5];
        function numberSort(){
            // a-b의 값이 -1이라면 바꾼다
            num.sort(function(a, b){return a-b});
            // 역정렬은 return b-a로 주면 된다.
            console.log(num);
        }

        /////////////////////////////////////////////// 잘 안쓰는
        
        // delete, 특정 인덱스를 삭제, 공간을 empty로 비워둠
        function delEx(){
            delete arr[2];
            console.log(arr);
            arr[2] = "new";
            console.log(arr);
        }
        // empty로 비워두면 접근 시 오류가 나기 때문에 쓰는걸 권장하지 않음, 주의가 필요

        // concat, 두개의 배열을 합쳐서 새로운 배열 생성
        function concatEx(){
            var arr1 = [1, 2, 3, 4, 5];
            var arr2 = ['a', 'b', 'c', 'd', 'e'];
            // arr.concat(arr1, arr2);
            var newArr = arr1.concat(arr2);
            console.log(newArr);
        }
        // 쓸 일이 있어 보이지만 구지 쓰지 않는 기능

        /////////////////////////////////////////////// 진짜 안쓰는

        // valueOf
        console.log(arr.valueOf()); // = console.log(arr);
        // 과거 콘솔이 없던 시절에 쓰던 기능

        //join
        console.log(arr.join("@")); // 항목 별 구분자 추가

    </script>
</html>



저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-08.for each문, 반복문 한꺼번에  (0) 2018.10.19
[JS]04-07.Shallow Copy 현상, 배열 대입 이상  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18
[JS]04-03.함수 생성 및 사용, 배열 생성 및 사용  (0) 2018.10.18

+ Recent posts

티스토리툴바