当前位置:首页 > 手册大全 > javascript手册 > Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

语法

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新数组的元素
}[, thisArg])

参数

callback
可以生成一个新数组中的元素的函数,可以传入三个参数:
 
currentValue
当前正在数组中处理的元素
index可选
可选的。数组中正在处理的当前元素的索引。
array可选
可选的。被调用的 map 数组
thisArg可选
可选的。执行 callback 函数时 使用的this 值。

返回值

 一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为1。

描述

有关回调函数的详细描述,请参见 Array.prototype.map() 。 flatMap 方法与 map 方法和深度depth为1的 flat 几乎相同.

示例

Map 与 flatMap

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

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

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

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

虽然上面的代码使用 map 和 flatMap 好像都可以,但这只能展示如何使用 flatMap。

所以,为了更好的展示 flatMap 的作用,下面我们将包含几句话的数组拆分成单个汉字组成的新数组。

let arr = ["今天天气不错", "", "早上好"]

arr.map(s => s.split(""))
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]

arr.flatMap(s => s.split(''));
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]

等价操作

归纳(reduce) 与 合并(concat

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

arr1.flatMap(x => [x * 2]);
// 等价于
arr1.reduce((acc, x) => acc.concat([x * 2]), []);
// [2, 4, 6, 8]

规范

规范 状态 备注
Array.prototype.flatMap proposal Draft  

浏览器兼容性

Update compatibility data on GitHub
Desktop Mobile Server
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
Basic support
Experimental
Chrome Full support 69 Edge No support No Firefox Full support 62 IE No support No Opera Full support 56 Safari Full support 12 WebView Android Full support 69 Chrome Android Full support 69 Edge Mobile No support No Firefox Android Full support 62 Opera Android Full support 56 Safari iOS Full support 12 Samsung Internet Android No support No nodejs Full support 11.0.0

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.

参见

公益性全栈资源网站,鸣谢默默付出的博主、工程师、架构师们。
网站内容来源技术大牛的辛勤结晶。
81For 技术网站 Copyright ©2019 备案号:津ICP备19001147号-2