배열(Array)

티스토리 뷰

Front-End Programming/JavaScript

배열(Array)

springpark 2025. 3. 18. 07:41

배열(Array)

객체의 종류 : 배열, 함수, 배열이나 함수가 아닌 객체

★ 배열

1. 배열(Array)

a. 여러 자료를 묶어서 활용할 수 있는 특수한 자료

b. 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형

c. [ ]를 사용하여 생성, 값은 쉼표(,)로 구분, [요소,요소,요소,....]

d. 배열 안에는 서로 다른 자료형을 담을 수 있음

e. 배열 안에는 배열이나 변수를 넣을 수도 있음

f. 자바스크립트는 배열의 길이가 고정이 아님

g. 배열의 값 : 요소

h. 요소의 순서를 인덱스 , 인덱스 : 0번부터 시작

i. 배열의 요소 값 읽기 : 배열명[인덱스]

비교 ) 자바의 배열은 같은 자료형만 담을 수 있음
자료타입[ ] 변수명 = new 자료타입[크기];
자료타입[ ] 변수명 = new 자료타입[ ]{값1,값2,...};
자료타입[ ] 변수명 = {값1,값2,값3,...}

2. 배열 선언

a. const 배열명 = [요소1,요소2,[요소3,요소4],...]

b. let 배열명 = [요소1,요소2,[요소3,요소4], ...]

3. 배열의 요소 개수

a. 배열명.length

let fruits =["사과","딸기", [10, 20], true, 30, "복숭아"];
fruits.length;   // 6

fruits[1]; // 딸기
fruits[2][1]; 10

4. 배열에 요소 추가

a. 배열 마지막에 요소 추가

배열명.push(요소)

<script>
    let fruits = ["apple","grape","peach"];
    document.write(fruits + "<br>"); // apple,grape,peach

    fruits.push("strawberry");
    document.write(fruits + "<br>"); 
              // apple,grape,peach,strawberry
 </script>

5. 특정 위치의 요소 변경

배열명[인덱스] = 요소(=value)

let fruits = ["apple","grape","peach"];
    document.write(fruits + "<br>"); // apple,grape,peach

    fruits.push("strawberry");
    document.write(fruits + "<br>"); 
                 // apple,grape,peach,strawberry

    fruits[1] = "melon"; 
    document.write(fruits + "<br>"); 
                 //apple,melon,peach,strawberry
    
    
    fruits[fruits.length] = "watermelon";
    document.write(fruits + "<br>"); 
    // apple,melon,peach,strawberry,watermelon

6. 배열의 요소 삭제

a. 마지막 요소 삭제

배열명.pop()

b. 첫 번째 요소 삭제

배열명.shift()

c. 중간 요소 삭제

배열명.splice(시작 인덱스,삭제할 요소의 개수)

배열명.splice(시작 인덱스) // 시작인덱스부터 끝까지 삭제

let del_fruits =["사과","포도","복숭아","딸기","수박","참외"];
document.write(del_fruits + "<br>");
    // 사과,포도,복숭아,딸기,수박,참외

del_fruits.pop();
document.write(del_fruits + "<br>");
    // 사과,포도,복숭아,딸기,수박

del_fruits.shift();
document.write(del_fruits + "<br>");
  //포도,복숭아,딸기,수박

del_fruits.splice(1, 3);
document.write(del_fruits + "<br>");
  //포도
del_fruits.push("키위");
del_fruits.push("오렌지")
del_fruits.push("레몬")
document.write(del_fruits + "<br>");
// 포도,키위,오렌지,레몬

del_fruits.splice(1);
document.write(del_fruits + "<br>"); 
         //포도

7. 배열에서 요소 찾기

a. 배열명.include(요소) : 찾는 요소가 있으면 true, 없으면 false 반환

b. 배열명.indexOf(요소) : 처음부터 찾아 '찾는 요소'가 있는 인덱스 반환,찾는 요소 없으면 -1을 반환

