Hello, Android!

자바스크립트 배열, 배열 관련 함수 본문

JavaScript

자바스크립트 배열, 배열 관련 함수

lwndnjs93 2018. 11. 22. 15:29

자바스크립트의 배열 생성은 여러가지 방법이 있다


첫번째로 new를 사용하는 방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = new Array()
 
        arr00[0] = 100
        arr00[2] = 4000
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs


위의 배열의 출력 결과 arr00의 0번 2번에만 값이 있기 때문에 100,,4000 라는 결과가 나온다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = new Array(1,2,3,4,5,6,7,8,9,10)
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs


new를 통해 배열의 생성과 동시에 값을 넣어준다 출력 결과 1,2,3,4,5,6,7,8,9,10 이 나온다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [1,2,3,4,5,6,7]
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs


변수 선언과 동시에 바로 배열의 형태로 값을 넣어준다 출력 결과 1,2,3,4,5,6,7이 나온다


배열의 길이를 구할때는 배열명.length를 사용하여 길이를 구한다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [1,2,3,4,5,6,7]
 
        document.write(arr00.length)
 
        </script>
    </body>
</html>
 
cs

배열의 arr00의 원소가 1,2,3,4,5,6,7 이기 때문의 출력 결과 arr00의 길이인 7이 나온다


배열에 원소를 추가하는 push함수 배열명.push('값') 의 형태로 사용하며 배열의 가장 뒤에 추가된다

, 를 이용하여 한번에 여러 원소를 추가할 수 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [1,2,3,4,5,6,7]
 
        arr00.push(100)
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 

cs

arr00에 100이 추가되어 출력결과 1,2,3,4,5,6,7,100 이나온다


배열에 다른 배열의 원소를 추가할때는 concat을 이용한다

예를들어 a배열에 b,c배열의 원소를 추가할때는 a = a.concat(b,c)

concat은 a배열원소의 뒤에 b,c,배열의 원소를 순서대로 추가한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [1,2,3,4,5,6,7]
        var arr01 = [0,1,0,1,0,1,0,1]
        var arr02 = [1,2,1,2,1,2,1,2]
 
        arr00 = arr00.concat(arr02, arr01)
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs


배열의 가장 앞자리에 원소를 추가할때는 unshif를 이용한다

a원소의 가장 앞자리에 100 을 추가할때는 a.unshift(100) 을 한다

새로 추가된 100이 0번 인덱스에 들어오며 원래 있던 원소들은 한칸씩 뒤로 밀려난다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [1,2,3,4,5,6,7]
 
        arr00.unshift(100)
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs


범위를 지정하여 원소를 제거할때는 splice를 사용한다 splic(x, y, z)

splice는 배열의 z(제거 시작 인덱스값)번 인덱스 부터 y(제거 끝 인덱스값)번까지의

원소들을 제거하고 첫번째 원소의 뒤에 z(추가할 원소값)을 넣는다

추가할 원소값이 여러개인 경우 , 를 이용하여 여러개를 추가한다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [1,2,3,4,5,6,7]
 
        arr00.splice(1,3,1000)
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs


arr00 배열의 1번인덱스 부터 3번인덱스 까지의 원소를 제거하고 

첫번째 인덱스 뒤에 1000을 넣었기때문에

출력값은 1, 1000, 5, 6, 7 이 된다

특정 인덱스(2번 인덱스)를 삭제하기 위해서는 arr00.splice(2,1)


배열의 0번 인덱스의 요소를 제거할 때는 shift를 사용한다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [1,2,3,4,5,6,7]
 
        arr00.shift()
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs


반대로 매열의 가장 마지막 인덱스의 요소를 제거할 때는 pop을 사용한다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [1,2,3,4,5,6,7]
 
        arr00.pop()
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs


배열을 정렬할때 오름차순으로 정렬할 때는 sort를 사용한다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [9,3,7,5,1]
 
        arr00.sort()
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs


배열을 역순으로 출력할 때는 reverse함수를 사용하한다

배열의 가장 마지 인덱스의 막원소 부터 0번 인덱스의 요소 순서로 출력한다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
 
        var arr00 = [10,9,8,7,6,5,4,3,2,1]
 
        arr00.reverse()
 
        document.write(arr00)
 
        </script>
    </body>
</html>
 
cs



'JavaScript' 카테고리의 다른 글

상속, 프로토타입  (0) 2018.11.26
객체 생성자 new  (0) 2018.11.22
자바스크립트 객체  (0) 2018.11.22
'JavaScript' Related Articles more