flat、flatmap与map的用法区别
flat、flatmap与map的用法区别
2025-04-081574
版权
简介： 本文介绍了 JavaScript 数组方法 `flat()`、`flatMap()` 和 `map()` 的用法及区别。`flat()` 可按指定深度递归展平数组，参数为深度，默认一层；`flatMap()` 结合了 `map()` 和 `flat()` 功能，返回一维数组，长度可能不同于原数组；而 `map()` 返回与原数组长度一致的新数组。通过多个代码示例展示了三者的功能和差异，帮助开发者更好地理解和使用这些方法。
flat、flatmap()、map()
三者都是数组的方法，用法和区别详见下文
flat(num)
flat 方法会按照一个指定的递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返参数为深度 是一个数字回参数为深度 是一个数字
js
代码解读
复制代码
const arr = [1, 2, [3, 4]] arr.flat() // [1, 2, 3, 4] const arr1 = [1, 2, [3, 4, [5, 6]]] arr1.flat() // [1, 2, 3, 4, [5, 6]]
flat(),会默认递归遍历一层，将其展开，以一个新的数组返回。可以看到在没有传参的情况下，第二个例子并没有完全展开。
js
代码解读
复制代码
const arr2 = [1, 2, [3, 4, [5, 6]]] arr2.flat(2) // [1, 2, 3, 4, 5, 6]
上面的例子中，数组中又存在 两层 的嵌套数组，故传递一个参数 2，即可将该数组展开
js
代码解读
复制代码
const arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr3.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
上面的例子中，数组中存在 四层 的嵌套数组，传递Infinity（表示无限），无论数组中嵌套了多少层，都可以将其展开为一维数组
js
代码解读
复制代码
const arr4 = [1, 2, , 4, 5]; console.log(arr4); // [1, 2, empty, 4, 5] console.log(arr4.flat()); // [1, 2, 4, 5]
还有一点，flat方法会移除数组中的空项
flatMap(callback,thisArg)
js
代码解读
复制代码
let arr1 = ["it's Sunny in", "", "California"]; arr1.map(x => x.split(" ")); // [["it's","Sunny","in"],[""],["California"]] arr1.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"]js
代码解读
复制代码
const arr1 = [1,2,3,4,5] const result1 = arr1.map((i,index,arr)=>{ if(i>2) { return i } }) console.log(result1); //[undefined, undefined, 3, 4, 5] const result2 = arr1.flatMap((i,idnex,arr)=>{ return i>2?[i]:[] }) console.log(result2); //[3, 4, 5]
上面的例子中可以看出 flatmap() 与 map()的区别：
不同点：1- flatmap较map少嵌套了一层 [] ,2- map是必须会映射一个与原数组长度一致的新数组，而flatmap不一定与原数组长度一致
相同点：两者都返回一个新数组，不影响原数组。且都需要return
转载来源：https://juejin.cn/post/7152346248451178503
漫思