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)。

复制代码
相关推荐
变与不变8066 小时前
jQuery怎么使用
前端·javascript
神膘护体小月半6 小时前
flex 布局的 order 属性
前端·css
paopaokaka_luck6 小时前
流浪动物救助与收养系统(DeepSeek AI对话、 ECharts多维分析、救助流程衔接、领养与回访衔接、 捐赠确认与公示、志愿者协作)
java·前端·javascript·人工智能·mysql·echarts·推荐算法
仰望.7 小时前
vue 表格组件 vxe-table 树表格懒加载支持拖拽排序的详细用法
前端·javascript·vue.js·vxe-table
前端 贾公子7 小时前
vite-plugin-uni-manifest 升级指南
前端
小码哥_常7 小时前
iPhone 用户传了张 HEIC,我的前端崩了
前端
小码哥_常7 小时前
你发的原图可能暴露你家地址——聊聊图片 EXIF 隐私
前端
java1234_小锋7 小时前
【技术专题】CSS3 网页技术 - CSS3 优先级
前端·css·css3
鸿蒙开发8 小时前
共享 Schema 与 SchemaFactory
前端·后端·harmonyos
屏什么录8 小时前
录屏超过两小时就卡顿崩盘?从参数调优到代码实现,一文彻底搞定长时间录屏
前端·音视频开发