Array.flatMap() - 배열에 맵과 평면을 적용하기 위한 것입니다.

이 글은 7번째 글입니다. 이 기사에서는 flatMap 배열 방법에 대해 설명합니다.

FlatMap 방법이란 무엇입니까?

배열의 flatMap 메서드는 배열에 map 및 flat를 적용하는 고차 함수입니다. 즉, .map().flat() .

배열map 방법이 에 사용되는 반면 배열 플랫 방법은 에 사용됩니다.
flatMap 메서드는 배열의 각 항목을 매핑하고 최종 배열을 하나의 깊이 수준으로 평면화합니다.

이 메서드는 배열을 수정하지 않습니다.

Some 메서드의 구문

array.flatMap(function(item, index, array){
  // do some things on the item
  // return an array or item
})
// the final array will be flattened
// by 1 depth

callbackFunction 메서드에 전달된 flatMap는 루프 동안 배열의 각 항목에 적용되며 루프 후 최종 배열은 하나의 깊이 수준으로 평면화됩니다.

각 루프에서 콜백 함수에 전달되는 인수는 item , 항목의 index 및 원본array 입니다.
flatMap 방법을 사용하는 방법을 보여주기 전에 먼저 a map 및 a flat 를 사용하여 이 방법의 기능을 달성하는 방법을 보여 드리겠습니다.

FlatMap 방법 없이

flatMap 메서드는 배열을 통해 매핑하고 결과를 평면화하는 추상화된 함수입니다. 이 방법 없이 수행하는 방법은 다음과 같습니다.

const array = [1, 2, 3, 4]

// the mapping
const newArray = array.map(item => {
  return [item, item*2]
})

console.log(newArray)
// [ [ 1, 2 ], [ 2, 4 ], [ 3, 6 ], [ 4, 8 ] ]

// the flattening
const flattenedArray = newArray.flat()

console.log(flattenedArray)
// [1, 2, 2, 4, 3, 6, 4, 8]

이 코드는 flatMap 메서드가 백그라운드에서 수행하는 것과 유사합니다. map 메서드는 각 항목을 반복하고 최종 배열의 값을 반환합니다. flat 메소드는 재귀적으로 루프를 돌며 최종 배열을 하나의 깊이 레벨로 병합합니다.

FlatMap 방법으로

다음은 flatMap로 이전 결과를 얻는 방법입니다.

const array = [1, 2, 3, 4]

const newArray = flatMap(item => {
  return [item, item*2]
})

console.log(newArray)
// [1, 2, 2, 4, 3, 6, 4, 8]

더 간단합니다. 플랫인flatMap과 플랫인flat의 차이점은 전자는 깊이 지정을 허용하지 않지만 후자는 허용한다는 것입니다. flatMap는 한 수준의 깊이에 대해서만 병합을 수행합니다.

지도와 플랫( map().flat() )을 사용하는 것과 flatMap 를 사용하는 것의 차이점이 무엇인지 궁금할 것입니다. 음, flatMap가 더 적은 코드 라인이고 더 간결하다는 사실을 제외하고는 두 개의 루프(map 및 flat를 별도로 호출하는 것보다 약간 더 효율적입니다. according to MDN )