在 JavaScript 开发中，ES10 的 Array.flatMap() 方法是一个令人兴奋的新特性。这个方法可以同时实现 Array.map() 和 Array.flat() 的功能，让我们能够以更简便的方式处理数组。在这篇文章中，我们将深入了解 Array.flatMap() 的工作原理、使用方法和示例代码，希望能够帮助读者更好地理解这个新特性。
工作原理
Array.flatMap() 方法接收一个数组作为参数，该数组会在内部被映射为一个新数组。与 Array.map() 不同的是，flatten() 方法将数组展平到指定的深度，这意味着它会去除数组中的嵌套层级。在 Array.flatMap() 中，这个功能结合了，也就意味着可以在一个步骤中映射数组并展平它。
在 flatten() 方法中通过使用递归处理嵌套层级以完成展平过程。而在 Array.flatMap() 中会返回一个新数组，这个数组将是一个 flay 了的新多维数组，它已经展平，并且在扁平化的同时，所有映射的元素也已经被映射成新数组。最后，它返回的是一个新的一维数组，其中包含展平并指定的回调函数应用的原始数组的所有元素，这样做是非常方便的。
使用方法
Array.flatMap() 方法的基本语法如下：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
- callback：必需，用于每个元素的函数，返回值可以是一个或多个新单元格，也可以是空。
- currentValue（可选项)：必需，当前被处理的元素
- index（可选项)：必需，当前被处理的元素的索引
- array (可选项)：必需，处理的数组
- thisArg (可选项)：可选的调用回调时使用的this原始值
注意到 callback 被定义为接受 currentValue、index 和 array 这些参数。当然，您可以根据需要只使用 currentValue。
下面的例子说明了如何使用 Array.flatMap() 方法：
const items = ['first item', '', 'second item']; const numList = [1, 2, 3, 4, 5, 6]; const arr = numList.flatMap(val => [val, val ** 2]); console.log(arr); // [ 1, 1, 2, 4, 3, 9, 4, 16, 5, 25, 6, 36 ]
在这个例子中，我们声明一个包含三个元素的数组，每个元素都与为空对应。然后，我们声明一个包含6个数字的单元素数组。最后，我们将 numList 映射到新数组 arr 中，并对每个元素应用我们定义的 lambda 函数（计算平方）。结果，我们得到了一个扁平化的新数组。值得注意的是，我们在 lambda 表达式中返回的是方括号 [val, val ** 2]，这样 Array.flatMap() 就知道我们在展平数组之前将一个包含两个元素的新数组应用于每个元素。
示例代码
在本节中，我们提供了更多示例代码以解释 Array.flatMap() 方法的使用。
示例 1：增加属性并扁平化
下面的代码增加了年龄属性并扁平化数组：
-- -------------------- ---- -------
------------------ -- -
------ -
-
----- ----------
---- ---------
------ -----------
--------- --------------
--
--
---
-- ------
-- ----- -
-- -
-- ------- ------
-- ------ ---
-- -------- --------- ----------- -------
-- ----------- ------------ ------- ----- ---------
-- --
-- -
-- ------- -------
-- ------ ---
-- -------- ------- ---------- ------------
-- ----------- ---------- --------- -----------
-- --
-- -
-- ------- -------
-- ------ ---
-- -------- ---------- --------- -----------
-- ----------- ------- ------ --------- ------- ------
-- -
-- -示例 2：合并数组并扁平化
下面的代码合并数组并扁平化：
arr.flatMap(item => item[0]); // ["H", "o", "w", "s", "y", "o", "u", "?", "I", "'", "m", "f", "i", "n", "e", ".", "A", "n", "d", "y", "o", "u", "?"]
示例 3：数组转化为查询字符串
下面的示例代码将一个对象数组转换为 URL 查询字符串：
const arr = [{ key: '1', value: 'value1' }, { key: '2', value: 'value2' }];
const params = arr.flatMap(item => [`${item.key}=${item.value}`]).join('&');
console.log(params);
// Output: 1=value1&2=value2结论
在本文中，我们了解了 ES10 中的 Array.flatMap() 方法，并了解了它的工作原理和使用方法。正如我们所看到的，这种功能非常有用，可以使我们更加方便且少许多代码地操纵数组。我们希望这篇文章能够大家更好的理解 Array.flatMap() 方法，这样在以后的开发中，方便快捷地应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67354f600bc820c5824dabf5