ES7 中的 Array.prototype.flatMap() 方法详解

在 ECMA2019 规范中引入了 Array.prototype.flatMap() 方法，它可以将二维数组一键扁平化，同时也支持链式调用。下面我们来详细了解一下该方法的使用。

语法

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

• callback：作为数组中每个元素执行的函数。
• currentValue：数组中正在处理的元素。
• index：数组中正在处理的元素的下标。
• array：被执行的数组。
• thisArg：可选参数，执行 callback 函数时使用的 this 值。

示例

假设有以下数组：

const arr = [1, 2, 3, 4, 5];

我们想要将它扁平化并乘以 2，那么可以使用 flatMap() 方法：

const result = arr.flatMap(x => [x * 2]);
console.log(result); //[2, 4, 6, 8, 10]

可以发现，该方法首先将每个元素乘以 2 ，然后同时组成新的数组并返回。

除了简单的一维数组，该方法也可以扁平化多维数组，比如将二维数组转成一维数组。

const arr = [[1, 2], [3, 4], [5, 6]];
const result = arr.flatMap(x => x);
console.log(result); //[1, 2, 3, 4, 5, 6]

这里 x => x 表示直接返回每个子数组，从而将这些子数组合并成一个数组。

注意事项

需要注意的是，flatMap() 方法会忽略数组中的空位并移除它们。

const arr = [1, , , 2, 3];
const result = arr.flatMap(x => [x]);
console.log(result); //[1, 2, 3]

因此，在使用该方法时，需要事先确认数组中是否有空位。

结论

通过本文的介绍，我们了解到了 ES7 中新加入的 flatMap() 方法，它可以方便地将二维数组扁平化，同时还支持链式调用。需要注意的是，该方法会忽略数组中的空位并移除它们。开发者可灵活运用该方法，提高数组的操作效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67123889ad1e889fe2038874