在前端开发中，经常需要对数组进行操作和转换。ES10 引入了一种新的数组方法，称为 flatMap()，它既能够在数组中插入新值，又能够将新值打平成一个数组，是一种方便的数组操作方法。
flatMap() 方法的用途
flatMap() 方法可以对数组进行映射，就像 map() 方法一样。唯一的区别是，它将原始数组打平为一个新数组，从而方便我们进行后续的操作。在进行数组操作时，我们通常需要多次对数组进行操作，这时，使用 flatMap() 方法能够更加方便快捷地实现我们的目标。
flatMap() 方法的语法
flatMap() 方法的语法如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，参数 callback 是必需的，表示对数组中每个元素执行的函数。该函数的三个参数 currentValue、index 和 array 表示当前元素、索引值和原始数组。参数 thisArg 可选，表示函数执行时使用的 this 值。
flatMap() 方法的示例
下面是一个简单的示例，展示了 flatMap() 方法的用法：
let arr = [[1, 2], [3, 4], [5, 6]];
let newArr = arr.flatMap(function(value) {
return value;
});
console.log(newArr); // [1, 2, 3, 4, 5, 6]在该示例中，我们首先定义了一个包含三个子数组的二维数组。然后，我们使用 flatMap() 方法将所有子数组打平为一个新数组，最终结果为包含所有子数组中所有值的新数组。
flatMap() 方法的深度
在 flatMap() 方法中，我们可以定义返回值的深度。浅层次转换可以用参数一实现，而参数二则是定义返回值的最大深度。下面来看一个例子：
-- -------------------- ---- -------
--- ----- - -
------ ----- ------- -------------- -----------
------ ----- ------- -------- --------
------ ----- ------- ---------- ----- --------
--
--- ------ - ------------------------- -
------ ---------
-- ---
-------------------- -- -------------- --------- ------- ------ --------- ----- -------在这个例子中，我们定义了一个包含员工信息的数组，每个员工对象都有一个包含技能的子数组。然后，我们使用 flatMap() 方法获取所有的技能名称，同时限制返回值的深度为 1，这样就保证了返回的值全部是技能名称，没有深度嵌套。
flatMap() 方法的指导意义
flatMap() 方法是一种方便快捷的数组操作方法，可以用于实现多次操作的数组转换。在多次对数组进行操作时，使用 flatMap() 方法可以避免对数组进行多次遍历，同时也能保持代码的简洁性。
在实际开发中，我们经常需要对数组进行转换，使用 flatMap() 方法可以帮助我们实现这些转换。不仅如此，在有需要时，我们还可以使用该方法定义返回值的深度，这使得代码在执行时更加灵活和高效。
结论
在本文中，我们探讨了 ES10 引入的 flatMap() 方法。介绍了该方法的用途、语法和示例，并详细解释了如何定义返回值的深度。最后，我们总结了 flatMap() 方法的指导意义，强调了在实际开发中使用该方法的价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64560aee968c7c53b0954db8