ES11 中数组扩展：flat() 和 flatMap() 方法的真正使用方法-JavaScript中文网-JavaScript教程资源分享门户

ES11 中数组扩展：flat() 和 flatMap() 方法的真正使用方法

在 JavaScript 中，数组是非常常用的一种数据结构。为了更好地处理数组，ES11 引入了两个新的数组扩展方法：flat() 和 flatMap() 。这两个方法分别用于扁平化数组和映射数组。

flat() 方法

由于 JavaScript 中支持多维数组，因此在操作数组时经常需要扁平化数组。例如，有一个多维数组 [[0, 1], [2, 3], [4, 5]]，需要将其扁平化为一维数组 [0, 1, 2, 3, 4, 5] 。这时可以使用 flat() 方法来处理。

flat() 方法有个可选参数 depth，默认值为 1 。depth 表示扁平化的深度，当 depth 值大于等于数组的深度时，数组将完全扁平化。

下面是 flat() 方法的使用方法。

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

在这个例子中，因为数组 arr 只有两层，所以 depth 的默认值 1 完全可以达到扁平化的效果。

接下来，我们来看一个更复杂的例子，让深度为 2 的多维数组扁平化。

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

在这个例子中，数组 arr 的深度为 3 ，而我们将 depth 的值设为 2 ，即可以达到完全扁平化的效果。

需要注意的是，flat() 方法只能将数组扁平化到指定层级，如果要完全扁平化多维数组，需要同时使用 flat() 和递归。

除了 flat() 方法之外，ES11 还引入了 flatMap() 方法。flatMap() 方法的主要作用是将数组的各个元素映射为一个新元素，并返回一个新数组。这个过程中，flat() 方法也被隐式地调用了。

具体实现方式如下：

const newArr = originalArr.flatMap(item => item.map(newItem => /* 经过处理后的新元素 */));

这个代码片段中，originalArr 表示需要进行操作的原数组，在 flatMap() 方法中，使用 map() 方法来对原数组的元素进行逐个操作，并返回新的元素。最终，新的元素被扁平化为一个新数组返回。

在例子中，可以使用 flatMap() 方法将数组中的元素进行平方处理并得到一个新数组。

const arr = [1, 2, 3, 4, 5];
const squaredArr = arr.flatMap(item => [item ** 2]);
console.log(squaredArr); // [1, 4, 9, 16, 25]

上述代码中，使用了 flatMap() 方法将数组 arr 中的每个元素进行平方运算，并将结果作为新的数组返回。

需要注意的是，flatMap() 方法和 map() 方法的返回值也可以是一个数组，这时它们就像是嵌套使用了 flat() 方法一样，也会将返回的数组扁平化。这看上去有些抽象，但下面的代码能清楚地展示这一情况。

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

由于 map() 方法返回的是一个长度为 1 的一维数组，因此 flatMap() 方法将这个数组扁平化得到的是新数组中的每个元素，即 [2, 4, 6] 。

ES11 引入的 flat() 和 flatMap() 方法在处理数组时非常实用。其中，flat() 方法可以用于将多维数组扁平化，而 flatMap() 方法则是用于对原数组的元素进行映射操作和扁平化操作。在实际编程中，应根据需求选用不同的方法。

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