Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!
U kunt het artikel ook in het English (US) lezen.

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map followed by a flat of depth 1, but flatMap is often quite useful, as merging both into one method is slightly more efficient.


var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])


Function that produces an element of the new Array, taking three arguments:
The current element being processed in the array.
The index of the current element being processed in the array.
The array map was called upon.
Value to use as this when executing callback.

Return value

A new array with each element being the result of the callback function and flattened to a depth of 1.


See Array.prototype.map() for a detailed description of the callback function. The flatMap method is identical to a map followed by a call to flat of depth 1.


map and flatMap

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

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

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

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

While the above could have been achieved by using map itself, here is an example that better showcases the use of flatMap.

Let's generate a list of words from a list of sentences.

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"]

Notice, the output list length can be different from the input list length.

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


reduce and concat

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

arr1.flatMap(x => [x * 2]);
// is equivalent to
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 Finished (4)  

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Basic supportChrome 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 Full support 11.0.0


Full support  
Full support
No support  
No support

See also

Documentlabels en -medewerkers

Aan deze pagina hebben bijgedragen: mikesherov, justin0022, mfluehr, Konrud, sunnykgupta, LJHarb, wmsbill, Baptistou, fscholz
Laatst bijgewerkt door: mikesherov,