개발/Javascript

Array 배열 메서드 모음

반응형

 Array.isArray : 인수가 배열이면 true 아니면 false 반환
                                ex) Array.isArray([1,2])  //true
                                      Array.isArray({})   //false

Array.prototype.indexOf : 인수로 전달된 요소를 검색해서 인덱스 반환
                                ex) const arr = [1,2,3,4]
                                      arr.indexOf(3)  // 2
                                      arr.indexOf(5)  // -1

Array.prototype.push : 전달받은 인수를 원본 배열의 마지막 요소로 추가 (원본 배열 직접 변경됨)
                                ex) const arr = [1,2,3,4]
                                      arr.push(5,6)  // [1,2,3,4,5,6]

Array.prototype.pop : 원본 배열의 마지막 요소를 제거하고 반환 (원본 배열 직접 변경됨)
                                ex) const arr = [1,2,3,4]
                                      arr.pop()  // [1,2,3]

Array.prototype.unshift : 전달받은 인수를 원본 배열의 처음 요소로 추가 (원본 배열 직접 변경됨)
                                ex) const arr = [1,2,3,4]
                                      arr.unshift(3,4)  // [3,4,1,2,3,4]

Array.prototype.shift : 원본 배열의 첫번째 요소를 제거하고 반환 (원본 배열 직접 변경됨)
                                ex) const arr = [1,2,3,4]
                                      arr.shift()  // [2,3,4]

Array.prototype.concat : 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열 반환 (원본 배열 변경 안됨)
                                ex) const arr1 = [1,2]
                                      const arr2 = [3,4]
                                      arr1.concat(arr2)  // [1,2,3,4]

Array.prototype.splice : 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 사용, 매개변수 3개[start,end,item] (원본 배열 직접 변경됨)
                                ex) const arr = [1,2,3,4]
                                      arr.splice(1)  // [1]
                                      arr.splice(1,2)  // [1,4] (인덱스 1부터 2까지 제거)
                                      arr.splice(1,2,100)  // [1,100,4] (인덱스 1부터 2까지 제거 후 100 추가)

Array.prototype.slice : 인수로 전달된 범위의 요소들을 복사해서 배열로 반환(얕은 복사), 매개변수 2개[start,end] (원본 배열 직접 변경 안됨)
                                ex) const arr = [1,2,3,4]
                                      arr.slice(1)  // [2,3,4] (인덱스 1부터 복사)
                                      arr.slice(1,2)  // [2,3] (인덱스 1부터 2까지 복사)
                                      arr.slice()  // [1,2,3,4]

Array.prototype.join : 배열의 모든 요소를 문자열로 변환 (기본 구분자 콤마('))
                                ex) const arr = [1,2,3,4]
                                      arr.join()  // '1,2,3,4'
                                      arr.join('')  // '1234'
                                      arr.join(':')  // '1:2:3:4'

Array.prototype.reverse : 배열의 순서를 반대로 (원본 배열 직접 변경됨)
                                ex) const arr = [1,2,3,4]
                                      arr.reverse()  // [4,3,2,1]

Array.prototype.fill : 인수로 전달받은 값을 배열의 처음부터 끝까지 채움 (원본 배열 직접 변경됨)
                                ex) const arr = [1,2,3,4]
                                      arr.fill(7)  // [7,7,7,7]
                                      arr.fill(7,2)  // [1,2,7,7]
                                      arr.fill(7,1,3)  // [1,7,7,4] (7을 인덱스 1부터 2까지[3미포함] 채운다)

Array.prototype.includes : [ES7] 특정 원소가 포함되어 있는지 확인하여 true, false 반환
                                ex) const arr = [1,2,3,4]
                                      arr.includes(1)  // true
                                      arr.includes(7)  // false
                                      arr.includes(2,3)  // false (2가 포함되어있는지 인덱스 3부터 찾는다)

Array.prototype.flat : [ES10] 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화
                                ex) const arr = [1,2,[3,[4]]]
                                      arr.flat()  // [1,2,3,[4]]
                                      arr.flat(2)  // [1,2,3,4]
                                      arr.flat(infinity)  // [1,2,3,4] (모든 배열 평탄화)

