Array.flat()功能 降维多维数组实现扁平化

Array.prototype.flat()

JavaScript 的 Array.prototype.flat() 方法是一项强大而灵活的数组操作工具,我们知道可以用这个方法来扁平化数组,省去了自己用循环遍历数组的麻烦,但是光会用还是远远不够的,我们还必须懂得这个方法的源码是如何实现的,那么接下来就让我们一起来深刻认识这个方法以及他的源码吧!

在MDN文档中是这样描述flat()这个方法的:

通过今天的这篇文章,我们将先来了解这个方法的语法、基本用法、深度控制以及在实际应用中的运用,熟悉之后,我们再拓展深度,切入重点,尝试手写一个flat()函数。那么话不多嗦,直接开始!

1. 语法概览

让我们首先了解一下 Array.prototype.flat() 方法的基本语法:

javascript 复制代码
const newArray = arr.flat([depth]);
  • arr: 需要进行扁平化处理的数组。
  • depth(可选): 指定嵌套数组要扁平化的深度,默认值为 1。如果不提供该参数,或者使用 Infinity,将会全扁平化有嵌套数组。

2. 基本用法

让我们通过一个简单的例子来了解基本用法。考虑以下的嵌套数组:

javascript 复制代码
const nestedArray = [1, 2, [3, 4, [5, 6]]];
const flatArray = nestedArray.flat();

console.log(flatArray);
// 输出: [1, 2, 3, 4, [5, 6]]

在这个例子中,nestedArray 包含了嵌套的数组。通过调用 flat() 方法,我们得到了一个扁平化的新数组 flatArray。需要注意的是,嵌套的数组被拉平,但仍然存在嵌套。

3. 控制扁平化深度

flat() 方法还支持一个可选参数depth,用于指定嵌套数组要扁平化的深度。这对于处理深层嵌套的数组非常有用:

javascript 复制代码
const deeplyNestedArray = [1, [2, [3, [4, [5]]]]];
const fullyFlatArray = deeplyNestedArray.flat(Infinity);

console.log(fullyFlatArray);
// 输出: [1, 2, 3, 4, 5]

在这个例子中,使用了 Infinity 作为参数,将所有层级的嵌套数组全扁平化,得到了一个包含所有元素的一维数组 fullyFlatArray

4. 实际应用 - 文本数据处理

flat() 方法应用于文本数据处理是一个实际而常见的应用场景。我们来看以下包含多个句子的文章:

javascript 复制代码
const article = `
  JavaScript is a versatile programming language that is commonly used for web development.
  It allows developers to create dynamic and interactive websites.
  With features like closures and prototypes, JavaScript enables the development of powerful and efficient code.
`;

// 将文章分割成句子数组
const sentences = article.split('.');

// 将句子数组转换为包含单词的二维数组
const wordsArray = sentences.map(sentence => sentence.trim().split(' '));

// 使用 flat() 将二维数组扁平化
const flatWordsArray = wordsArray.flat();

console.log(flatWordsArray);
// 输出: ["JavaScript", "is", "a", "versatile", "programming", "language", ...]

在这个例子中,首先将文章分割成句子数组,然后将每个句子分割成单词数组。最后,通过使用 flat() 方法,将这个二维数组扁平化成一个包含所有单词的一维数组 flatWordsArray

总体而言,Array.prototype.flat() 方法是处理嵌套数组的一项强大工具,提供了清晰而高效的方式来转换数据形式。在实际应用中,它可以显著简化对复杂数据结构的处理过程。

结语

那么到了这里我们今天的文章就结束啦~

创作不易,如果感觉这个文章对你有帮助的话,点个赞吧♥

更多内容map()和parseInt()都搞懂了,那Array.map(parseInt)呢?

博主的开源Git仓库: gitee.com/cheng-bingw...

相关推荐
然我13 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子17 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹21 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器27 分钟前
指定阿里镜像原理
前端
枷锁—sha32 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha34 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux