ECMAScript 2019 中的 flat() 和 flatMap() 方法

在现代的前端开发中，我们可能会使用多维嵌套数组来完成一些复杂的操作。然而，在处理这样的数组时，往往需要写出冗长的循环语句，并且这样的处理方式也容易出错。为了更高效、更方便地处理多维数组，ECMAScript 2019 引入了两个新方法——flat() 和 flatMap()。

flat() 方法

flat() 方法可以将一个多维嵌套数组 “铺平” 成一个一维数组。其返回值为 “铺平” 后的新数组，并不会改变原始数组，如果不传递任何参数默认只铺一层。

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

我们可以看到，在上面的例子中，原数组 arr 在调用 flat() 方法后没有发生变化，生成了一个新的一维数组 flattened。

flat() 支持一个可选参数 depth，用于指定铺平的层数。例如，我们可以修改上面的例子，只铺平一层：

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

flat() 方法同样也可以处理稀疏数组，它会将删除的项当做 undefined 处理。

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

flatMap() 方法

flatMap() 方法可以将一个多维嵌套数组进行铺平，并应用一个指定的操作后生成新的一维数组。其返回值为处理后的新数组，不改变原数组的值。

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

在上述示例中，我们将数组 [1, 2, 3] 铺平，然后每个元素都应用了一个函数（在本例中是将其乘以 2），最终获得新的一维数组 [1, 2, 2, 4, 3, 6]。

注意，flatMap() 只铺平一级。如果回调函数返回一个数组，该数组将作为单个元素插入到新数组中，而不会铺平。

const arr = [1, 2, 3];
const mapped = arr.flatMap(x => [[x, x + 1]]);
// [[1, 2], [2, 3], [3, 4]]

在上面的示例中，回调函数返回了二维数组 [[x, x+1]]，该数组将被插入新数组中而不是铺平。

总结和指导意义

ECMAScript 2019 中新增的 flat() 和 flatMap() 方法解决了许多处理多维嵌套数组的常见问题，消除了许多不必要的复杂度和出错的可能性。通过使用这些方法，我们可以更快、更少出错地处理数组，从而提高代码执行的效率和质量。

跟运用到公司内部开发的实例中，我们在处理大量数据时，经常会遇到多层嵌套数组的情况，并需要处理这些数组进行数据的抽取或者展示。使用 flat() 和 flatMap() 方法将相对较长的代码压缩至更短的形式，是我们在开发过程中更快捷高效的方式。

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