【js】Array.prototype.concat和Array.flat、Array.flatMap的关联使用

Array.prototype.concat: 用于合并两个或多个数组，返回一个新数组，不改变原数组

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [7, 8, 9]
const result = arr1.concat(arr2, arr3)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

拉平数组：如果有这样一个数据: [['one', 1], ['two'， { a: [2] }], ['three', 3]]，就是数组里面的数据又是一个数组，然后想把这些数据变成['one', 1, 'two', { a: [2] }, 'three', 3]的形式，基于可以用concat：

const data = [['one', 1], ['two'， { a: [2] }], ['three', 3]]
const result = [].concat(...data)
// ['one', 1, 'two', { a: [2] }, 'three', 3]
// 如果[[{}, {}, {}], [{}], [{}, {}]]的数据可能更明显，用concat就可以取出每一个对象，然后循环数组操作处理

拉平多层嵌套的数据：如果是这样的一个数据: [['one', 1], ['two'， { a: [2] }], ['three', 3, ['哈哈哈']]]，这个数组嵌套了3层，如果想把每一层都拉平，使用concat的话就要写一个递归

const arr = [
	['one', 1], 
	['two'， { a: [2] }], 
	['three', 3, ['哈哈哈']]
]

const flapArray = (arr: Array<any>) => {
	// reduce初始化一个[]，初始的时候result就等于这个[]
	arr.reduce((result, currentItem) => {
		// currentItem就是arr里面的每一条数据，判断它是否为数组，如果不是数组，直接concat进初始化的[]即可:result是最后拿到的结果，它初始的时候就是[]
		if(Array.isArray(currentItem)) { 
			// 如果当前遍历到的currentItem是一个数组的话，又要重新遍历这个currentItem，再去判断它里面的每一个数据是否为数组，也就是又执行了一遍flatArray的逻辑，所以递归即可
			return result.concat(flatArray(currentItem))
		}
		return result.concat(currentItem)
	}, [])
}

补充：Array.flat()是数组的拉平方法，可以用来替换上面concat的操作，它的参数表示拉平到第几层

[1, 2, [3, [4, 5]]].flat()		// 不传参数默认拉平1层
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)		// 拉平2层
// [1, 2, 3, 4, 5]

// 如果不确定有多少层，传infinity，就可以自动拉平所有嵌套的层，就省得还要用concat去写一个递归了
[1, 2, [3, [4, [5, 6, [7]]]]].flat(infinity)
// [1,2, 3, 4, 5, 6, 7]

Array.flatMap(): 它会对原数组的每个成员执行一个循环操作，就相当于Array.map，返回一个可满足特定筛选条件的拉平数组

const arr = [
	[
		{ id: 1, flag: true },
		{ id: 2, flag: true },
	],
	[
		{ id: 3, flag: false },
		{ id: 4, flag: true },
	]
]
const result = arr.flatMap((item: any) => {
	return item.filter(i: any) => {
		return i.flag === false
	}
})
console.log(result)
// [{ id: 3, flag: false }]