使用JavaScript flatMap()执行元素操作返回NaN的问题排查

你忽略了flatMap回调函数的返回规则：它需要返回一个可迭代对象（通常是数组），而非单个值。

问题原因 #

当你执行el * 2时，el是原数组中的子数组（比如[2,5]），数组与数字直接做乘法运算会得到NaN（因为JS不支持数组和数字的直接乘法）。flatMap会将回调返回的每个值作为最终数组的元素，所以最终得到[NaN, NaN]。

正确写法 #

要先遍历子数组内的每个元素完成乘2操作，再返回处理后的子数组，flatMap会自动将这些子数组扁平化：

const arr1 = [ [2,5] , [5,10,15] ];
const arr2 = arr1.flatMap((subArr) => subArr.map(num => num * 2));
console.log(arr2); // [4, 10, 10, 20, 30]

这里flatMap的回调先通过map将子数组的每个元素乘2，返回新的子数组，再由flatMap完成扁平化合并，最终得到你想要的结果。

内容的提问来源于stack exchange，提问作者bob_rhombus