原文：How to Use the flat() and flatMap() Methods to Flatten Arrays in JavaScript，作者：Kenechukwu Nwobodo
在本文中，我将解释如何使用 ES2019（EcmaScript 2019）中引入的新数组方法——flat() 和 flatMap()。你可以使用这些方法来展平数组。
这些方法非常有用且易于使用。在你的下一个项目中使用这些方法真的很酷。喝杯咖啡，让我们开始学习吧。
前提
你应该熟悉 JavaScript 中数组的概念，然后才能学习本教程。
什么是数组
数组对象是一种数据结构，在不同的编程语言中用于存储不同的数据集合。
JavaScript 中的数组示例
const array = [1, 2, 3, true, null, undefined];
console.log(array);
// 期待的输出
1, 2, 3, true, null, undefined
在上面的代码中，我们分配了一个名为 arr 的变量，并在其中存储了不同数据类型的不同元素/数据。
第一个为 1 的元素位于索引 0 处。最后一个元素 undefined 位于索引 5 处。
不要忘记数组对象是零索引的，这意味着第一个元素从零索引开始。
JavaScript 数组的特征
- 数组是零索引的：这表示数组中的第一个元素位于索引 0 处。这里的索引表示位置。在 JavaScript 和其他编程语言中，我们应该使用的词是索引而不是位置。
- JavaScript 数组可以包含不同的数据类型：这意味着 JavaScript 数组可以包含数字、字符串、布尔值、空值等的混合。
- JavaScript 创建浅拷贝：这意味着你可以创建数组的不同副本——即无需更改原始数组。
新的 JavaScript 数组方法
数组是 JavaScript 中用于存储数据的最流行的数据结构之一。
你可以使用不同的数组方法来简化操作并使你的生活更轻松。其中一些方法包括 reduce()、filter()、map()、flat()、flatMap() 等等。
但在本文中，我们不会讨论 JavaScript 中使用的所有数组方法。在这里，我们将讨论新的 flat() 和 flatMap() 方法，你可以使用它们将原始数组转换为新数组。
如何在 JavaScript 中使用 flat 数组方法
你使用 flat 方法将原始数组转换为新数组。它通过收集数组中的子数组并将其连接到单个数组中来实现这一点。
关于此数组方法的一个重要说明是，你可以根据数组的深度将原始数组计算为另一个数组。这种方法非常有用，因为它使计算数组的操作变得更加容易。
flat() 数组方法的例子
如何设置 depth 参数
array.flat(depth);
depth 值默认为 1，你可以将其留空。depth 值采用数字作为其数据类型。
flat() 数组方法示例 1
array.flat(1) 等同于 array.flat()。
array.flat(2);
上面的 depth 值是 2。
const arr = ["mon", "tues", ["wed", "thurs", ["fri", "sat"]], "sun"] ;
console.log(arr.flat());
// 期待的输出
["mon", "tues", "wed", "thurs", Array ["fri", "sat"], "sun"];
那么这段代码发生了什么？
首先，该数组包含两个子数组，它们是 ["wed", "thurs", ["fri", "sat"]]。
我们在名为 arr 的数组上使用 flat() 方法连接第一个子数组，因为我们没有在 flat() 方法中指定 depth 值。回想一下，默认 depth 值为 1。
所以你可以猜到如果 depth 值为 2，数组对象会是什么，对吧？
flat() 数组方法示例 2
const arr = [1, 2, [3, 4, 5], 6, 7];
console.log(arr.flat());
// 期待的输出
[1, 2, 3, 4, 5, 6, 7]
在上面的代码中，数组包含一个子数组，即 [3, 4, 5]。
我们在名为 arr 的数组上使用 flat() 方法将两个数组连接在一起成为一个数组。
flat() 数组方法示例 3
//depth 2 example
const arr2 = [[[1, 2], 3, 4, 5]] ;
console.log(arr2.flat(2));
// 期待的输出
[1, 2, 3, 4, 5]
在上面的代码中，名为 arr2 的数组包含两个子数组。
我们在 arr2 上使用 flat() 方法将两个数组连接成一个数组，因为在 flat(2) 方法中使用了 depth 值 2。快速浏览一下上面的 depth 值的作用。
数组方法是递归连接数组中元素的好方法。
如何在 JavaScript 中使用 flatMap 数组方法
flatMap() 方法使用 map() 和 flat() 方法的组合来执行操作。
flatMap() 循环遍历数组的元素，并将元素连接到一个级别。 flatMap() 接受一个回调函数，该函数接受原始数组的当前元素作为参数。
flatMap() 数组方法示例
const arr3 = [1, 2, [4, 5], 6, 7, [8]] ;
console.log(arr3.flatMap((element) => element));
// 期待的输出
[1, 2, 4, 5, 6, 7, 8]
在上面的代码中，名为 arr3 的数组包含两个不同的子数组。
我们通过传入一个回调函数 (element) => element 在数组上使用 flatMap() 方法，该函数循环遍历数组，然后将数组连接成一个数组。
有时你会遇到一种情况，即 depth 值大于 1，并且你决定将新数组更改为一个基本级别，然后你必须在 flatMap() 方法之后立即使用 flat() 方法。
这是一个例子：
const arr4 = [1, 2, [3, [4, 5, [6, 7]]]] ;
console.log(arr4.flatMap((element) => element).flat(2)) ;
// 期待的输出
[1, 2, 3, 4, 5, 6, 7]
在上面的代码中，名为 arr4 的数组包含三个子数组。
我们通过传入一个回调函数 (element) => element 在数组上使用 flatMap() 方法，该函数循环遍历数组，然后连接数组。
我们使用 flat(2) 方法通过传入 depth 值 2 来进一步将数组连接成单个数组。
确保在不通过 flat(2) 方法的情况下练习上面的示例并查看差异。
这就是你开始使用这两种新数组方法所需的全部内容。
小结
在本文中，我简要讨论了数组是什么以及它们在 JavaScript 中的用处。然后我们了解了 ECMAScript 2019 中引入的两个新的重要数组方法，它们允许你将原始数组更改为新数组。
这些新的数组方法是 flat() 和 flatMap() 方法。
你使用 flat() 方法将子数组递归地连接到单个数组中。flat() 方法将 depth 值作为其参数，该参数是可选的，具体取决于你希望展平（连接）的数组的深度。flat() 方法默认采用 1 作为深度。
另一方面，flatMap() 的工作原理基本相同，只是它是 map() 和 flat() 方法的组合。 flatMap() 循环遍历数组中的元素并连接元素。
当你将原始数组更改为新数组时，这两种新方法都很有用。它们值得你在下一个大项目或小项目中尝试。