利用 ES10 的 flat 和 flatMap 实现二维数组的扁平化操作

在 JavaScript 的开发中，经常会涉及到多维数组的扁平化操作。以前我们可能需要使用循环遍历等方式来手动完成这个操作。但是随着 ES10 引入的 flat 和 flatMap 方法，这个操作变得更加简单和高效。本文将介绍如何利用这两个新方法来实现二维数组的扁平化操作。

flat

flat 方法可以将一个多维数组扁平化成一维数组，实现比较简单。其使用方法如下：

const arr = [1, [2, [3]]];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3]

在这个例子中，arr 是一个多维数组，它包含 3 个元素，分别是数字 1，一个包含数字 2 的数组，和一个包含数组 [3] 的数组，即 [1, [2, [3]]]。当我们调用 flat 方法时，它会将 arr 数组扁平化成一维数组 [1, 2, 3]。

在 flat 方法中还可以传入一个整数参数来控制扁平化的深度。例如，如果我们将 arr.flat(1)，它就只会将 arr 扁平化一层，返回 [1, 2, [3]]。

const arr = [1, [2, [3]]];
const flatArr = arr.flat(1);
console.log(flatArr); // [1, 2, [3]]

当然，flat 方法也支持负数参数，表示扁平化的深度为负数绝对值。例如 -1，它表示完全扁平化，等同于 Infinity。

flatMap

flatMap 方法和 flat 方法类似，都是用来扁平化数组的。但是 flatMap 方法还具有一些额外的功能，例如可以先对数组进行映射再扁平化等。其使用方法如下：

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

在这个例子中，我们首先定义了一个数组 arr，它包含 3 个数字。然后我们调用 flatMap 方法，对数组中的每个元素进行映射。映射函数接受一个参数 x，表示数组中的元素。在这个例子中，我们将每个数字映射成一个包含 x 和 x*2 的新数组，即 [x, x * 2]。最终返回的数组 mapArr 是将映射后的新数组扁平化成的一维数组 [1, 2, 2, 4, 3, 6]。

实现二维数组的扁平化

了解了 flat 和 flatMap 方法的使用，我们可以利用它们来实现二维数组的扁平化。这个实现比较简单，只需要调用两次 flat 或 flatMap 方法即可。例如：

const arr = [1, [2, 3], [4, [5]]];
const flatArr = arr.flatMap(x => x).flatMap(x => x);
console.log(flatArr); // [1, 2, 3, 4, 5]

在这个例子中，我们定义了一个二维数组 arr，它包含 3 个元素，分别是数字 1，一个包含数字 2 和 3 的数组，和一个包含数字 4 和一个包含数字 5 的数组。为了将这个二维数组扁平化，我们需要先调用 flatMap 方法，将每个元素都变成一维数组，返回[1, 2, 3, 4, [5]]。然后再调用一次 flatMap 方法，将其中第五个元素 [5] 扁平化成数字 5，最终返回的一维数组就是 [1, 2, 3, 4, 5]。

总结

在本文中，我们介绍了如何利用 ES10 的 flat 和 flatMap 方法，实现二维数组的扁平化操作。这两个方法都比较简单，但是能够显著地提高代码的效率和可读性。希望本文对前端开发者们有所启发，让大家更好地掌握 JavaScript 编程技能。

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