flatMap() 方法是 ES9 中被引入的一个新特性，它的作用与 map() 方法类似，但是能够同时对数组进行变形和平铺操作。在本文中，我们将介绍 flatMap() 方法的使用方法，并且会给出示例代码来帮助读者更好地理解这个新特性。
flatMap() 方法为什么出现？
flatMap() 方法可以看做是 map() 和 flat() 方法的结合。在原来版本的 JavaScript 中，如果我们想要对一个数组进行变形和平铺操作，我们需要先调用 map() 方法，再使用 flat() 方法。这个过程比较繁琐，而且需要写很多代码。因此，flatMap() 方法在 ES9 中被引入，为开发者提供了一种更加便捷的方式来实现数组的变形和平铺操作。
flatMap() 方法的使用方法
flatMap() 方法接收一个数组作为参数，然后对其进行变形和平铺操作。具体来说，该方法的使用方法如下：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 是需要对数组中的每个元素进行处理的函数，该函数可以接收以下参数：
currentValue：数组中当前被处理的元素。index（可选）：currentValue在数组中的索引。array（可选）：正在被处理的数组。
在 callback 函数中，我们需要返回一个数组。最后，flatMap() 方法会对这些数组进行平铺操作，将它们平铺成一个大数组，并返回这个数组。
需要注意的是，flatMap() 方法会自动过滤掉 callback 返回的值为 null 或 undefined 的情况。因此，在使用 flatMap() 方法时，确保 callback 函数将值正确地返回。
示例代码
下面是一个使用 flatMap() 方法的示例代码。这个代码块演示了如何让一个数组中的元素乘以 2、3、4，然后将其展平为一个数组。
const arr = [1, 2, 3]; const result = arr.flatMap(x => [x * 2, x * 3, x * 4]); console.log(result); // [2, 3, 4, 4, 6, 8, 6, 9, 12]
在上述代码中，arr 是一个包含 1、2、3 三个元素的数组。result 是将这个数组中的每个元素乘以 2、3、4 之后所得到的数组。
需要注意的是，flatMap() 方法会自动展平 callback 函数内部返回的数组，因此不需要在 callback 函数中使用额外的 flat() 函数来进行展平操作。
总结
在本文中，我们介绍了 ES9 中的新特性 flatMap() 方法，并给出了使用方法和示例代码。通过本文的学习，读者能够有效地理解这个新特性的用途和优势。在实际编程过程中，使用 flatMap() 方法能够让我们更加便捷地处理数组，减少代码的重复性，提高代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652c8ed97d4982a6ebe3bd83