ES6中flat与flatMap使用

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 });