JavaScript - array

배열

1. 대괄호 []를 이용해서 각 배열 요소를 묶는다.
2. 서로 다른 타입(숫자, 문자열, 논리값 등)을 하나의 배열에 저장할 수 있다.
3. 인덱스는 0부터 시작한다.
4. 배열의 길이는 length 속성으로 확인할 수 있다

  <div id="box1"></div>
  <script>

    // 배열의 선언 및 초기화
    var array = [100, 1.5, 'Hello World', true];

    // 일반 for문
    for(let i = 0; i < array.length; i++){
      document.getElementById('box1').innerHTML += (array[i] + '&nbsp;&nbsp;');
    }

    // for-in문 (배열에서 인덱스를 가져오는 방식의 반복문)
    for(let i in array){
      document.getElementById('box1').innerHTML += (array[i] + '&nbsp;&nbsp;');
    }

  </script>

  <div id="box2"></div>
  <script>
    var array = ['google.png', 'naver.png', 'daum.png', 'coupang.png'];
    var str = '';
    for(let i = 0; i < array.length; i++){
      str += '<img src="../../assets/image/' + array[i] + '" width="100px">';
    }
    document.getElementById('box2').innerHTML = str;
  </script>

추가

1. push(요소): 마지막 요소로 추가하기
2. unshift(요소):첫번째 요소 삭제하기

삭제

1.pop(): 마지막 요소 삭제하기
2.shift():첫번째 요소 삭제하기

수정

splice(수정을 시작할 인덱스 , 삭제할 요소의 개수,[추가할요소1,추가할요소2,...])

예시

  <div id="box3"></div>
  <script>

    // box3 문서 객체
    var box3 = document.getElementById('box3');

    // 배열 선언(비어 있는 배열)
    var array = [];

    // 추가

    array.push('제육볶음');
    array.push('짬뽕');
    array.unshift('짜장');
    array.unshift('된장찌개');
    for(let i = 0; i < array.length; i++){
      box3.innerHTML += array[i] + '<br>';
    }

    // 삭제

    array.pop();
    array.shift();
    for(let i = 0; i < array.length; i++){
      box3.innerHTML += array[i] + '<br>';
    }

    // 수정

    // 마지막 요소로 '계란찜' 추가
    array.splice(array.length, 0, '계란찜');

    // 두번째 요소를 '순대국' 수정
    array.splice(1, 1, '순대국');  // 인덱스 1부터 1개 요소를 지우고, '순대국' 넣기

    // 첫번째 요소를 삭제
    array.splice(0, 1);  // 인덱스 0부터 1개 요소 지우기

    for(let i = 0; i < array.length; i++){
      box3.innerHTML += array[i] + '<br>';
    }

  </script>