[javascript] Array 메서드 : findIndex(), flat(), fill()

Hyebin·2021년 4월 21일
0

Javascript

목록 보기
23/27
post-thumbnail
post-custom-banner

과제나 코플릿 문제 풀이를 하며 알게된 배열 메서드들을 정리해보았다.
아래 내용은 mdn을 참고하였다.

findIndex()

arr.findIndex(callback(element, index, array))

callback 함수로 판별하여 만족하는 배열의 첫 번째 요소의 인덱스를 찾는 메서드이다.
callback 함수가 true를 반환할 때 까지 배열의 인덱스만큼 돌며 callback 함수를 실행한다.
만족하는 요소가 없으면 -1을 반환하며, 호출된 배열을 변경하지 않는다.

callback 함수의 매개변수

  • element
    배열에서 현재 처리 중인 요소
  • index
    배열에서 현재 처리 중인 인덱스
  • array
    findIndex()로 호출된 배열

findIndex()의 특징은 만족하는 첫번째 요소의 인덱스만을 반환한다는 것이다. 아래 예시에서 보면 배열 안에 소수가 여러개 있지만 isPrime()을 적용시켰을 때 처음 true를 반환하는 소수의 인덱스를 리턴하고, 더 이상상 배열을 순회하지 않는다.

function isPrime(element, index, array) {
  for(let i=2; i<=Math.sqrt(element); i++) {
    if(element % i === 0) return false
  }
  return true;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
console.log([4, 5, 6, 7, 2, 12].findIndex(isPrime))  //1

flat()

arr.flat(depth)

flat()메서드는 ES10(2019)부터 추가된 메서드로 중첩 배열 구조를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 반환한다.
즉, 중첩 구조를 평평한 배열로 만들어주며, 원본 배열은 변경하지 않는다.

매개변수

  • depth
    중첩의 깊이를 설정하는 매개변수. 기본값은 1이다.
const arr1 = [1, 2, [3, 4]];
let newArr1 = arr1.flat(); 
newArr1; // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();  // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);  // [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

flat()을 사용하면 빈 요소도 제거할 수 있다.

let arr = [1, 2, 3,  , 4]

let newArr = arr.flat();
newArr;  //[1, 2, 3, 4]

ES6 문법에서는 concat과 reduce, 재귀를 사용해 중첩 배열을 일차배열로 만들어 줄 수 있다.

const arr = [1, 2, [3, 4, [5, 6]]];

let flatDeep = (arr, d=1) => {
   return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
                : arr.slice();
};

flatDeep(arr, 2);
// [1, 2, 3, 4, 5, 6]

fill()

arr.fill(value, start, end)

fill()은 배열 인덱스 시작부터 끝까지 지정한 value 값으로 채우는 메서드이다. 원본 배열을 변형하여 반환한다.

매개변수

  • value
    배열을 채울 값
  • start
    시작 인덱스.
    옵션이며 기본값은 0이다.
    음수이면 arr.length+start가 시작 인덱스가 된다.
  • end
    끝 인덱스. end-1 인덱스까지 지정한 value로 변환한다.
    옵션이며 기본값은 arr.length이다.
    음수이면 arr.length+end가 끝 인덱스가 된다.
//인덱스 0부터 2까지
[1, 2, 3].fill(4);               // [4, 4, 4]
//인덱스 1부터 2까지
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
//인덱스 1
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
//변화없음
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
//인덱스 0
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
post-custom-banner

0개의 댓글