자바스크립트 배열 메소드

(2019-04-17)

forEach 메소드

1. 자바스크립트에서, 배열 메소드배열 메소드 요약
     - 배열 검색용 : find, findIndex, indexOf, lastIndexOf, some, every
     - 배열 정렬용 : sort, reverse
     - 배열 부분조작 : slice, spice, copyWithin, fill
     - 배열 추가삭제 : push, pop, unshift, shift, delete
     - 콜백함수를 받음 : every, filter, find, findIndex, forEach, map, reduce, some
     - 원본 배열 수정 : copyWithin, fill, pop, push, reverse, shift, sort, splice, unshift

  ㅇ Array.prototype 메소드에 정의됨
     - 모든 배열은 이 메소드들을 상속 받게되고, 사용할 수 있음 


2. 배열의 검색 

  ㅇ 조건에 맞는 인덱스 반환
     - indexOf(search, index)
        . search와 정확히 일치하는(===) 첫번째 원소를 검색하여 그 인덱스를 반환

     - lastIndexOf(search, index)
        . search와 정확히 일치하는(===) 마지막 원소를 검색하여 그 인덱스를 반환
     * 찾지 못하면, -1을 반환

  ㅇ 조건에 맞는 요소 반환 
     - find(조건 함수)
        . 조건에 맞는 요소를 찾아 반환 (찾지 못하면 undefined 반환)

  ㅇ 조건에 맞는지 여부 확인 
     - every() : 배열 내 모든 요소가 지정한 요건에 일치하는지 여부 
        . false를 만날 때까지 배열의 각 요소별로 지정된 메소드를 실행
        . 모든 요소가 조건에 맞아야만 true 반환, 그렇지 않으면 false 반환

     - some()  : 배열 요소 중 하나라도 지정한 요건에 일치하는지 여부
        . 지정된 메소드 조건에 맞는 요소를 찾으면 즉시 검색을 멈추고 true를 반환
        . 조건에 맞는 요소를 찾지 못하면 false를 반환


3. 배열의 변환, 합침문자열 -> 배열 변환 
     - split()     : 문자열 중 특정 구분자에 의해 분리시켜, 배열로 변환
        . 例) "ab cd ef".split(" ") => ["ab","cd",ef"] (" "로 나눔)

  ㅇ 배열 -> 문자열 변환 
     - toString() : 배열 각 요소를 쉼표로 구분시킨 문자열로써 리턴
        . 例) ['a','b','c'].toString(); => "a,b,c"

     - join(separator) : 배열을 separator 구분자로 연결하여 하나의 문자열로 합쳐 반환
        . 例) ['a','b','c'].join('-'); => "a-b-c"

  ㅇ 배열 합침 (원 배열 수정없이 새 배열로 반환)
     - concat()    : 다수의 배열을 연결하고, 병합된 배열의 사본을 반환
        . 例) 원배열.concat(추가배열1,추가배열2,...);
     - join()


4. 배열 내 부분 조작 (추출,복사,대체)

  ㅇ slice(begin,end) 
     - (원본 배열에 변화 없음)
     - 지정된 시작 인덱스(begin)부터 직전 인덱스(end-1)까지 잘라, 배열로 반환 
     - 例) var test = ['0','1','2','3','4']; test.slice(1,3);
        . (반환) ['1','2']

  ㅇ splice(index,length,'배열데이터')
     - (원본 배열에 변화 있음)
     - 배열 내 특정 원소들을, 지정한 index,length 만큼 바꾸고, 추출된 것은 반환
     - 例) var test = ['a','b','c','d','e']; 
        . test.splice(1,2,'x','y','z'); // test = ['a','x','y','z','d','e'], (반환) ['b','c']
        . test.splice(1); // test = ['a'], (반환) ['x','y','z','d','e']
        . test.splice(); // test = ['a'], (반환) []

  ㅇ copyWithin(target,begin,end)
     - (원본 배열에 변화 있음)
     - begin~end-1 원소들을 target 위치에 복사

  ㅇ fill(target,begin,end)
     - (원본 배열에 변화 있음)
     - begin~end-1 원소들을 target으로 대체


5. 배열 내 요소의 추가, 제거

  ※ (아래 메소드 모두가, 원본 배열 자체를 수정됨)

  ㅇ push()                 : 배열 끝 요소 추가
     - 반환 값 : 늘어난 길이
     - 例) arr.push(추가원소1,추가원소2,...);
  ㅇ pop()                  : 배열 끝 요소 꺼내기/제거
     - 반환 값 : 제거된 요소
  ㅇ unshift()              : 배열 첫 요소 추가
     - 반환 값 : 늘어난 길이
     - 이 함수는 동작 후, 결과 배열 요소의 갯수를 반환함(return)
  ㅇ shift()                : 배열 첫 요소 꺼내기/제거
     - 반환 값 : 제거된 요소
  ㅇ delete()               : 지정된 인덱스의 요소를 제거


6. 배열 내 요소 정렬

  ㅇ sort([콜백함수])
     - 배열 요소를 순서대로 정렬 또는 지정한 콜백함수 방법대로 정렬
  ㅇ reverse()
     - 배열 요소를 역순으로 정렬

  ※ 배열 원소를 알파벳순으로, 또는 지정한 방법에 따른 순서로 정렬 함


7. 배열 요소의 변형 및 필터링

  ㅇ map() : 배열 요소를 변형
     - 형식 : array.map( (element, index, array) => { return element; } );
     - 배열 요소별로 1:1 로 짝짓되 새로운 결과 배열로 반환
  ㅇ filter() : 배열 요소들 중 필요한 것 만 남김


8. 배열 내 요소별 메소드 반복 적용

  ㅇ forEach(콜백함수) : 배열 각 요소를 순서대로 처리
     - 배열의 각 요소별로 지정된 콜백함수를 실행
        . 매개변수로 전달 받은 콜백함수배열의 각 요소 마다 각각 적용
        . 배열의 각 요소 값을 차례로 꺼내어 콜백함수의 인수로 넘기기를 반복함
     - 콜백함수의 전달 인수 셋은, 
        . (현재 요소값 [, 현재 인덱스 번호 [, 배열명]])
        . 例) (eachValue, index, arrayName)
     - 이때, 콜백함수는 원본 배열 자체를 변경하게 됨

  ㅇ reduce(콜백함수) : 배열 각 요소를 하나씩 꺼내 사용자 함수를 적용시킨 후에,
                그 값을 계속해서 누적시키는 함수
     - 보통 배열을 값 하나로 줄여줌
     - 반환 값 형태는, 객체 또는 배열형태도 가능 
     - 형식 : 배열.reduce( (누적값, 현재값, 인덱스, 요소) => { return 결과; }, 초기값 );


9. 배열 여부 확인

  ㅇ Array.isArray(임의값) 메소드
     - 임의값이 배열이면, => true 리턴

     * typeof 연산자 결과가 `object`로 나타나므로,
        . `객체(Object object)`인지 `배열 객체`인지 불분명하므로,
        . Array.isArray() 메소드 활용함이 적절


[JS 배열/Map/Set] 1. JS 배열 2. JS 배열 메소드 3. Map 객체,Set 객체 4. 유사 배열 객체

 
        최근수정     요약목록     참고문헌