모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다.

자바스크립트 내장객체 관련글 :  [문돌이의 IT/JavaScript] - 자바스크립트 내장객체(2)

    [문돌이의 IT/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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내장객체</title>
<script>
 
/*
Array 객체
*/
var array = ['a','b','c','c'];
 
var output = '';
 
for (var i = 0; i < array.length; i++) {
    output += i + ' : ' + array[i] + '\n';
}
 
alert(output);
 
</script>
</head>
<body>
 
</body>
</html>
cs


Array 객체의 메서드

concat() : 배열의 요소를 합쳐서 리턴

join() : 배열 안의 모든 요소를 문자열로 만들어 리턴

sort() : 배열의 요소를 정렬

slice() : 배열의 지정한 부분을 리턴

push() : 배열의 마지막 부분에 새로운 요소를 추가


sort() 사용 시 주의사항

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내장객체</title>
<script>
 
/*
Array 객체 Sort 사용 시 주의사항
결과]
11, 2, 21, 3
*/
var array = [3, 2, 11, 21];
 
array.sort();
 
alert(array);
 
</script>
</head>
<body>
 
</body>
</html>
cs


원하는대로 숫자가 정렬되지 않는 이유는 sort가 문자열 기준으로 정렬하기 때문이다. 

정렬은 대부분 숫자를 정렬하는 경우가 많으므로 아래와 같이 작성하면 된다. 


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내장객체</title>
<script>
 
/*
Array 객체 Sort 사용 시 주의사항
결과]
2, 3, 11, 21
*/
var array = [3, 2, 11, 21];
 
array.sort(function (left, right) {
    return left - right;     // 오름차순 정렬
    // return right - left; // 내림차순 정렬
});
 
alert(array);
 
 
 
</script>
</head>
<body>
 
</body>
</html>
cs




이전의 예제를 활용한 응용이다.

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sort 메서드의 활용 </title>
<script>
 
/*
sort 메서드의 활용
*/
 
function makeStudentInfo (name, korean, math, english) {
    var willReturn = {
        이름 : name,
        국어 : korean,
        수학 : math,
        영어 : english,
        
        // create method
        getSum : function () {
            return this.국어 + this.수학 + this.영어;
        },
        
        getAverage : function () {
            return this.getSum() / 3;
        },
        
        toString : function (){
            return this.이름 + '  ' + this.getSum() + '  ' + this.getAverage();
        }
    };
    return willReturn;
}
 
var students = [];
var output = '';
 
students.push(makeStudentInfo('ㄱㄱㄱ', 100, 90, 80));
students.push(makeStudentInfo('ㄴㄴㄴ', 90, 90, 80));
students.push(makeStudentInfo('ㄷㄷㄷ', 80, 90, 80));
students.push(makeStudentInfo('ㄹㄹㄹ', 70, 90, 80));
students.push(makeStudentInfo('ㅁㅁㅁ', 60, 90, 80));
 
// 정렬하고 1~3등 까지만 출력
students.sort(function (left, right){
    return right.getSum() - left.getSum();
});
 
students = students.slice(0, 3);
 
for (var i in students) {
    output += students[i].toString() + '\n';    
}
 
alert(output);
 
</script>
</head>
<body>
 
</body>
</html>
cs


Array 객체 요소제거 

Array 객체의 메서드에는 특정 요소를 제거하는 메서드가 따로 없다. so, splice() 메서드를 활용한다.


Array 객체와 관련해서 push() 메서드, pop() 메서드, splice() 메서드 정도는 잘 알아두는 게 좋다. 


퇴사 관련 이야기들을 모아 책으로 출판했습니다. 

아래 링크에서 전체 목차를 읽어보세요!

대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659



아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.

http://www.bookk.co.kr/community/postscript

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

'문돌이의 IT > JavaScript' 카테고리의 다른 글

ECMAScript5 Json 객체  (0) 2017.10.17
ECMAScript5 Array 객체  (0) 2017.10.16
자바스크립트 내장객체(2)  (0) 2017.10.14
자바스크립트 내장객체  (0) 2017.10.13
자바스크립트 상속  (0) 2017.10.12

+ Recent posts

티스토리툴바