在 ECMAScript 2018 的新规范中，加入了两个新的数组方法：Array.prototype.flat 和 Array.prototype.flatMap。本篇文章将详细地介绍这两个方法并提供实际示例，以帮助您深入学习并掌握它们。同时，我们还将探讨它们的指导意义以及如何在前端开发中使用它们。
Array.prototype.flat
Array.prototype.flat 方法可以将嵌套的数组“降维”，并返回一个新的数组。默认情况下，它只会将嵌套的数组“降维”一层，但是您可以通过可选参数 depth 来指定“降维”的深度。
语法：
array.flat([depth]);
示例：
const arr = [1, 2, [3, 4, [5, 6]]]; const flattened = arr.flat(); // [1, 2, 3, 4, [5, 6]] const flattened2 = arr.flat(2); // [1, 2, 3, 4, 5, 6]
在上面的示例中，[1, 2, [3, 4, [5, 6]]] 为嵌套的数组，flattened 数组“降维”一层后为 [1, 2, 3, 4, [5, 6]]，flattened2 数组“降维”两层后为 [1, 2, 3, 4, 5, 6]。
使用 Array.prototype.flat 的好处在于它可以使您更轻松地在处理嵌套数组时进行迭代，而不必手动编写递归函数。
Array.prototype.flatMap
Array.prototype.flatMap 方法首先使用映射函数将每个元素映射到一个新的数组，然后将所有的子数组“降维”到一个新的数组中。与 Array.prototype.flat 方法类似，也可以通过可选参数 depth 来指定“降维”的深度。
语法：
array.flatMap(callback[, depth]);
示例：
const arr = [1, 2, 3]; const mapped = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
在上面的示例中，mapped 数组中每个元素都是根据原数组中的元素经过函数映射而来的。具体来说，对于原数组中的元素 x，函数 x => [x, x * 2] 将其映射到一个新的数组 [x, x * 2] 中，最后将所有的子数组“降维”到一个新的数组中，即 [1, 2, 2, 4, 3, 6]。
使用 Array.prototype.flatMap 的好处在于它可以使您在映射函数中返回一个嵌套的数组，而最终的返回值仍然是“降维”后的一维数组，这使得您更轻松地在处理数据时进行映射。
指导意义
Array.prototype.flat 和 Array.prototype.flatMap 方法是非常实用的数组操作方法，可以让您更轻松地处理嵌套的数组和映射函数。在前端开发中，您可能会遇到一些需要进行数组操作的场景，这些方法可以帮助您更快速、更高效地完成任务。
一些具体的应用场景包括：
- 在对多层嵌套的数据进行处理时，“降维”一层或多层。
- 在使用
Array.prototype.map方法进行操作时，返回一个嵌套的数组，然后使用Array.prototype.flatMap方法将其“降维”到一维。 - 在使用
Promise.all方法并行执行多个异步操作时，使用这两个方法可以更容易地分析和处理返回的数据。
结论
上面介绍了 ECMAScript 2018 中新增的 Array.prototype.flat 和 Array.prototype.flatMap 方法，我们提供了详细的介绍和示例，以帮助您更深入学习并掌握它们。这两个方法在处理嵌套数组和映射函数时非常实用，在前端开发中也有很多应用场景，希望本篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67199f27ad1e889fe231de35