本文详解 JavaScript ES2019 引入的 flat() 和 flatMap() 数组展平方法。flat() 用于递归连接子数组元素，支持指定深度；flatMap() 结合映射与扁平化，通常比 map 接 flat 效率更高。文章通过代码示例对比两者在计算累加值时的表现，并介绍如何处理空项及无限深度展平。
自 ES2019 标准起，JavaScript 引入了数组扁平化的新机制，能够处理任意深度的嵌套数组。
flat
flat() 方法会生成一个新数组，将原数组中所有子数组的元素递归地合并到指定的层级深度。
语法：array.flat(depth)
- array：调用
flat()方法的源数组。 - depth：可选参数，定义展平的层级深度，默认值为
1。
该方法依据指定的深度参数递归遍历数组，将遍历到的子数组元素与原数组元素合并，最终返回一个新数组。
const arr = [[1, 2], [3, 4], 5];
console.log(arr.flat()); // [ 1, 2, 3, 4, 5 ]flat() 方法在操作时会自动移除数组中的空项：
const arr = [[1, 2], , [3, 4], 5];
console.log(arr.flat()); // [ 1, 2, 3, 4, 5 ]对于层级结构复杂、嵌套深度不统一的数组，无需手动计算具体层数，直接传入参数
Infinity即可将所有层级的数组完全展平。
const arrVeryDeep = [[1, [2, 2, [3, [4, [5, [6]]]]], 1]];
console.log(arrVeryDeep.flat(Infinity)); // [ 1, 2, 2, 3, 4, 5, 6, 1 ]flatMap
flatMap() 方法先对每个元素执行映射函数，随后将结果压缩合并为单个新数组。其效果等同于 map 方法后接深度为 1 的 flat()，但 flatMap() 在将结果合并为单一数组时效率略高。
语法
// Arrow function
flatMap((currentValue) => { ... } )
flatMap((currentValue, index) => { ... } )
flatMap((currentValue, index, array) => { ... } )
// Callback function
flatMap(callbackFn)
flatMap(callbackFn, thisArg)
// Inline callback function
flatMap(function(currentValue) { ... })
flatMap(function(currentValue, index) { ... })
flatMap(function(currentValue, index, array){ ... })
flatMap(function(currentValue, index, array) { ... }, thisArg)- callbackFn：处理新数组元素的回调函数，接收三个参数
- currentValue：当前正在处理的数组元素。
- index：可选参数，当前正在处理的数组元素的索引。
- array：可选参数，调用数组
map()的原始数组。
- thisArg：执行
callbackFn时作为this使用的值。
该方法返回一个新数组，其元素为每个输入项经回调函数处理后的结果，并展平至深度 1。
const userRunning1 = {
movements: [1000, 4500, 500, 1200],
};
const userRunning2 = {
movements: [2000, 4500, 2500, 12000],
};
const userRunning3 = {
movements: [10000, 5000, 1500, 800],
};
const allRunning = [userRunning1, userRunning2, userRunning3];
// flat
const overalDistance = allRunning
.map((acc) => acc.movements)
.flat()
.reduce((acc, mov) => acc + mov, 0);
console.log(overalDistance); // 45500
// flatMap
const overalDistance2 = allRunning
.flatMap((acc) => acc.movements)
.reduce((acc, mov) => acc + mov, 0);
console.log(overalDistance2); // 45500上述代码分别利用 flat() 和 flatMap() 方法解决同一问题，即累加所有用户的跑步记录。
flatMap()的展平深度固定为1，而flat()允许指定多级展平。
到此这篇关于JavaScript 数组展平方法: flat() 和 flatMap()详解的文章就介绍到这了,更多相关js数组展平内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！