Array.prototype.sort : 배열 정렬(기본 오름차순)
                                ex) const arr1 = ['b','a','d','c']  // 숫자는 비교 함수를 인수로 전달 해야함
                                      arr1.sort() // ['a','b','c','d']
                                      const arr2 = [100,2,1,200]  // 숫자는 비교 함수를 인수로 전달 해야함
                                      arr2.sort((a,b)=>a-b) // [1,2,100,200] (반환 값이 0보다 작으면 앞의 값 반환)
                                      arr2.sort((a,b)=>b-a) // [200,100,2,1]

Array.prototype.forEach : 배열의 반복문 실행, 리턴값은 항상 undefined이다 (for문에 비해 성능은 안좋지만 가독성이 더 좋기 때문에 높은 성능이 필요한 경우가 아니라면 forEach 사용 권장)
                                ex) [1,2,3].forEach((item,index,arr)=>{
                                              console.log('인덱스:'+index+', 값:'+item+', this:'+arr)
                                       })
                                     /*
                                             인덱스:0, 값:1, this:[1,2,3]
                                             인덱스:1, 값:2, this:[1,2,3]
                                             인덱스:2, 값:3, this:[1,2,3]
                                    */

Array.prototype.map: 배열의 반복문 실행 후 새로운 배열 반환
                                ex) [1,2,3].map((item,index,arr)=>{
                                              return item*2
                                       })
                                     // [2,4,6]

Array.prototype.filter : 콜백 함수의 반환값이 true인 요소만 새로운 배열로 반환
                                ex) [1,2,3,4].filter((item,index,arr)=>{
                                              return item>2
                                       })
                                     // [3,4]

Array.prototype.reduce : 콜백 함수를 반복하면서 하나의 결과값만 반환, 첫번째 인수는 콜백함수, 두번째 인수는 초기값(초기값은 전달하는 것이 안전)
                                ex) [1,2,3,4].reduce((start,end,index,arr)=>{
                                              return start+end
                                       },0)
                                     // 10

Array.prototype.some : 콜백 함수의 반환값이 하나라도 참이면 true, 아니면 false 반환 (빈 배열은 항상 false)
                                ex) [1,2,3,4].some(item=>item>2)  // true
                                      [1,2,3,4].some(item=>item<0)  // false

Array.prototype.every : 콜백 함수의 반환값이 모두 참이면 true, 아니면 false 반환
                                ex) [1,2,3,4].every(item=>item>0)  // true
                                      [1,2,3,4].every(item=>item>2)  // false

Array.prototype.find : [ES6] 콜백 함수를 호출해서 반환값이 ture인 첫번째 요소 반환
                                ex)const arr = [{id:1,name:'woo'},{id:2,name:'choi'},{id:3,name:'na'}]
                                     arr.find(item=>item.id===2)  // {id:2,name:'choi'}

Array.prototype.findIndex : [ES6] 콜백 함수를 호출해서 반환값이 ture인 첫번째 요소의 인덱스 반환
                                ex)const arr = [{id:1,name:'woo'},{id:2,name:'choi'},{id:3,name:'na'}]
                                     arr.findIndex(item=>item.id===2)  // 1

Array.prototype.flatMap : [ES10]map 메서드와 flat 메서드 순차 실행
                                ex)const arr = ['hello','world']
                                     arr.map(x=>x.split('')).flat()  // ['h','e','l','l','o','w','o','r','l','d']
                                     arr.flatMap(x=>x.split(''))  // ['h','e','l','l','o','w','o','r','l','d']

반응형

'개발 > Javascript' 카테고리의 다른 글

라이브러리 없이 만드는 간단한 로딩바(loadingbar)  (0) 2024.03.25
String 메서드 모음  (0) 2023.09.13
체크박스 전체 선택 코드  (0) 2023.06.18
html에서 style, script 위치  (0) 2022.01.18
데이터 타입  (0) 2021.08.28