본문 바로가기
Spring-Java/Front-End

Day42_배열, 배열의 다양한 기능

by 현대타운301 2023. 10. 21.

2023.10.17

 

Day42 네 줄 요약

 

push와 unshift를 통해 배열에 값을 추가로 삽입할 수 있다.

pop과 shift를 통해 배열에 값을 제거할 수 있다.

join = array to string, split = string to array

delete는 값만 삭제되고 index는 유지, splice는 해당 index 자체가 삭제됨

 

 

배열 값 추가 삭제

 

push

배열의 마지막 index에 값 추가

 

 

pop

배열의 맨 마지막 index 값을 삭제

 

 

shift

배열의 첫 번째 index 값을 삭제

 

 

unshift

배열의 첫 번째 index에 값 추가

 

 

source code

<body>
    <fieldset>
        <legend>[push]</legend>
        <h3 id="result1">result</h3>
        <input type="text" id="val1" placeholder="input value"/>
        <input type="button" id="push" value="push">
    </fieldset><br/><br/>
    
    <fieldset>
        <legend>[pop]</legend>
        <h3 id="result2">result</h3>
        <input type="button" id="pop" value="pop">
    </fieldset><br/><br/>

    <fieldset>
        <legend>[shift]</legend>
        <h3 id="result3">result</h3>
        <input type="button" id="shift" value="shift">
    </fieldset><br/><br/>

    <fieldset>
        <legend>[unshift]</legend>
        <h3 id="result4">result</h3>
        <input type="text" id="val2" placeholder="input value"/>
        <input type="button" id="unshift" value="unshift">
    </fieldset><br/><br/>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
    let arr = [];
    let arrTemp = [1, 2, 3, 4, 5];
    $("#result2").text(arrTemp);
    $("#result3").text(arrTemp);

    // push 함수
    $("#push").click(() => {
        arr.push($("#val1").val());
        $("#result1").text(arr);
        console.log(arr);
    })

    // pop 함수
    $("#pop").click(() => {
        arrTemp.pop();
        $("#result2").text(arrTemp);
        console.log(arrTemp);
    })

    // shift 함수
    $("#shift").click(() => {
        arrTemp.shift();
        $("#result3").text(arrTemp);
        console.log(arrTemp);
    })

    // unshift 함수
    $("#unshift").click(() => {
        arr.unshift($("#val2").val());
        $("#result4").text(arr);
        console.log(arr);
    })
</script>

 

 

join / split

 

join

특정 문자를 사용해 배열의 각 값들을 하나로 연결

return 타입은 string, 원본 배열에는 변화 없음

 

 

 

split

특정 문자를 기준으로 index 구분 후 문자열을 배열형식으로 변환

return 타입은 array

 

arr.split(' ') 결과

 

 

source code

<body>
    <fieldset>
        <legend>[join]</legend>
        <h3 id="result1">result</h3>
        <input type="button" id="join" value="join">
    </fieldset><br/><br/>
    
    <fieldset>
        <legend>[split]</legend>
        <h3 id="result2">result</h3>
        <input type="button" id="split" value="split">
    </fieldset><br/><br/>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
    let arrJoin = ['010','1234','5678'];
    let txt = 'welcome to the hyundaitown !';
    
    $("#result1").text(arrJoin);
    $("#result2").text(txt);

    // join 함수
    $("#join").click(() => {
        console.log(arrJoin);
        let phone = arrJoin.join('-');
        $("#result1").text(phone);
        console.log(phone);
        console.log(arrJoin);
    })

    // split 함수
    $("#split").click(() => {
        // 공백을 기준으로 문자열 split
        let arrSplit = txt.split(' ');
        $("#result2").text(arrSplit);
        console.log(txt);
        console.log(arrSplit);
    })
</script>

 

 

delete / splice

 

delete

메소드가 아닌 연산자

배열의 특정 index 값을 삭제

값만 삭제되고 index는 유지(= 배열의 크기는 변동없음)

 

