day07~08

📌 배열이란?

• 변수를 그룹으로 묶는 형태의 한 종류로써, 사물함
  같은 형태를 갖고 있다.
• 하나의 배열안에는 같은 종류(데이터 형)의 값들만
  저장될수 있지만, javascript는 데이터형의 선언을 별도로
  하지 않기 떄문에 데이터형에 대한 제약은 없다.

📌 배열을 만드는 방법

let myarray = new Array(값1, 값2, ...);

let myarray = [값1, 값2, ...];

📌 인덱스 번호를 갖는 데이터 저장소

• 생성된 배열은 각각의 칸은 0부터 일련번호가
  지정된다.(일련번호 = 배열의 인덱스)

let myarray = ["웹표준", "HTML5/CSS3", "반응형 웹"];

📌 배열 데이터의 접근

• 배열이름[일련번호]

📢 1차원 배열의 예시 (1)

<script>
        let myarray = ["HTML","CSS","javaScript"];

        document.write("<h1>" + myarray[0] + "</h1>");
        document.write("<h1>" + myarray[1] + "</h1>");
        document.write("<h1>" + myarray[2] + "</h1>");

        myarray[0] = "java";
        myarray[1] = "jsp";
        myarray[2] = "spring boot";

        document.write("<h1>" + myarray[0] + "</h1>");
        document.write("<h1>" + myarray[1] + "</h1>");
        document.write("<h1>" + myarray[2] + "</h1>");

    </script>

💡 결과값

📢 1차원 배열의 예시 (2)

	<script>
        // 빈 배열을 생성
        let myarray = new Array();
        let myarray2 = [];

        for( let i = 0; i<10; i++){
            myarray[i] = i;
        }

        document.write("배열의 길이 : " + myarray.length);

        // 출력

        for( let i = 0; i<myarray.length; i++){
            document.write("<p>" + myarray[i] + "</p>");
        }
    </script>

💡 결과값

📌 2차 배열

📢 2차 배열의 생성 방법

• 2차 배열을 1차 배열을 생성하면서 각각의 여서러 새로운 배열을
  포함시키는 형태로 생성한다.

let myarray = new Array(
new Array(값1, 값2, ...),
new Array(값1, 값2, ...)
);

let myarray = [
[값1, 값2, ..],
[값1, 값2, ..]
];

📢 배열의 사용

• 배열이름[행][열]
• 인덱스값은 0 부터 시작된다.

📢 배열의 길이

• 행 : 배열이름.length;
• 열 : 배열이름[n].legnth;

📢 2차원 배열 예시

	<script>
        let myarray = [
            ['웹표준','HTML5/CSS3','반응형 웹'],
            ['Javascript','jQuery', 'Ajax']
        ];


        for( let i = 0; i<myarray.length; i++){
            for(let j = 0; j<myarray[i].length; j++){
                document.write("<p>" + myarray[i][j] + "</p>");
            }
        }
    </script>

💡 결과값

[0,0],[0,1][0,2] 	[웹표준],[HTML5/CSS3],[반응형 웹]     
[1,0],[1,1],[1,1] => [Javascript],[jQuery],[Ajax]

📌 shift/unshift()

unshift()
파라미터값으로 전달한 값을 배열의 첫번째 원소로
추가하고 기본 값들은 index를 1씩 증가시킨다.
shift()
배열의 첫번쨰 원소를 제거하는 방법

	<script>
        let li = ['a','b','c','d','e'];
        document.write(li); // a,b,c,d,e
        // unshift()
        // 파라미터값으로 전달한 값을 배열의 첫번째 원소로
        // 추가하고 기본 값들은 index를 1씩 증가시킨다.
        li.unshift('z');
        document.write("<br>");
        document.write(li); // z,a,b,c,d,e

        /*
            배열의 첫번쨰 원소를 제거하는 방법
        */
       document.write("<br>");
       document.write(li.shift()); // 제거할 대상 출력 z
       document.write("<br>");
       document.write(li); // 결과값 출력 a,b,c,d,e
    </script>

💡 결과값

📌 pop()

: 배열의 끝점의 원소를 제거

<script>
        let li = ['a','b','c','d','e'];
        document.write(li); // a,b,c,d,e
     li.pop();
     document.write(li);
</script>

📌 reverse()

: 배열을 거꾸로 정렬

	 <script>
      let li = ['a','b','c','d','e'];
      document.write(li); // a,b,c,d,e
   li.pop();
   document.write(li);
	</script>

📌 indexOf()

배열의 값을 아는 경우에 해당 배열이 몇 번째
인덱스인지를 indexOf() 함수를 사용하여 확인

<script>
        let arr = ['사과', '딸기', '복숭아'];
        let arr2 = [5, 3, 0.5, 7, 2, 9];

        // 일반적인 배열 index를 통해 배열의 값 구하기
        document.write(arr[0] + "<br/>");
        document.write(arr2[3] + "<br/>");

        // 배열의 값을 아는 경우에 해당 배열이 몇 번째
        // 인덱스인지를 indexOf() 함수를 사용하여 확인
        document.write(arr.indexOf("딸기") + "<br/>");
        document.write(arr2.indexOf(0.5) + "<br/>");
    </script>

💡 결과값