ES9 新特性：Array.prototype.{flat,flatMap} 详解

随着 JavaScript 语言的不断发展和完善，前端开发者们在使用新的语言特性和 API 上面也变得越来越轻松。本文将会讨论 JavaScript 新发布的 ES9 版本中的两个新特性：Array.prototype.flat 和 Array.prototype.flatMap。

Array.prototype.flat

在编写 JavaScript 代码的时候，我们经常会遇到需要将一个多维数组（也称为“嵌套数组”）平铺成一个一维数组的情况。而在 ES5 和 ES6 时期，我们通常需要使用递归方法或者自定义函数来实现这一目标，如下所示：

const arr = [1, [2, 3], [4, [5, 6]]];
const flattenedArr = arr.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4, 5, 6]

然而，从 ES9 开始，我们现在可以使用更加简便和高效的方法：Array.prototype.flat()。这个方法可以将多维数组平铺为一维数组，并且可以指定要展开的维度。例如：

const arr = [1, [2, 3], [4, [5, 6]]];
const flattenedArr = arr.flat(); // [1, 2, 3, 4, [5, 6]]

我们还可以指定要展开的深度级别，如下所示：

const arr = [1, [2, 3], [4, [5, 6]]];
const flattenedArr = arr.flat(2); // [1, 2, 3, 4, 5, 6]

在这个例子中，我们执行了两次平铺操作，展开了整个数组的两个深度级别。

Array.prototype.flatMap

在某些情况下，我们不仅需要将一个多维数组平铺为一维数组，还需要对结果数组中的每个元素应用一个操作，以获得最终的结果。这个问题可以使用 Array.prototype.map() 方法来解决，但是由于这个方法只能返回一个新的一维数组，所以我们需要使用.flat() 方法来将结果数组再平铺一次才能得到想要的结果，如下所示：

const arr = [1, 2, 3];
const mappedArr = arr.map(x => [x * 2]); // [[2], [4], [6]]
const flattenedArr = mappedArr.flat(); // [2, 4, 6]

从 ES9 开始，我们可以使用更加简单和有效的方法，即 Array.prototype.flatMap() 方法。这个方法结合了.map() 和.flat() 两个方法，可以让我们在同一步骤中完成展开和映射操作，如下所示：

const arr = [1, 2, 3];
const flattenedMappedArr = arr.flatMap(x => [x * 2]); // [2, 4, 6]

总结

Array.prototype.flat() 和 Array.prototype.flatMap() 方法是 ES9 中新增的两个非常有用的方法，它们可以帮助我们更加高效和简便地处理多维数组数据。在实际开发中，我们可以在需要平铺多维数组并且执行映射操作的场景中使用这两个方法来提高代码质量和开发效率。

希望本文能够帮助读者更深入地了解 ES9 中的 Array.prototype.flat 和 Array.prototype.flatMap 方法，并且能够在日常工作中灵活应用相关的知识。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ef8ca968c7c53b0d5a42a