c. 배열명.lastIndexOf(요소) : 마지막부터 찾아 '찾는 요소'가 있는 인덱스 반환,찾는 요소 없으면 -1을 반환

let fruits = ["apple","grape","peach","melon","grape", "strawberry","grape","watermelon"];

document.write(fruits + "<br>");
//apple,grape,peach,melon,,grape,strawberry,grape,watermelon

document.write(fruits.includes("melon") + "<br>");  //true

document.write(fruits.indexOf("grape") + "<br>");  //1

document.write(fruits.lastIndexOf("grape") + "<br>");  //7

8. for of 반복문

a. for(let 반복변수 of 배열 또는 객체){

실행할 문장

}

b. for of 반복문 : 요소의 값을 반복할 때 사용

c. for(let 반복할_변수명 of 배열 또는 객체){실행할 문장}

d. for(const 반복할변수명 of 배열 또는 객체){실행할 문장}

e. for(var 반복할변수명 of 배열 또는 객체){실행할 문장}

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 자바스크립트에서 사용할 부분 */
    .li_color{
      list-style: none; /* 글머리 기호 없애기 */
      width: 300px; /* 가로 길이 */
      height: 50px; /* 세로 높이 */
      line-height: 50px; /* 줄간격, 수직(세로) 가운데 정렬 */
      text-align: center; /* 수평(가로) 가운데 정렬 */
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", function(){
      //1. 본문의 태그 읽어오기
      const div = document.querySelector("div");
      let arrFruit = ["사과","딸기","복숭아","포도"];

      //2. 본문의 <div></div>태그 안쪽에 <h2></h2>태그를 생성해서
      //   그 태그 안에 arrFruit배열의 과일이름 출력
      //  자바스크립트에서는 html 태그를 요소라 함
      for(let fruit of arrFruit){
        //<h2>사과</h2>  -> h2라는 태그를 만들기
        let h2 = document.createElement("h2"); //<h2></h2> 생성

        //<h2></h2>태그 안에 과일명 쓰기
        h2.textContent = fruit;

        //글자색을 녹색으로 변경
        h2.style.color = "green";

        //본문의 <div>태그 안에 위에서 생성한 <h2>태그 넣기
        div.appendChild(h2);
      }
       
    });
  </script>
</head>
<body>
  <div> <!-- 상자 -->
    <h1>과일 이름</h1> <!-- 제목 태그 -->
  </div>
  <br> <!-- 줄바꾸기 -->

  <ul>  <!-- 순서 없는 목록 태그 -->

  </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 자바스크립트에서 사용할 부분 */
    .li_color{
      list-style: none; /* 글머리 기호 없애기 */
      width: 300px; /* 가로 길이 */
      height: 50px; /* 세로 높이 */
      line-height: 50px; /* 줄간격, 수직(세로) 가운데 정렬 */
      text-align: center; /* 수평(가로) 가운데 정렬 */
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", function(){
      //1. 본문의 태그 읽어오기
      let ul = document.querySelector("ul");
      
      //2. 배열 생성
      let arrFruit=["사과", "딸기", "복숭아", "포도"];

      //3. 본문의 <ul> 태그 안에 <li> </li>태그를 삽입하기 위해서
      // <li></li>태그를 생성하고  그 태그 안에 스타일도 설정하고
      // arrFruit 배열에 있는 내용도 추가
      /*
          arrFruit 배열에 있는 요소를 <li></li> 안에 넣기
          1) 반복문을 사용해서 배열의 요소를 꺼내기
          2) <li></li> 태그 생성
          3) <li></li> 태그의 class 속성(스타일)을 설정
          4) 본문의 <ul></ul> 태그 안에  <li></li> 태그를 넣기
      */

      //3-1. 반복문 사용
      for(let i=0; i<arrFruit.length; i++){
          //3-2. <li></li> 태그 생성
        let li = document.createElement("li");

        //3-3. <li></li> 태그의 class 속성(스타일)을 설정
        li.setAttribute("class", "li_color"); //->js
           //<li class="li_color"></li>  -> html
          
          //3-3-1. 홀수 줄에는 cyan, 짝수 줄에는 pink로 배경색 넣기
          // 숫자 % 2 === 0 : 짝수, 숫자 % 2 === 1 : 홀수
          if(i % 2 === 1){
            li.style.backgroundColor = "cyan";
          }else{
            li.style.backgroundColor = "pink";
          }

        //3-4. <li></li> 태그 안에 arrFruit 배열 요소를 넣기
        li.textContent = arrFruit[i];
           //<li class="li_color">사과</li>

        //3-5. 본문의 <ul></ul> 태그 안에  <li></li> 태그를 넣기
        ul.appendChild(li);
           // <ul><li class="li_color"></li> </ul>

      }//end of for

       
    });
  </script>
