본문 바로가기

국비필기노트/HTML & CSS & JS

JS_배열

▶ 자바스크립트의 배열이란?

 

프로그램에서 이야기하는 변수를 그룹으로 묶은 형태의 한 종류로서, 사물함 같은 형태를 가지고있다.

 

자바스크립트에서는 데이터형의 선언을 별도로 하지 않기 때문에 데이터 형에 대한 제약이 없다. 그러나 당연히 한종류만의 데이터형만을 저장하는 것이 바람직하다.

 

▶ 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