delete arr[2] (index[2] 값만 삭제)

 

 

splice (*slice 아님 주의)

delete와 달리 실제로 해당 index 값을 삭제

삭제와 동시에 추가 가능

     - arr.splice(n, i) : index[n](포함)부터 i개 삭제

     - arr.aplice(1, 2, 'newVal1', 'newVal2') : indext[1]부터 2개 삭제 후 index[1] = 'newVal1', index[2] = 'newVal2'

 

 

 

source code

<body>
    <fieldset>
        <legend>[delete]</legend>
        <h3 id="result1">result</h3>
        <input type="button" id="delete" value="delete">
    </fieldset><br/><br/>

    <fieldset>
        <legend>[splice]</legend>
        <h3 id="result2">result</h3>
        <input type="button" id="splice1" value="splice1">
        <input type="button" id="splice2" value="splice2">
    </fieldset><br/><br/>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
    let arr = ['index[0]', 'index[1]', 'index[2]', 'index[3]', 'index[4]'];
    
    $("#result1").text(arr);
    $("#result2").text(arr);

    // delete 함수
    $("#delete").click(() => {
        console.log(arr);
        delete arr[2];
        $("#result1").text(arr);
        console.log(arr);
    })

    // splice1 함수
    $("#splice1").click(() => {
        console.log(arr);
        arr.splice(1, 2);
        $("#result2").text(arr);
        console.log(arr);
    })

    // splice2 함수
    $("#splice2").click(() => {
        console.log(arr);
        arr.splice(1, 2, 'index[add1]', 'index[add2]');
        $("#result2").text(arr);
        console.log(arr);
    })
</script>

 

 

slice / concat

 

slice

특정 구간의 index value만 남기고 나머지는 삭제

     - arr.slice(1, 3) : index[1] 부터 시작해서 index[3] 이전까지만 잘라냄

return 타입은 array, 원본 배열에는 변화없음

 

 

 

concat

배열 합성 메소드

     - arr1.concat(arr2, arr3) : arr1 배열에 arr2, arr3 차례로 합성

return 타입은 array

 

 

 

source code

<body>
    <fieldset>
        <legend>[slice]</legend>
        <h3 id="result1">result</h3>
        <input type="button" id="slice" value="slice">
    </fieldset><br/><br/>

    <fieldset>
        <legend>[concat]</legend>
        <h3 id="result2">result</h3>
        <h3 id="result3">result</h3>
        <h3 id="result4">result</h3>
        <h3 id="result5">result</h3>
        <input type="button" id="concat" value="concat">
    </fieldset><br/><br/>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
    let arr1 = ['0', '1', '2', '3', '4', '5'];
    let arr2 = ['a', 'b', 'c', 'd', 'e'];
    let arr3 = ['ㄱ', 'ㄴ', 'ㄷ'];

    $("#result1").text(arr1);
    $("#result2").text(arr1);
    $("#result3").text(arr2);
    $("#result4").text(arr3);

    // slice 함수
    $("#slice").click (() => {
        console.log(arr1);
        let arrSlice = arr1.slice(1, 4);
        $("#result1").text(arrSlice);
        console.log(arrSlice);
        console.log(arr1);
    })

    // concat 함수
    $("#concat").click(() => {
        console.log(arr1);
        console.log(arr2);
        console.log(arr3);
        let arrConcat = arr1.concat(arr2, arr3);
        $("#result5").text(arrConcat);
        console.log(arrConcat);
    })
</script>

 

 

 

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'Spring-Java > Front-End' 카테고리의 다른 글

Day44_계산기, ATM 예제  (0) 2023.10.21
Day43_객체  (0) 2023.10.21
Day41_자바스크립트, 자료형, 변수와 함수(addEventListener, jQuery)  (1) 2023.10.21
Day40_상속, 넘침  (0) 2023.10.16
Day39_입력 태그, 선택자  (2) 2023.10.15

관련글

티스토리툴바