在 JavaScript 的开发中，经常会涉及到多维数组的扁平化操作。以前我们可能需要使用循环遍历等方式来手动完成这个操作。但是随着 ES10 引入的 flat 和 flatMap 方法，这个操作变得更加简单和高效。本文将介绍如何利用这两个新方法来实现二维数组的扁平化操作。
flat
flat 方法可以将一个多维数组扁平化成一维数组，实现比较简单。其使用方法如下：
----- --- - --- --- ------ ----- ------- - ----------- --------------------- -- --- -- --
在这个例子中，arr 是一个多维数组，它包含 3 个元素，分别是数字 1，一个包含数字 2 的数组，和一个包含数组 [3] 的数组，即 [1, [2, [3]]]。当我们调用 flat 方法时，它会将 arr 数组扁平化成一维数组 [1, 2, 3]。
在 flat 方法中还可以传入一个整数参数来控制扁平化的深度。例如，如果我们将 arr.flat(1)，它就只会将 arr 扁平化一层，返回 [1, 2, [3]]。
----- --- - --- --- ------ ----- ------- - ------------ --------------------- -- --- -- ----
当然，flat 方法也支持负数参数，表示扁平化的深度为负数绝对值。例如 -1，它表示完全扁平化，等同于 Infinity。
flatMap
flatMap 方法和 flat 方法类似，都是用来扁平化数组的。但是 flatMap 方法还具有一些额外的功能，例如可以先对数组进行映射再扁平化等。其使用方法如下：
----- --- - --- -- --- ----- ------ - ------------- -- --- - - ---- -------------------- -- --- -- -- -- -- --
在这个例子中，我们首先定义了一个数组 arr，它包含 3 个数字。然后我们调用 flatMap 方法，对数组中的每个元素进行映射。映射函数接受一个参数 x，表示数组中的元素。在这个例子中，我们将每个数字映射成一个包含 x 和 x*2 的新数组，即 [x, x * 2]。最终返回的数组 mapArr 是将映射后的新数组扁平化成的一维数组 [1, 2, 2, 4, 3, 6]。
实现二维数组的扁平化
了解了 flat 和 flatMap 方法的使用，我们可以利用它们来实现二维数组的扁平化。这个实现比较简单，只需要调用两次 flat 或 flatMap 方法即可。例如：
----- --- - --- --- --- --- ------ ----- ------- - ------------- -- ------------ -- --- --------------------- -- --- -- -- -- --
在这个例子中，我们定义了一个二维数组 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