在前端开发中，我们经常需要对数组进行操作，比如过滤、映射、拼接等。而在 ECMAScript 2019 中，新增了 Array.prototype.flatMap() 方法，它可以帮助我们更加方便地对数组进行操作。
flatMap() 方法的介绍
Array.prototype.flatMap() 方法可以将一个数组映射为另一个数组，同时自动将结果数组扁平化为一维数组。其语法如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 为一个函数，它会被传入三个参数：
- currentValue：当前正在处理的元素。
- index（可选）：当前正在处理的元素的索引。
- array（可选）：调用 flatMap() 方法的数组。
callback 函数需要返回一个数组，该数组将被映射到新的数组中。最后，flatMap() 方法会将所有映射的数组扁平化为一维数组，并返回该数组。
flatMap() 方法的示例
下面是一个使用 flatMap() 方法的示例：
const arr = [1, 2, 3, 4]; const result = arr.flatMap((item) => [item, item * 2]); console.log(result); // [1, 2, 2, 4, 3, 6, 4, 8]
在上面的示例中，我们使用 flatMap() 方法将原数组 arr 映射为一个新的数组，新数组中的每个元素都是原数组中的元素和其自身乘以 2 的结果。最后，我们得到了一个扁平化的一维数组 [1, 2, 2, 4, 3, 6, 4, 8]。
flatMap() 方法的应用
1. 数组的拼接
在开发中，我们经常需要将多个数组拼接为一个数组。传统的做法是使用 concat() 方法，但是该方法只能将两个数组拼接为一个数组，如果需要拼接多个数组，则需要多次调用该方法。而使用 flatMap() 方法，则可以一次性将多个数组拼接为一个数组。
下面是一个使用 flatMap() 方法实现数组拼接的示例：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; const result = [arr1, arr2, arr3].flatMap((item) => item); console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
在上面的示例中，我们将三个数组 [1, 2, 3]、[4, 5, 6]、[7, 8, 9] 拼接为一个数组 [1, 2, 3, 4, 5, 6, 7, 8, 9]。
2. 数组的过滤和映射
在开发中，我们经常需要对数组进行过滤和映射操作。传统的做法是先使用 map() 方法将数组映射为一个新的数组，再使用 filter() 方法对新数组进行过滤操作。而使用 flatMap() 方法，则可以将这两个操作合并为一个操作。
下面是一个使用 flatMap() 方法实现数组过滤和映射的示例：
// javascriptcn.com 代码示例
const arr = [1, 2, 3, 4];
const result = arr.flatMap((item) => {
if (item % 2 === 0) {
return [item * 2];
} else {
return [];
}
});
console.log(result); // [4, 8]在上面的示例中，我们使用 flatMap() 方法将原数组 arr 映射为一个新的数组，新数组中只包含原数组中的偶数元素，并且每个元素都乘以 2。最后，我们得到了一个新的数组 [4, 8]。
flatMap() 方法的注意事项
在使用 flatMap() 方法时，需要注意以下几点：
- callback 函数需要返回一个数组，否则会得到一个空数组。
- 如果 callback 函数返回的是一个非数组类型的值，则会将该值转换为一个包含该值的数组。
- 如果原数组中有空元素（即 undefined、null 或空元素），则 flatMap() 方法会将其忽略。
总结
在 ECMAScript 2019 中，新增了 Array.prototype.flatMap() 方法，它可以帮助我们更加方便地对数组进行操作。在开发中，我们可以使用 flatMap() 方法来简化数组的操作，比如数组的拼接、过滤和映射等。但是在使用 flatMap() 方法时，需要注意 callback 函数的返回值和原数组中的空元素等问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d756ed2f5e1655d84b323