[JavaScript] JavaScript – Array 메서드 사용 방법
- 웹 프로그래밍/JavaScript
- 2020. 12. 29. 00:00
안녕하세요.
오늘은 JavaScript에서 Array 메서드 사용하는 방법에 대해서 알려 드리려고 합니다.
Array 객체는 배열 즉, 정렬된 값들의 집합을 표현해 줄 때 사용하는 객체인데요.
앞서서 JavaScript에서 배열에 대해서 공부를 했었는데요. 그 개념과 동일하다고 생각 하시면 되겠습니다.
그럼 JavaScript에서 기본으로 제공해 주고 있는 Array 메서드들에 대해서 한번 예제 코드를 통해서 어떤 것들이 있는지 알아 보도록 하겠습니다.
예제 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<html>
<head>
<title>HTML 제목 - 범범조조</title>
<meta charset="utf-8">
<style>
h1{
color: blue;
background-color: burlywood;
}
h2{
color: red;
}
</style>
</head>
<body>
<h1>Array 메서드들 사용방법</h1>
<br/>
<h2>push 메서드</h2>
<script>
var arr = [1, true, "범범조조"];
document.write(arr.length + "<br>");
//push 메서드 사용하여 배열 요소 추가
arr.push("BeomBeomJoJo");
document.write(arr.length + "<br>");
for(var idx = 0; idx < arr.length; idx++){
document.write(arr[idx] + "<br>");
}
</script>
<br/>
<h2>pop 메서드</h2>
<script>
var arr = [1, true, "범범조조"];
document.write(arr.length + "<br>");
//pop 메서드 사용하여 배열 요소 제거
document.write(arr.pop() + "<br>");
document.write(arr.length + "<br>");
for(var idx = 0; idx < arr.length; idx++){
document.write(arr[idx] + "<br>");
}
</script>
<br/>
<h2>reverse 메서드</h2>
<script>
var arr = [1, true, "범범조조"];
document.write("rever 전 : " + arr + "<br>")
document.write("reverse 후 : " + arr.reverse() + "<br>");
</script>
<br/>
<h2>sort 메서드</h2>
<script>
var arr = ["나", "가", "바", "라", "마", "다", "사"];
var numArr = [1, 2, 43, 19, 3, 45, 100];
document.write(arr.sort() + "<br>"); //sort 메서드는 알파벳 순서에 따라만 정렬
document.write(numArr.sort() + "<br>"); //sort 메서드는 배열 요소를 문자열로 봐서 숫자는 정렬 안됨
</script>
<br/>
</body>
</html>
|
cs |
실행 결과
위와 같이 JavaScript 기본으로 제공해주는 Array 메서드들을 사용해 값들을 출력해 보았습니다.
감사합니다.^^
728x90
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] JavaScript – DOM 요소 선택하기 (0) | 2020.12.31 |
|---|---|
| [JavaScript] JavaScript – Array를 반복적으로 참조하는 메서드 (0) | 2020.12.30 |
| [JavaScript] JavaScript – reduce 함수 (0) | 2020.12.29 |
| [JavaScript] JavaScript – Arrow Function(화살표함수) 사용 방법 (0) | 2020.12.28 |
| [JavaScript] JavaScript String(문자열) 메서드 사용하기 (0) | 2020.12.28 |
