在 ES9 中，新增了一个 Array.prototype.flatMap() 方法，它可以将数组中的每个元素进行转换，并将结果合并成一个新的数组。这个方法在处理数组数据时非常有用，本文将详细介绍如何正确使用它。
什么是 Array.prototype.flatMap() 方法？
Array.prototype.flatMap() 方法是一个用于数组对象的高阶函数。它接收一个回调函数，该函数将被应用于每个数组元素，并返回一个新的数组。与 Array.prototype.map() 不同的是，flatMap() 还可以将返回的数组扁平化为一个新的数组。
如何使用 Array.prototype.flatMap() 方法？
Array.prototype.flatMap() 方法的语法如下：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 是一个回调函数，它可以接收三个参数：
- currentValue：当前数组元素的值。
- index：当前数组元素的索引。
- array：原始数组对象。
回调函数必须返回一个数组，该数组将被合并为一个新的数组。如果回调函数返回的是一个空数组，则会被忽略。
下面是一个使用 Array.prototype.flatMap() 方法的示例：
const arr = [1, 2, 3, 4]; const result = arr.flatMap((value) => [value * 2]); console.log(result); // [2, 4, 6, 8]
在这个例子中，我们定义了一个数组 arr，它包含了四个数字。我们使用了 Array.prototype.flatMap() 方法，将每个元素乘以 2，并将结果合并成一个新的数组。
Array.prototype.flatMap() 方法的注意事项
使用 Array.prototype.flatMap() 方法时，需要注意一些细节：
1. 返回的数组不能是嵌套的
如果回调函数返回的是一个嵌套的数组，那么它们将被扁平化为一个新的数组。例如：
const arr = [1, 2, 3, 4]; const result = arr.flatMap((value) => [[value * 2]]); console.log(result); // [2, 4, 6, 8]
在这个例子中，我们将每个元素乘以 2 并放入一个数组中。由于返回的是一个嵌套的数组，所以最终结果被扁平化为了一个新的数组。
2. 返回的数组可以是空的
如果回调函数返回的是一个空数组，那么它将被忽略。例如：
const arr = [1, 2, 3, 4]; const result = arr.flatMap((value) => []); console.log(result); // []
在这个例子中，我们将每个元素映射到一个空数组中。由于返回的是一个空数组，所以最终结果也是一个空数组。
3. 回调函数中的 this 值
可以使用第二个参数来定义回调函数中的 this 值。例如：
const arr = [1, 2, 3, 4];
const obj = { multiplier: 2 };
const result = arr.flatMap(function (value) {
return [value * this.multiplier];
}, obj);
console.log(result); // [2, 4, 6, 8]在这个例子中，我们定义了一个对象 obj，它有一个 multiplier 属性。我们使用了 Array.prototype.flatMap() 方法，并在回调函数中使用了 this.multiplier，将每个元素乘以 2。
总结
Array.prototype.flatMap() 方法是一个非常有用的数组高阶函数，它可以将数组中的每个元素进行转换，并将结果合并成一个新的数组。需要注意的是，返回的数组不能是嵌套的，可以是空的，还可以使用第二个参数来定义回调函数中的 this 值。在实际开发中，我们可以使用它来处理数组数据，提高代码的可读性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6582a17ed2f5e1655ddbf806