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...

相关推荐
岁忧1 小时前
(LeetCode 面试经典 150 题 ) 11. 盛最多水的容器 (贪心+双指针)
java·c++·算法·leetcode·面试·go
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app