티스토리 뷰

코딩 공부/생활 코딩

생활 코딩 - 배열

찬찬잉 2021. 8. 17. 00:21

배열 = 그릇

 

배열은 [ 시작해서 ] 끝나야한다.

 

변수에 많은 값을 담을 수 있다.

 

원소와 색인 (index)

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        var member = ['egoing', 'k8805', 'sorialgi']
        
        alert(member[0]);
        alert(member[1]);
        alert(member[2]);
    </script>
</body>

</html>
egoing k8805 sorialgi

여러개 값들 중에 리턴

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        function get_members() {
            return ['egoing', 'k8805', 'sorialgi'];
        }
        var members = get_members();
        document.write(members[0]);
        document.write(members[1]);
        document.write(members[2]);
    </script>
</body>

</html>

인덱스 값을 기억하는것은 불가능하다. 그렇기때문에 배열에 담겨있는 값들을 하나하나 꺼내서 꺼내진 값들을 가공하는것이 배열의 핵심이다.

 

반복문과 함께 사용된다면?

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        function get_members() {
            return ['egoing', 'k8805', 'sorialgi'];
        }
        members = get_members();
        // members.length는 배열에 담긴 값의 숫자를 알려준다. 
        for (i = 0; i < members.length; i++) {
            // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
            document.write(members[i].toUpperCase());
            document.write('<br />');
        }
    </script>
</body>

</html>
EGOING
K8805
SORIALGI
<!DOCTYPE html>
<html lang="ko">

<head>
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        function get_members() {
            return ['egoing', 'k8805', 'sorialgi'];
        }
        members = get_members();

        for (var i = 0; i < 3; i++) {
            document.write(members[0].toUpperCase() + "<br />");
        }

        document.write(members[0].toUpperCase() + "<br />");
        document.write(members[1].toUpperCase() + "<br />");
        document.write(members[2].toUpperCase() + "<br />");
    </script>
</body>

</html>
EGOING
EGOING
EGOING
EGOING
K8805
SORIALGI

가변적으로 바뀌는 예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        function get_members() {
            return ['egoing', 'k8805', 'sorialgi'];
        }
        members = get_members();

        for (var i = 0; i < 3; i++) {
            document.write(members[i].toUpperCase() + "<br />");
        }
    </script>
</body>

</html>
EGOING
K8805
SORIALGI

e라는 데이터 뒤에 f가 추가되어서 나타난다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        var li = ['a', 'b', 'c', 'd', 'e'];
        li.push('f');
        alert(li);
    </script>
</body>

</html>

unshift 앞에 추가할 수 있는 명령어

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        var li = ['a', 'b', 'c', 'd', 'e'];
        li.unshift('z');
        alert(li);
    </script>
</body>

</html>
unshift 배열의 시작지점으로 추가하는것

push 맨 뒤에 추가
unshift 맨 앞에 추가
concat 배열 데이터를 맨 뒤에서부터 추가 (단, 새로운 변수에 넣어주어야 함)
splice n번째 인덱스 부터 n개의 인덱스까지 삭제 후 새로운 데이터 추가
shift 맨 앞 삭제
pop 맨 뒤 삭제
sort 오름차순(응용해서 쓰는 방법은 JS사전 참고!)
reverse 내림차순

'코딩 공부 > 생활 코딩' 카테고리의 다른 글

생활 코딩 - 유효범위  (0) 2021.08.18
생활 코딩 - 객체  (4) 2021.08.17
생활 코딩 - 함수  (0) 2021.08.16
생활 코딩 - 반복문  (0) 2021.08.16
생활 코딩 - 조건문  (0) 2021.08.15

UP NEXT : 코딩 공부/생활 코딩

댓글
© 2022 chanchaning