1、方法介绍
数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。
flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。
如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
如果原数组有空位，flat()方法会跳过空位。
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]
flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
flatMap()只能展开一层数组。
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
上面代码中，遍历函数返回的是一个双层的数组，但是默认只能展开一层，因此flatMap()返回的还是一个嵌套数组。
flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。
arr.flatMap(function callback(currentValue[, index[, array]]) {
// ...
}[, thisArg])
flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。
2、实例应用
增加元素：
// 增加元素
const msgArr = ["it's Sunny in", "California"];
const newArr = msgArr.flatMap(i => i.split(' '))
console.log(newArr); // ["it's", "Sunny", "in", "California"]
删除元素：
// 删除元素
const arr = [1, 2, 3, 4]
const newArr = arr.flatMap(x => x % 2 === 0 ? [x]: [])
console.log(newArr); // [2, 4]
修改元素：
// 修改元素
const arr = [1, 2, 3, 4]
const newArr = arr.flatMap(x => [x * 2])
console.log(newArr); // [2, 4, 6, 8]
flatMap方法结合实际场景的使用：
下面我们来看一个实际的例子：例如我们现在有一个选择公司的Select下拉组件，但是后端接口返回的公司列表里面的每一项的字段和我们Select下拉组件需要的字段格式不一样，而且我们还有一个特殊的要求，就是已授权的公司我们才允许在Select下拉组件中选择。这时候我们就想办法遍历公司列表，然后先把未授权的公司过滤掉，然后再把每一项转换成Select下拉组件所需要的数据格式。
这是我们最后展示的公司下拉组件：
接口返回的公司列表数据结构如下：
/**
* 后端接口返回的公司列表数据：
* Id: 公司的唯一ID
* Name: 公司名称
* Authorized: 是否已经授权： 1:已授权，2：未授权
*
*/
const studioList = [
{
Authorized: "2",
CompanyType: "1",
Id: "3729",
Name: "阿我打完的",
ServiceProviderId: "6",
TenantId: "1",
},
{
Authorized: "1",
CompanyType: "1",
Id: "3134",
Name: "纳税统计-启用时间202101无期初",
ServiceProviderId: "6",
TenantId: "1",
},
{
Authorized: "1",
CompanyType: "1",
Id: "427",
Name: "美丽人生工作室",
ServiceProviderId: "6",
TenantId: "1",
},
{
Authorized: "1",
CompanyType: "1",
Id: "410",
Name: "凭证测试专用2",
ServiceProviderId: "6",
TenantId: "1",
}
]
选择公司的Select下拉组件需要的数据格式如下：
[
{
text: '公司名称',
value: '公司ID'
}
]
接下来我们就需要把Authorized等于2的过滤掉，然后再转换成Select下拉组件需要的格式，
我们先使用filter配合map来实现：
const filterList = studioList.filter(r => r.Authorized === '1').map(i => ({text: i.Name, value: i.Id}))
// 最终也是可以得到我们想要的数据的：[{text: "纳税统计-启用时间202101无期初",value: "3134"},{text: "美丽人生工作室",value: "427"},{text: "凭证测试专用2",value: "410"}]
console.log(filterList);
但是使用filter配合map来实现看起来不是那么简洁易读，下面我们使用flatMap方法来替代：
const filterList = studioList.flatMap(r => r.Authorized === '1' ? [{text: r.Name, value: r.Id}] : [])
最终也是得到一样的结果的，但是flatMap用起来更简洁易读一些。
假设我们有以下购物车：
let cart = [
{
name: "Smartphone",
qty: 2,
price: 500,
freeOfCharge: false,
},
{
name: "Tablet",
qty: 1,
price: 800,
freeOfCharge: false,
},
];
如果客户购买智能手机，我们想给送他们免费的屏幕保护膜。
当客户将智能手机添加到购物车时，我们可以使用 flatMap() 方法将屏幕保护膜添加到购物车，如下所示：
let newCart = cart.flatMap((item) => {
if (item.name === "Smartphone") {
return [
item,
{
name: "Screen Protector",
qty: item.qty,
price: 5,
freeOfCharge: true,
},
];
} else {
return [item];
}
});
console.log(newCart);
购物车将如下所示：
[
{ name: 'Smartphone', qty: 2, price: 500, freeOfCharge: false },
{ name: 'Screen Protector', qty: 2, price: 5, freeOfCharge: true },
{ name: 'Tablet', qty: 1, price: 800, freeOfCharge: false }
]
下面使用 reduce() 方法计算购物车中商品的总金额， 它忽略了免费项目，例如屏幕保护膜：
const total = newCart.reduce((sum, item) => {
if (!item.freeOfCharge) sum += item.price * item.qty;
return sum;
}, 0);
console.log({ total });