</head>
<body>
  <ul></ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .li-color{
      list-style: none;
      width: 300px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", function(){
      const div = document.querySelector("div");
      let arrFruit = ["사과", "딸기", "복숭아", "포도"];

      for(const fruit of arrFruit){
        let h1 = document.createElement("h1");  // 문서객체 생성
        h1.textContent = fruit;
        h1.style.color = "green";
        div.appendChild(h1);
      }

      let hr = document.createElement("hr");

      div.appendChild(hr);

      // for(let i=0; i<arrFruit.length; i++){
      //     let h1 = document.createElement("h1");  // 문서객체 생성
      //     h1.textContent = arrFruit[i];

      //     if(i % 2 == 0){
      //         h1.style.color = "green";
      //     }else{
      //         h1.style.color = "red";
      //     }
      //     div.appendChild(h1);
      // }
      // let tr = document.querySelector("tr");
      // for(let i=0; i<arrFruit.length; i++){
      //     let td = document.createElement("td");  // 문서객체 생성
      //     td.textContent = arrFruit[i];
      //     td.style.width ="300px";
      //     if(i % 2 == 0){
      //         td.style.background = "green";
      //     }else{
      //         td.style.background = "red";
      //     }
      //     div.appendChild(td);
      // }

      let ul = document.querySelector("ul");
      for(let i=0; i<arrFruit.length; i++){
        let li = document.createElement("li");  // 문서객체 생성
        li.textContent = arrFruit[i];
        // li.style.width ="300px";
        // li.style.height ="50px";
        // li.style.lineHeight ="50px";
        li.setAttribute("class","li-color");  //속성을 설정

        if(i % 2 == 0){
          li.style.background = "cyan";
        }else{
          li.style.background = "pink";
        }
        ul.appendChild(li);
      }

      // let br = document.createElement("br");
      //ul.appendChild(br);
      ul.appendChild(hr);

      let ul1 = document.querySelector("ul");
      for(let i=arrFruit.length-1; i>=0; i--){
        let li = document.createElement("li");  // 문서객체 생성
        li.textContent = arrFruit[i];
        // li.style.width ="300px";
        // li.style.height ="50px";
        // li.style.lineHeight ="50px";
        li.setAttribute("class","li-color");  //속성을 설정

        if(i % 2 == 0){
          li.style.background = "cyan";
        }else{
          li.style.background = "pink";
        }
        ul1.appendChild(li);
      }
    });
  </script>
</head>
<body>
<div>
  <h1>과일 이름</h1>
</div>

<br/>
<ul> </ul>

</body>
</html>

'Front-End Programming > JavaScript' 카테고리의 다른 글

객체(Object) (3)	2025.03.22
함수(Function) (0)	2025.03.18
제어문 (0)	2025.03.18
자바스크립트 기초 (1)	2025.03.17
javascript 동기와 비동기,ajax get,post 예제_오전 (1)	2025.03.12

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/02 »
일	월	화	수	목	금	토
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

글 보관함

602호_클라우드기반 자바풀스택_중앙정보처리학원_국비교육

티스토리 뷰

배열(Array)

배열(Array)

★ 배열

'Front-End Programming > JavaScript' 카테고리의 다른 글

티스토리툴바