JavaScript 자료형 Array

    2018-04-19 16:32:18 작성

    Array

    배열은 하나의 이름으로 여러값을 가질 수 있으며 인덱스 번호를 찹조하여 값에 접근할 수 있습니다.
    자바스크립트에서 배열은 어떤 타입의 데이터라도 넣을 수 있습니다.
    배열은 동적으로 크기 조절을 하므로 데이터를 추가 하면 자동으로 커집니다.
    배열을 만드는 방법으로 2가지가 있습니다.

    1. new 연산자와 Array 생성자를 함께 사용
    2. 배열 리터럴 표기법 [ ] 사용(권장)


    배열 요소 접근

    인덱스 번호를 참조하여 배열요소에 접근할수 있습니다.



    배열을 인식하는 방법

    자바스크립트의 배열은 객체이기 때문에 typeof 가 object를 반환합니다.
    다음 두가지 방법이 있습니다.

    • Array.isArray() 함수를 사용
    • instanceof 연산자 사용


    array 속성과 메서드

    • 속성

      length 배열의 길이를 반환
      constructor Array 객체의 prototype을 생성한 함수를 반환
      prototype Array 객체에 속성 및 메서드를 추가 할 수 있습니다
    • 메서드

      toString() 배열을 문자열로 변환하여 반환
      valueOf() 배열의 문자열로 변환하여 반환
      join(separator) 배열을 separator로 구분하여 문자열로 변환하여 반환
      copyWithin(target, start, end) 배열 요소를 지정된 위치에 복사
      fill(value, start, end) start 부터 end 이전까지 value로 변경 합니다.
      push(item1, item2, ..., itemX) 배열의 끝에 새 항목을 추가하고 배열의 길이를 반환.
      pop() 배열의 마지막 항목을 제거하고 해당 항목을 반환.
      unshift(item1, item2, ..., itemX) 배열의 처음에 새항목을 추가하고 배열의 길이를 반환.
      shift() 배열의 첫 번째 항목을 제거하고 해당 항목을 반환.
      sort(compareFunction) 배열의 항목을 정렬.
      reverse() 배열의 순서를 뒤집음.
      concat(array2, array3, ..., arrayX) 둘이상의 배열을 하나의 배열로 결합.
      slice(start, end) 선택한 요소를 새 배열로 반환.
      splice(index, howmany, item1, ....., itemX) 배열에 항목을 추가 / 제거하고 제거 된 항목을 반환.
      indexOf(item, start) start로 부터 item을 찾아 위치를 반환.
      lastIndexOf(item, start) start(끝) 부터 item을 찾아 위치를 반환.
      every(function(currentValue, index, arr), thisValue) 배열의 모든 요소에 콜백함수를 호출하고 모두 true 이면 true
      some(function(currentValue, index, arr), thisValue) 배열의 모든 요소에 콜백함수를 호출하고 하나라도 true 이면 true
      filter(function(currentValue, index, arr), thisValue) 배열의 모든 요소에 콜백함수를 호출하고 true 인 배열요소로 배열을 만들어 반환
      forEach(function(currentValue, index, arr), thisValue) 배열의 각요소에 대해 콜백함수를 호출
      map(function(currentValue, index, arr), thisValue) 배열의 각요소에 대해 콜백함수를 호출한 결과를 배열로 반환
      find(function(currentValue, index, arr), thisValue) 배열의 각요소에 대해 콜백함수를 호출한 결과가 true인 첫번째 요소 값을 반환
      reduce(function(total, currentValue, currentIndex, arr), initialValue) 배열의 모든 요소에 콜백함수를 호출하고 값을 하나 만들어 반환
      reduceRight(function(total, currentValue, currentIndex, arr), initialValue) 배열의 모든 요소에 콜백함수를 호출하고 값을 하나 만들어 반환
    • toString()배열을 문자열로 변환하여 반환

      쉼표(,)로 구분하여 문자열로 반환합니다.

      valueOf()배열의 문자열로 변환하여 반환

      쉼표(,)로 구분하여 문자열로 반환합니다.

      join(separator)배열을 separator로 구분하여 문자열로 변환하여 반환

      separator : 기본값 쉼표(,)

    • copyWithin(target, start, end)배열 요소를 지정된 위치에 복사

      • target : 필수, 요소를 복사하는 인덱스
      • start : 옵션, 요소를 복사를 시작할 인덱스 위치 (기본값 0)
      • end : 옵션, 요소 복사를 중지하는 인덱스 (기본값 array.length)

      fill(value, start, end)start 부터 end 이전까지 value로 변경 합니다.

      • target : 필수, 배열을 채울 값
      • start : 옵션, 요소를 복사를 시작할 인덱스 위치 (기본값 0)
      • end : 옵션, 요소 복사를 중지하는 인덱스 (기본값 array.length)
    • push(item1, item2, ..., itemX)배열의 끝에 새 항목을 추가하고 배열의 길이를 반환

      pop()배열의 마지막 항목을 제거하고 해당 항목을 반환

      unshift(item1, item2, ..., itemX)배열의 처음에 새항목을 추가하고 배열의 길이를 반환

      shift()배열의 첫 번째 항목을 제거하고 해당 항목을 반환

      • push(), pop()을 이용하면 스택 구조처럼 동작할 수 있습니다.
      • push(), shift()를 이용하면 큐 구조처럼 동작할 수 있습니다.
    • sort(compareFunction)배열의 항목을 정렬

      기본적으로 문자의 알파벳 오름차순으로 정렬합니다.
      문자기준으로 정렬하기 때문에 숫자를 정렬할 때 잘못된 결과를 생성합니다.
      이 때문에 compareFunction을 제공하여 문제를 해결할 수 있습니다.
      compareFunction은 인수에 따라 음수, 0, 양수 값을 반환해야 하고 그 값에 따라 정렬합니다.
      • function(a, b){return a-b}

      reverse()배열의 순서를 뒤집음

    • concat(array2, array3, ..., arrayX)둘이상의 배열을 하나의 배열로 결합

      slice(start, end)선택한 요소를 새 배열로 반환

      start 부터 end 앞까지 선택합니다.
      end 생략시 끝까지 입니다.

      splice(index, howmany, item1, ....., itemX)배열에 항목을 추가 / 제거하고 제거 된 항목을 반환

      • index : 위치를 지정합니다. 음수값이면 배열의 끝에서 위치를 지정합니다.
      • howmany : 옵션, 삭제할 항목 수 0이면 삭제 하지 않습니다.
      • item1, ..., itemX : 배열에 추가 할 항목
    • indexOf(item, start)start로 부터 item을 찾아 위치를 반환

      start의 기본값 0입니다

      lastIndexOf(item, start)start(끝) 부터 item을 찾아 위치를 반환

      start의 지정되지 않으면 배열의 끝입니다.

    • every(function(currentValue, index, arr), thisValue)배열의 모든 요소에 콜백함수를 호출하고 모두 true 이면 true 반환

      some(function(currentValue, index, arr), thisValue)배열의 모든 요소에 콜백함수를 호출하고 하나라도 true 이면 true 반환

      filter(function(currentValue, index, arr), thisValue)배열의 모든 요소에 콜백함수를 호출하고 true 인 배열요소로 배열을 만들어 반환

      forEach(function(currentValue, index, arr), thisValue)배열의 각요소에 대해 콜백함수를 호출

      map(function(currentValue, index, arr), thisValue)배열의 각요소에 대해 콜백함수를 호출한 결과를 배열로 반환

      find(function(currentValue, index, arr), thisValue)배열의 각요소에 대해 콜백함수를 호출한 결과가 true인 첫번째 요소 값을 반환

      • function : 배열의 각 요소에 대해 실행되는 콜백함수
        • currentValue : 필수, 현제 요소의 값
        • index : 옵션, 현제 요소의 배열 인덱스
        • arr : 옵션, 현제 요소의 배열
      • thisValue : 옵션, this 값으로 사용될 값입니다

      find() 메서드는 배열 요소를 찾으면 요소값을 반환하고 나머지값은 확인하지 않습니다.
      요소를 찾지 못하면 undefined를 반환합니다.

    • reduce(function(total, currentValue, currentIndex, arr), initialValue)배열의 모든 요소에 콜백함수를 호출하고 값을 하나 만들어 반환

      왼쪽 -> 오른쪽으로 계산이 진행됩니다.

      reduceRight(function(total, currentValue, currentIndex, arr), initialValue)배열의 모든 요소에 콜백함수를 호출하고 값을 하나 만들어 반환

      오른쪽 -> 왼쪽으로 계산이 진행됩니다.

      • function : 배열의 각 요소에 대해 실행되는 콜백함수
        • total : 필수, 초기값 또는 이전에 반환된 값
        • currentValue: 필수, 현제 요소의 값
        • currentIndex : 옵션, 현제 요소의 배열 인덱스
        • arr : 옵션, 현제 요소의 배열
      • initialValue : 옵션, 함수에 초기값으로 전달할 값