자바스크립트 배열 메소드

(2022-06-19)

1. 자바스크립트에서, 배열 메소드들의 요약

  ㅇ 용도별 요약
     - 배열 검색용 : find(), findIndex(), indexOf(), lastIndexOf(), some(), every()
     - 배열 정렬용 : sort(), reverse()
     - 배열 부분 조작 : slice(), spice(), copyWithin(), fill()
     - 배열 추가,삭제 : push(), pop(), unshift(), shift(), delete()
     - 배열 변환,합침 : split(), from(), toString(), join(), concat()
     - 배열 반복 적용
        . forEach(), filter(), map(), reduce()자바스크립트 반복 메소드 참조

  ㅇ 특징별 요약
     - 콜백함수인수로써 받을 수 있음
        . every(), filter(), find(), findIndex(), forEach(), map(), reduce(), some(), sort()
     - 원본 배열 변경됨
        . copyWithin(), fill(), pop(), push(), reverse(), shift(), sort(), splice(), unshift()

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


2. 배열검색 

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

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

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

     - findIndex()
        . 조건에 일치하는 첫번째 요소의 `위치`를 찾음

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

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


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

     - from()   : 문자열을 구분자 없이 각 문자별로 분리시켜, 배열로 변환
        . 例) "ab cd ef".from() => ["a","b"," ","c","d"," ","e","f"] 

  ㅇ 배열 -> 문자열 변환 
     - 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)까지 잘라, 배열로 반환
        . end 생략시, 기본값은 length 프로퍼티 값
        . 인수 생략시, 원본 배열의 복사본 반환
     - 例) var test = ['0','1','2','3','4']; test.slice(1,3); // (반환) ['1','2']

  ㅇ splice(index,length,'배열데이터')
     - (원본 배열에 변경 => 있음)
     - 배열 내 특정 원소들을, 지정한 index,length 만큼 추출 삭제하고,
       이를 세번째 인자부터의 배열로 바꾸고, length 만큼 추출된 것은 반환
     - 例) var test = ['a','b','c','d','e']; 
        . test.splice(1,2,'x','y','z'); // (결과) ['a','x','y','z','d','e'], (반환) ['b','c']
        . test.splice(1); // (결과) ['a'], (반환) ['x','y','z','d','e']
        . test.splice(); // (결과) ['a','b','c','d','e'], (반환) []
        . test.splice(2,1); // (결과) ['a','b','d','e'], (반환) ['c']

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

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


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

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

  ㅇ push(item)  :  배열 끝 요소 추가
     - 반환 값 : 늘어난 길이
     - 例) arr.push(추가원소1,추가원소2,...);
  ㅇ pop()  :  배열 끝 요소 꺼내기/제거
     - 반환 값 : 제거된(꺼낸) 요소
  ※ push(),pop()  :  스택 형태의 자료구조에 유용

  ㅇ unshift(item)  :  배열 첫 요소 추가
     - 반환 값 : 늘어난 길이
        . 이 함수는 동작 후, 결과 배열 요소의 갯수를 반환함(return)
     - 例) arr.unshift(추가원소3,추가원소2,추가원소1);
  ㅇ shift()  :  배열 첫 요소 꺼내기/제거
     - 반환 값 : 제거된 요소
  ※ unshift(),shift()  :   형태의 자료구조에 유용

  ㅇ delete(i)  :  지정된 인덱스의 요소를 제거
     - 제거된 위치에는 undefined 값으로 처리됨


6. 배열 내 요소의 정렬

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

  ※ 특징
     - 배열 원소를 알파벳순으로, 또는 지정한 방법에 따른 순서로 정렬 함
     - 원본 배열을 변경 시킴


7. 배열 여부의 확인

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

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

JS 배열/Map/Set
   1. JS 배열   2. JS 배열 메소드   3. 반복 메서드   4. 유사 배열 객체   5. Map 객체   6. Set 객체   7. ArrayBuffer 객체  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"