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

Array.prototype.flat()

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

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

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

1. 语法概览

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

const newArray = arr.flat([depth]);

• arr: 需要进行扁平化处理的数组。
• depth（可选）: 指定嵌套数组要扁平化的深度，默认值为 1。如果不提供该参数，或者使用 Infinity，将会全扁平化有嵌套数组。

2. 基本用法

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

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，用于指定嵌套数组要扁平化的深度。这对于处理深层嵌套的数组非常有用：

const deeplyNestedArray = [1, [2, [3, [4, [5]]]]];
const fullyFlatArray = deeplyNestedArray.flat(Infinity);

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

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

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

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

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