在前端开发中，我们经常需要处理多层嵌套的数组，并且将其扁平化处理。在 ES12 中，提供了 Array.flat 和 Array.flatMap 方法来解决这个问题。本文将详细介绍这两个方法的语法、用法、示例以及其在前端开发中的意义。
Array.flat
Array.flat 方法可以将多维数组按照指定深度扁平化成一个新数组，不改变原数组。它的语法如下：
arr.flat([depth])
其中，arr 是要进行扁平化处理的数组，depth 是可选的层数，即指定要扁平化的层数，默认情况下为 1。
例如，我们有一个多维数组：
const arr = [1, 2, [3, 4, [5, 6]]];
如果我们想要将其扁平化成一个一维数组，可以使用 Array.flat 方法：
const newArr = arr.flat(); // [1, 2, 3, 4, [5, 6]] const newArr2 = arr.flat(2); // [1, 2, 3, 4, 5, 6]
在上面的例子中，newArr 将嵌套的数组扁平化了一层，而 newArr2 则将嵌套的数组全部扁平化。
Array.flatMap
Array.flatMap 方法不仅可以扁平化多维数组，还可以对每个元素进行操作并返回一个新的数组，在扁平化过程中去除 null 和 undefined 值，不改变原数组。它的语法如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，arr 是要进行操作的数组，callback 是一个回调函数，用于对每个元素进行操作，并返回一个新的数组。该回调函数可以接受三个参数，分别为当前元素值、当前元素索引和当前元素所属的原数组。
例如，我们有一个多维数组：
const arr = [1, 2, 3, 4]; const newArr = arr.flatMap(x => [x * 2]); // [2, 4, 6, 8]
在上面的例子中，我们对原数组中的每个元素进行了乘以 2 的操作，并返回了一个新的数组。在扁平化过程中，null 和 undefined 值被过滤掉了。
指导意义
Array.flat 和 Array.flatMap 方法在前端开发中可以大大提高数组的处理效率和代码的简洁性。在处理多层嵌套的数组时，使用这两个方法可以省去大量的代码和时间，提高代码的可读性和维护性。此外，Array.flatMap 方法还可以对每个元素进行操作，并返回一个新的数组，极大地拓展了数组处理的能力。
示例代码
以下是使用 Array.flat 和 Array.flatMap 方法的示例代码，展示了如何使用这两个方法来处理数组：
-- -------------------- ---- ------- -- ---------- -- ----- ---- - --- -- --- -- --- ----- ----- ------- - ------------ --------------------- -- --- -- -- -- --- --- ----- ---- - --- -- --- -- --- ----- ----- ------- - ------------- --------------------- -- --- -- -- -- -- -- -- ------------- -- ----- ---- - --- -- -- --- ----- ------- - -------------- -- -- - ---- --------------------- -- --- -- -- -- ----- ---- - --- -- -- --- ----- ------- - -------------- -- - - - --- - - --- - ---- --------------------- -- --- -- ----- ---- - --- -- -- --- ----- ------- - -------------- -- --- - - ---- --------------------- -- --- -- -- -- -- -- -- --展开代码
以上就是 ES12 中的 Array.flat 和 Array.flatMap 方法详解。无论是处理多层嵌套的数组还是对原数组进行操作，这两个方法都是非常有用的工具，建议开发者熟练掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca40a4e46428fe9e23344d
