介绍
在 ECMAScript 2019 中，新增了一个方法 Array.prototype.flatMap()，以便更方便地处理嵌套数组。其作用类似于 Array.prototype.map() 和 Array.prototype.flat() 方法的组合。
用法
该方法用于将一个嵌套数组的各个子元素映射到一个新数组，并将所有结果平铺到一个新数组中。语法为：
array.flatMap(callback)
其中，callback 函数将接受三个参数：
- 当前元素的值。
- 当前元素的索引。
- 包含原数组的对象本身。
该方法的返回值是一个新的扁平化的数组。
以下是一些使用示例代码。
示例 1
let arr = [[1, 2], [3, 4], [5, 6]]; let flatArr = arr.flatMap(arr => arr.map(num => num * 2)); console.log(flatArr); // [2, 4, 6, 8, 10, 12]
在这个例子中，我们首先定义了一个包含嵌套数组的数组 arr，它包含 3 个子数组，每个子数组各包含 2 个整数。我们想要将所有数字都乘以 2 并形成一个新数组。这可以通过先使用另一个 map 回调函数对进行操作，然后使用 flatMap 方法平化结果，从而轻松实现。
示例 2
let arr = ['hello', 'world'];
let flatArr = arr.flatMap(word => word.split(''));
console.log(flatArr); // ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']在这个例子中，我们首先定义了一个包含两个字符串的数组 arr，我们想要将每个字符串中的每个字母提取出来，形成一个新的数组。这可以通过使用另一个 map 回调函数将每个字符串拆分为它们的字符数组，然后使用 flatMap 方法而不是 map 方法将所有字符平铺到一个大数组中，从而轻松实现。
注意事项
- flatMap() 方法返回的新数组将不包含任何空数组。为了明确这个想法，请考虑 flatten 的原理——我们只删除被嵌套的空数组。因此，如果回调函数返回一个空数组，则该空数组将不包括在返回的新数组中。
let arr = [1, 2, [3, 4], [], [5]]; let flatArr = arr.flatMap(num => num); console.log(flatArr); // [1, 2, 3, 4, 5]
在这个例子中，我们首先定义了一个数组 arr，它包含两个单个整数和四个数组元素，其中有一个空数组。在我们的回调函数中，我们没有显式地从空数组返回任何，因此它们不存在于最终的扁平化的数组中。
- 返回的新数组可能会包含 undefined。这取决于您提供的回调函数。如果该函数的某个调用返回 undefined，则将在新数组中出现 undefined 值。
let arr = [[1, 2], [3, 4]]; let flatArr = arr.flatMap(num => num % 2 === 0 ? [num] : undefined); console.log(flatArr); // [2, 4, undefined, undefined]
在这个例子中，我们首先定义了一个包含两个数组的数组 arr，它们各包含 2 个整数。我们的回调函数将检查每个数字是否可以被 2 整除。如果可以，我们将返回一个包含该数字的新数组。如果不能，这个函数将返回 undefined。这就解释了为什么在扁平化的结果中有两个 undefined。
结论
Array.prototype.flatMap() 是 ECMAScript 2019 中的一个新方法，使使用嵌套数组变得更加容易。它使用一个回调函数来将每个子元素映射到一个新数组，然后平铺所有结果到一个新数组中。需要注意的是，返回的新数组将不包含任何空数组，但可能会包含 undefined。因此，在中大型项目中使用 flatMap() 方法时，我们需要小心回调函数以防止返回 undefined 值并确保最终的扁平化数组符合我们的期望。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676facbfe9a7045d0d7569f2