在 ES11 中，JavaScript 新增了 Array#flatMap 方法，该方法可以将数组中的每个元素映射为一个新的数组，并将这些新数组平铺为一个新的数组。这个方法在前端开发中非常有用，可以简化代码，提高效率。但是，使用该方法也需要注意一些问题，本文将详细介绍如何正确地使用 Array#flatMap 方法，帮助读者更好地掌握这个新特性。
Array#flatMap 方法的基本用法
Array#flatMap 方法的基本用法很简单，它接受一个函数作为参数，该函数用于将数组中的每个元素映射为一个新的数组。例如，我们有一个数组，每个元素都是一个数字数组：
const arr = [[1, 2], [3, 4], [5, 6]];
我们可以使用 Array#flatMap 方法将每个数字提取出来，生成一个新的数组：
const flatArr = arr.flatMap(x => x); // [1, 2, 3, 4, 5, 6]
可以看到，通过 Array#flatMap 方法，我们将原数组中的每个数字数组都提取出来，生成了一个新的数组。
Array#flatMap 方法的深度控制
在实际使用 Array#flatMap 方法时，我们可能需要控制其深度，以便将嵌套的数组展开到指定的深度。例如，我们有一个数组，其中包含了一些嵌套的数组：
const arr = [1, [2, [3, [4]]]];
如果我们直接使用 Array#flatMap 方法，会得到一个展开后的一维数组：
const flatArr = arr.flatMap(x => x); // [1, 2, [3, [4]]]
但是，如果我们希望将数组展开到指定的深度，该怎么办呢？这时，我们可以使用递归来实现。例如，以下是一个展开数组到指定深度的函数：
function flatDeep(arr, deep = Infinity) {
return arr.flatMap(x => Array.isArray(x) && deep > 0 ? flatDeep(x, deep - 1) : x);
}
const flatArr = flatDeep(arr, 2);
// [1, 2, 3, [4]]通过递归调用 flatDeep 函数，我们可以将数组展开到指定的深度，得到一个新的数组。需要注意的是，我们在调用 Array#flatMap 方法时，需要判断当前元素是否为数组，并且深度是否大于 0，如果是，则继续递归调用 flatDeep 函数，否则直接返回元素本身。
Array#flatMap 方法的错误使用
在使用 Array#flatMap 方法时，我们还需要注意一些错误使用方式，以避免出现一些意外的问题。以下是一些常见的错误使用方式：
错误使用方式一：返回非数组类型的值
在使用 Array#flatMap 方法时，我们需要保证返回的是一个数组类型的值。如果返回的是非数组类型的值，会导致程序出错。例如，以下是一个错误的使用方式：
const arr = [1, 2, 3]; const flatArr = arr.flatMap(x => x > 1 ? x : null); // TypeError: Result of the flatMap method is not an array
在上面的代码中，我们返回的是一个 null 值，而不是一个数组类型的值，导致程序出错。
错误使用方式二：未定义映射函数
在使用 Array#flatMap 方法时，我们需要传入一个函数作为参数，用于将数组中的每个元素映射为一个新的数组。如果未定义该函数，会导致程序出错。例如，以下是一个错误的使用方式：
const arr = [1, 2, 3]; const flatArr = arr.flatMap(); // TypeError: undefined is not a function
在上面的代码中，我们未定义映射函数，导致程序出错。
结语
Array#flatMap 方法是 JavaScript 新增的一个非常有用的方法，可以帮助我们简化代码，提高效率。但是，在使用该方法时，我们需要注意一些细节和错误使用方式，以避免出现意外的问题。本文介绍了 Array#flatMap 方法的基本用法、深度控制和错误使用方式，希望能够帮助读者更好地掌握这个新特性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d54a0fa941bf71349c6e2d