ES6数组的`flat()`和`flatMap()`函数用法

今天给大家分享ES6中两个超实用的数组函数:flat()flatMap(),学会它们能让数组处理变得更轻松!

1. flat()函数

1.1 基本介绍

flat()用于将嵌套数组"拍平",即将多维数组转换为一维数组。

1.2 语法

javascript 复制代码
const newArray = oldArray.flat([depth]);
- `depth`:可选参数,表示拍平深度,默认值为1


### 1.3 示例

#### 默认深度(depth=1)
```javascript
const arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flat()); 
// 输出: [1, 2, 3, 4, [5, 6]]
指定深度(depth=2)
javascript 复制代码
const arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flat(2)); 
// 输出: [1, 2, 3, 4, 5, 6]
完全拍平(Infinity)
javascript 复制代码
const arr = [1, [2, [3, [4]]]];
console.log(arr.flat(Infinity));
// 输出: [1, 2, 3, 4]

1.4 注意事项

  • 自动移除空元素
javascript 复制代码
console.log([1, , 3].flat()); // 输出: [1, 3]

2. flatMap()函数

2.1 基本介绍

flatMap()map()flat(1)的组合,先映射再拍平一层。

2.2 语法

javascript 复制代码
const newArray = arr.flatMap(callback(currentValue[, index[, array]]){
  // 返回新数组元素
});

2.3 示例

javascript 复制代码
const nums = [1, 2, 3];

// 等效于map后接flat(1)
console.log(nums.flatMap(x => [x * 2])); 
// 输出: [2, 4, 6]

// 只能拍平一层
console.log(nums.flatMap(x => [[x * 2]]));
// 输出: [[2], [4], [6]]

2.4 实际应用

javascript 复制代码
// 拆分字符串并展开
const sentences = ["Hello world", "Good morning"];
console.log(sentences.flatMap(s => s.split(' ')));
// 输出: ["Hello", "world", "Good", "morning"]

总结对比

方法 作用 拍平深度
flat() 单纯拍平数组 可指定
flatMap() 先map再flat(1) 固定1层

这两个方法在处理嵌套数组时非常有用,合理使用可以让代码更简洁高效!

小贴士:遇到复杂嵌套结构时,可以组合使用map+flat或直接使用flat(Infinity)

复制代码
相关推荐
@大迁世界1 分钟前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路10 分钟前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug14 分钟前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu1213816 分钟前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中37 分钟前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路41 分钟前
GDAL 实现矢量合并
前端
hxjhnct43 分钟前
React useContext的缺陷
前端·react.js·前端框架
冰暮流星1 小时前
javascript逻辑运算符
开发语言·javascript·ecmascript
前端 贾公子1 小时前
从入门到实践:前端 Monorepo 工程化实战(4)
前端
菩提小狗1 小时前
Sqlmap双击运行脚本,双击直接打开。
前端·笔记·安全·web安全