** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요!
https://www.youtube.com/watch?v=lAnrCuVxNWc
* 기본내장객체
| 종류 | 설명 |
| String | 문자열 객체 |
| Number | 숫자 객체 |
| Math | 수학 객체 |
| Array | 배열 객체 |
| Date | 날짜시간객체 |
- 기본내장객체는 첫글자를 대문자로 작성하는 것이 규칙
1. Array 객체 선언
- 배열은 값을 여러개 나열해서 담는 공간을 의미합니다.
1) 변수식 선언
## 문법
var 변수명 = [값1, 값2,...];
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Array 객체</title>
<script>
var arr01 = [10,20,30];
document.write(arr01 + '<br>');
//typeof(값) : 값(데이터)의 유형을 반환
document.write(typeof(arr01));
</script>
</head>
<body>
</body>
</html>- 변수 arr01에 10, 20, 30이라는 값을 나열해서 담았습니다.
- 결과값을 문서에 출력하고, 값의 타입도 알아보는 코드를 작성하였습니다.
## 코드 결과
- 값은 10,20,30을 잘 반환하였고, 값의 유형을 object로 객체로 나오는 것을 확인할 수 있습니다.
2) 생성자 함수를 이용한 객체식 선언
- 기본내장객체는 미리 선언되어 있어 생성자 함수를 통해 호출해서 사용하면 됩니다.
## 문법
var 변수명 = new Array(값1, 값2, 값3);
## 예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Array 객체</title>
<script>
var arr02 = new Array(10,20,30);
document.write(arr02 + '<br>');
//typeof(값) : 값(데이터)의 유형을 반환
document.write(typeof(arr02));
</script>
</head>
<body>
</body>
</html>
## 코드 결과
- 결과는 위와 동일합니다.
- 다른 기본내장객체는 보통 변수식 선언을 선호하나 Array같은 경우는 둘다 선호합니다.
3) Array객체의 일부값 호출
- 객체 전체를 호출하면 전체값을 호출하지만, Array는 일부값을 호출할 수 있습니다.
## 문법
배열명[인덱스번호];- 첫번째값의 배열번호는 0번입니다.
- 자바스크립트는 인덱스번호를 0번부터 시작합니다.
## 예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Array 객체</title>
<script>
//소녀시대 배열
var ss = ['윤아','수영','효연','서현','유리','티파니','태연','써니','제시카'];
//전체호출 : 배열명
document.write('소녀시대 멤버 : ' + ss + '<br>');
//일부호출 : 배열명[인덱스번호]
document.write('태티서 멤버 : ' + ss[6]+ss[5]+ss[3]);
</script>
</head>
<body>
</body>
</html>- 소녀시대 멤버를 배열값을 담아봤습니다.
- 처음에는 모든 멤버를 출력하고, 그 다음에는 태티서멤버만 출력해보겠습니다.
## 코드 결과
- 원하는대로 결과가 잘 도출되는 것을 확인할 수 있습니다.
2. Array 객체 속성
- 모든 객체는 속성과 메서드를 갖고 있습니다.
- 물론 경우에 따라 속성만 갖고 있을수도, 메서드만 갖고 있을수도 있습니다.
1) length 속성
- length속성은 배열 값의 개수를 반환하는 속성입니다.
## 문법
Array객체.length;
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Array 객체</title>
<script>
//소녀시대 배열
var ss = ['윤아','수영','효연','서현','유리','티파니','태연','써니','제시카'];
//length : 배열의 개수를 반환하는 속성
//소녀시대는 X명입니다.
document.write('과거 소녀시대는 ' + ss.length + '명입니다.<br>');
ss = ['윤아','수영','효연','서현','유리','티파니','태연','써니'];
document.write('현재 소녀시대는 ' + ss.length + '명입니다.<br>');
</script>
</head>
<body>
</body>
</html>- 소녀시대 멤버는 9명이었습니다.
- 하지만 멤버가 추가될 수도 있고, 누군가는 빠질 수도 있습니다.
- 그래서 9라는 상수를 적으면 안되고, 값의 개수를 확인하면 됩니다.
## 코드 결과
- 결과가 잘 도출되는 것을 확인할 수 있습니다.
3. Array 객체 메서드
- 메서드는 많이 있습니다. 표를 통해 전체적으로 정리 후 아래 몇개만 예제로 보도록 하겠습니다.
| 메서드 종류 | 설명 |
| concat(a,b,..) | 매개변수로 입력한 배열의 요소를 모두 합쳐 배열을 만들어 반환 |
| indexOf(a) | 매개변수 a가 배열 중 몇번째 있는지 인덱스번호로 반환 |
| join() | 배열값을 문자열로 반환 |
| map(콜백함수) | 배열의 모든 값을 콜백함수에서 호출한 결과로 새 배열로 반환 |
| pop() | 배열의 마지막 요소를 제거하고 반환 |
| push(a) | 배열의 마지막 부분에 새로운 요소(매개변수인 a)를 추가 |
| reverse() | 배열의 요소 순서를 뒤집음 |
| shift() | 배열의 첫번째 요소를 제거하고 반환 |
| slice(start,end) | 배열 요소에서 매개변수로 지정한 부분을 리턴 |
| sort() | 배열의 요소를 정렬 |
| splice(separator,limit) | 배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴 |
| unshift(a) | 배열의 첫번째 부분에 새로운 요소(매개변수인 a)를 추가 |
1) concat()
- 객체선택된 배열과 매개변수의 배열을 합치는 메서드입니다.
## 문법
Array객체.concat(다른배열명);
## 예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Array 객체</title>
<script>
//소녀시대 배열
var ss = ['윤아','수영','효연','서현','유리','티파니','태연','써니','제시카'];
var rv = ['웬디','아이린','슬기','조이','예리'];
document.write(ss.concat(rv));
</script>
</head>
<body>
</body>
</html>
## 코드 결과
2) 요소 제거메서드
- pop() : 맨 뒤의 요소를 제거하는 메서드입니다.
- shift() : 맨 앞의 요소를 제거하는 메서드입니다.
## 문법
Array객체.pop();
Array객체.shift();
## 예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Array 객체</title>
<script>
//소녀시대 배열
var ss = ['윤아','수영','효연','서현','유리','티파니','태연','써니','제시카'];
document.write('처음배열 : ' + ss + '<br>');
ss.pop(); //제시카제거
document.write('맨뒤제거 : ' + ss + '<br>');
ss.shift(); //윤아제거
document.write('맨앞제거 : ' + ss + '<br>');
</script>
</head>
<body>
</body>
</html>
## 코드 결과
3) 요소 추가메서드
- push() : 맨 뒤의 요소를 추가하는 메서드입니다.
- unshift() : 맨 앞의 요소를 추가하는 메서드입니다.
## 문법
Array객체.push(요소);
Array객체.unshift(요소);
## 예시코드
4) 요소 정렬메서드1 - 문자열 정렬
- sort() : 요소들을 오름차순 정렬하는 메서드입니다.
- reverse() : 요소들의 순번을 뒤집는 메서드입니다.
- 오름차순 : 문자가 올라가는 형태로 정렬됩니다. ex) 가 => 하, A => Z
- 내림차순 : 문자가 내려가는 형태로 정렬됩니다. ex) 하 => 가, Z => A
## 문법
Array객체.sort();
Array객체.reverse();
## 예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Array 객체</title>
<script>
//소녀시대 배열
var ss = ['윤아','수영','효연','서현','유리','티파니','태연','써니','제시카'];
document.write('처음배열 : ' + ss + '<br>');
//오름차순 : 가 => 하, A => Z
//sort() : 정렬메서드
ss.sort();
document.write('오름차순정렬 : ' + ss + '<br>');
//내림차순 : 하 => 가, Z => A
//reverse() : 값의 배열을 반전시키는 메서드
//sort()로 오름차순 정렬 후 뒤집으면 내림차순
ss.reverse();
document.write('내림차순정렬 : ' + ss + '<br>');
</script>
</head>
<body>
</body>
</html>
## 코드 결과
- 멤버들이 이름별로 잘 정렬되어 있는 것을 확인할 수 있습니다.
5) 요소 정렬메서드2 - 숫자 정렬
- sort() : 요소(숫자)들을 정렬하는 메서드입니다.
## 문법
//오름차순
Array객체.sort(function(a,b){
return a - b;
});
//내림차순
Array객체.sort(function(a,b){
return b - a;
});- 콜백함수(function(){})내부에 있는 매개변수명은 이름이 달라도 됩니다.
- a를 left로 써도되고, b를 right로 써도 됩니다.
- 매개변수는 개발자가 스스로 이해하게끔 작성하면 됩니다.
## 예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Array 객체</title>
<script>
//2. 숫자의 정렬
var nums = [7, 11, 33, 4, 21];
document.write('처음배열 : ' + nums + '<br>');
//sort() : 배열의 정렬메서드
nums.sort(); //매개변수 없이 정렬하면 문자열 정렬
document.write('sort() : ' + nums + '<br>'); //문자처럼인식 - 11,21,33,4,7
//숫자의 오름차순
nums.sort(function(a,b){ //매개변수이름은 임의적으로 작성
return a - b; //앞매개변수 - 뒷매개변수
});
document.write('오름차순배열 : ' + nums + '<br>');
//숫자의 내림차순
nums.sort(function(a,b){
return b - a; //뒷매개변수 - 앞매개변수
});
document.write('내림차순배열 : ' + nums + '<br>');
</script>
</head>
<body>
</body>
</html>
## 코드 결과
- 콜백함수 없이 sort()로만 처리하면 배열요소를 문자로 받아들여 정렬이 위와 같이 이상하게 처리됩니다.
- 그래서 숫자 정렬은 sort()의 콜백함수를 매개변수로 사용하여 작성해주세요.
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 14강 BOM - window객체 - 오쌤의 니가스터디 (0) | 2021.06.04 |
|---|---|
| [JS강좌] 13강 자바스크립트 로또 자동만들기 - 오쌤의 니가스터디 (8) | 2021.06.04 |
| [JS강좌] 11강 자바스크립트 기본내장객체 - Number와 Math - 오쌤의 니가스터디 (0) | 2020.12.02 |
| [JS강좌] 10강 자바스크립트 기본내장객체 - String (0) | 2020.12.01 |
| [JS강좌] 9강 자바스크립트 객체와 생성자함수 - 오쌤의 니가스터디 (0) | 2020.11.30 |
