This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

flatMap() 메소드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평평화합니다. 이는 깊이 1의 flat 이 뒤따르는 map 과 동일하지만, flatMap 은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적입니다.

문법

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // new_array를 위한 엘리먼트를 반환
}[, thisArg])

파라미터

callback
새로운 배열의 엘리먼트를 생성하는 함수. 3개의 아규먼트를 갖습니다.
 
currentValue
배열에서 처리되는 현재 엘리먼트.
indexOptional
배열에서 처리되고 있는 현재 엘리먼트의 인덱스.
arrayOptional
map 이 호출된 배열.
thisArgOptional
callback 실행에서 this 로 사용할 값.

반환값

각 엘리먼트가 callback 함수의 결과이고, 깊이 1로 평평화된 새로운 배열.

설명

callback 함수의 상세 설명은 Array.prototype.map() 문서를 보시기 바랍니다. flatMap 메소드는 깊이 1의 flat 이 뒤따르는 map 과 동일합니다.

예제

mapflatMap

let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 한 레벨만 평평화됨
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

위 코드는 map 자체만을 사용해서 구현할 수 있지만, 다음은 flatMap 의 유즈케이스를 더 잘 보여주는 예시입니다.

문장의 리스트로부터 단어의 리스트를 생성해봅시다.

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x=>x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in","California"]

출력 리스트의 길이는 입력 리스트의 길이와 다를 수 있습니다.

//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

대안

reduceconcat

var arr1 = [1, 2, 3, 4];

arr1.flatMap(x => [x * 2]);
// 다음과 동일합니다
arr1.reduce((acc, x) => acc.concat([x * 2]), []);
// [2, 4, 6, 8]
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

명세

Specification Status Comment
Array.prototype.flatMap proposal Candidate (3)  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic support
Experimental
Chrome Full support 69Edge No support NoFirefox Full support 62IE No support NoOpera Full support 56Safari Full support 12WebView Android Full support 69Chrome Android Full support 69Edge Mobile No support NoFirefox Android Full support 62Opera Android Full support 56Safari iOS Full support 12Samsung Internet Android No support Nonodejs No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: cs09g
최종 변경자: cs09g,