▶ 자바스크립트의 배열이란?
프로그램에서 이야기하는 변수를 그룹으로 묶은 형태의 한 종류로서, 사물함 같은 형태를 가지고있다.
자바스크립트에서는 데이터형의 선언을 별도로 하지 않기 때문에 데이터 형에 대한 제약이 없다. 그러나 당연히 한종류만의 데이터형만을 저장하는 것이 바람직하다.
▶ 1차배열
1)배열 생성 방법
let myarray = new Array(값1,값2 ... , 값n);
let myarray = [값1.값2.값3 ... 값n];
2)인덱스 번호를 가지는 데이터 저장소
생성된 배열은 사물함과 같이 각각의 칸에 값들이 저장되고, 각각의 칸은 0부터 일련번호가 지정된다. 즉, 일련번호가 배열의 인덱스인 것이다.
3)배열 데이터의 접근
생성된 배열의 값에는 "배열이름 [ 일련번호 ] " 형식으로 접근할 수 있다.
let lang = myarray [0]; // myarray배열의 0번째 값 빼오기
myarray[2] = "html" ; // myarray배열의 2번째에 값 추가하기
4)빈 배열
아무런 값이 저장되어있지 않은 형태로 만든 후, 하나씩 값을 채워 나가는 방법도 가능하다.
//빈 배열 선언방법
let myarray = new Array();
let myarray = [];
//빈 배열에 값 할당방법
myarray[0] = "java";
myarray[1] = "jsp";
5) 배열 예시
*배열의 선언과 값 읽기
1
2
3
4
5
6
7
8
9
|
let myarray = new Array("html", "javascript","jsp");
// *아래방법으로도 가능*
// new myarray = ["html", "javascript","jsp"];
//값 읽기
document.write("<h1>" + myarray[0] + "</h1>");
document.write("<h1>" + myarray[1] + "</h1>");
document.write("<h1>" + myarray[2] + "</h1>");
|
cs |
*배열에 저장된 값 할당과 값 읽기
1
2
3
4
5
6
7
8
9
|
//배열에 저장된 값 할당
myarray[0] = "java"
myarray[1] = "spring"
myarray[2] = "spring boot"
//값 읽기
document.write("<h1>" + myarray[0] + "</h1>");
document.write("<h1>" + myarray[1] + "</h1>");
document.write("<h1>" + myarray[2] + "</h1>");
|
cs |
*빈배열에 반복문을 사용하여 값 할당과 출력
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//빈배열을 선언함
let myarray = new Array();
//반복문을 통해 빈배열에 값을 저장하기
for(let i = 0; i< 10; i ++){
myarray[i] = i;
}
//출력
for(let i = 0; i<myarray.length; i ++){
document.write("<p>"+myarray[i]+"</p>");
}
|
cs |
▶ 2차배열
1) 배열 생성 방법
let myarray = new Array(
new Array(값1, 값2, 값3 .... 값n), //0행
new Array(값1, 값2, 값3 .... 값n) //1행
);
let myarray = [
[값1, 값2, 값3 ... 값n], //0행
[값1, 값2, 값3 ... 값n] //1행
];
2) 2차배열의 사용
생성된 배열의 값에는 "배열이름[행][열]"형식으로 접근할 수 있다. 행, 열의 인덱스 값은 "0"부터 시작한다.
*크기조회
//행의 크기 조회
배열객체이름.length;
//N번째 행에 대한 "열의" 크기를 조회
배열객체이름[n].length;
*2중 for문을 사용한 값 출력 예시
1
2
3
4
5
6
7
8
9
10
|
let myarray = new Array(
new Array('0','1','2'),
new Array('e','f','d')
);
for(i = 0; i<myarray.length; i++){
for(j = 0; j<myarray[i].length; j++){
console.log(myarray[i][j]);
}
}
|
cs |
▶ 배열응용함수
1) index
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
let arr = ["사과", "딸기", "복숭아"];
let arr2 = [5,3,1,7,2,9]
//indexOf : 특정문자위치찾기
document.write(arr[0]); //사과
document.write(arr2[3]); //7
//배열의 값을 아는 경우에 해당 배열의 몇번째 인덱스인지
//indeOf 함수를 사용하여 구할 수 있다
document.write(arr.indexOf("복숭아")); //2
document.write(arr2.indexOf(2)); //4
//해당값이 없을 경우 -1을 출력하여 none을 알려준다.
document.write(arr.indexOf("포도")); //-1
document.write(arr2.indexOf(11)); //-1
|
cs |
2) arr & push
1
2
3
4
5
6
7
|
let arr = ['apple', 'banana'];
document.write('arr: '+ arr); //apple, banana
arr.push('orange');
document.write('arr: ' + arr); //apple, banana, orange
|
cs |
배열의 이름(arr)을 그대로 넣어주면 안의 내용이 일괄적으로 모두 출력이 되고, push 라는 명령어를 넣어 arr.push('내용')을 넣으면 ( ) 안의 내용이 해당 배열로 데이터가 추가된다.
▶ 배열 연습문제
문제1.
"이재영"이 s배열안에서 몇번 출력되는지 확인하라
let s = ['이유덕', '이재영', '권종표', '이재영', '박민호', '강상희', '이재영', '김지완', '최승혁', '이성연', '박영서', '박민호', '전경헌', '송정환', '김재성', '이유덕', '전경헌'];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
let s = ['이유덕', '이재영', '권종표', '이재영', '박민호',
'강상희', '이재영', '김지완', '최승혁', '이성연', '박영서',
'박민호', '전경헌', '송정환', '김재성', '이유덕', '전경헌'];
function naming( param ){
let name = param;
let count = 0;
for(let i = 0; i<s.length; i++){
if(s[i] == name){
count++;
}
}
return name + "->>" + count;
}
document.write(naming('이재영'));
|
cs |
문제2.
s배열안의 중복을 모두 제거하고 출력하라
let s = ['이유덕', '이재영', '권종표', '이재영', '박민호', '강상희', '이재영', '김지완', '최승혁', '이성연', '박영서', '박민호', '전경헌', '송정환', '김재성', '이유덕', '전경헌'];
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
|
let s = ['이유덕', '이재영', '권종표', '이재영', '박민호',
'강상희', '이재영', '김지완', '최승혁', '이성연', '박영서',
'박민호', '전경헌', '송정환', '김재성', '이유덕', '전경헌'];
function naming(param){
let uniq =[];
for(let i = 0; i<s.length; i++){
let uni_count = 0;
for(let j =0; j<s.length; j++){
if(s[i]==s[j]){
uni_count++;
}
}
if(uni_count < 2){
uniq.push(s[i]);
}
}
return uniq;
}
document.write(naming());
|
cs |
'국비필기노트 > HTML & CSS & JS' 카테고리의 다른 글
JS_여러가지함수들(기본함수, date, setInterval, 현재시각출력) (0) | 2022.05.11 |
---|---|
JS_주요 내장 함수 (0) | 2022.05.10 |
JS_함수(function) 호출방법 (0) | 2022.05.10 |
JS_변수의 종류 (0) | 2022.05.10 |
JS_함수의 유효범위(Scope) (0) | 2022.05.10 |