随着 JavaScript 语言的不断发展，新的语法和 API 不断涌现。ES9（ECMAScript 2018）引入了一种名为 Array.flatMap 的新方法，它相比其他方法具有更强的灵活性和实用性。该方法与 Array.map 和 Array.flat 结合使用可以大大简化代码，提高编程效率。本文将为您介绍它的使用方法和实际场景。
1. Array.flatMap 的使用
Array.flatMap 是一个高阶函数，它在数组的每个元素上执行一个映射函数（也可以是一个返回数组的函数），然后将结果扁平化为一个新的数组，新数组的深度为一。
方法语法如下：
arr.flatMap(callback[, thisArg])
其中：
callback：映射函数。thisArg：可选参数，回调函数执行时 this 对象的值。
下面是一个简单的示例，该示例使用 Array.flatMap 方法一次性从嵌套数组中提取所有元素：
const arr = [1, 2, [3, 4]]; const flatArr = arr.flatMap(item => item); // [ 1, 2, 3, 4 ]
在上面的代码中，嵌套数组 [3,4] 被提取成了 arr 的新的一维数组。
Array.flatMap 方法支持链式调用，您可以在 flatMap 调用前链式使用其他方法调整源数组的数据格式，比如 split、map 或 filter。
const str = '1,2,3|4,5,6|7,8,9';
const arr = str.split('|');
const flatArr = arr
.map(item => item.split(','))
.flatMap(item => item.filter(i => i % 2 === 0))
// [ '2', '4', '6', '8' ]在上面的代码中，我们首先使用 split 方法将字符串 str 装换为了一个二维数组，接着通过 map 方法将每个元素都转换为了一个一维数组，然后通过 flatMap 方法提取了偶数值并返回结果。
2. Array.flatMap 的实际应用场景
下面是 Array.flatMap 方法的几个实际应用场景。
2.1 数组去重
我们可以使用 Array.flatMap 在一行代码中去除数组中的重复项。方法如下：
const arr = [1, 2, 3, 1, 2]; const uniqueArr = arr.flatMap((item, idx) => arr.lastIndexOf(item) === idx ? item : []); // [1, 2, 3]
在上面的代码中，flatMap 函数返回一个一维数组，只包括在数组中出现一次的项，并去掉了重复项。这个方法通过返回空数组来删除数组中的重复项。
2.2 移除数组中的 null，undefined 和空值（空值指 ""）
我们可以使用 Array.flatMap 将数组中的空值移除。方法如下：
const arr = [1, null, 2, undefined, '', 3]; const result = arr.flatMap(item => item ? item : []); // [ 1, 2, 3 ]
在上面的代码中，flatMap 方法通过返回一个空数组来移除了数组中的空值。
2.3 从嵌套对象中提取属性
如果您需要从嵌套对象中提取特定的属性，您可以使用 Array.flatMap。方法如下：
-- -------------------- ---- -------
----- ---- - -
-
----- --------
---- ---
----- -
-
----- --------
----- -----
--
-
----- ----------
----- -----
-
---
-
----- ------
---- ---
----- -
-
----- --------
----- -----
-
--
--
----- -------- - ----------------- -- ----------------- -- -----------
-- - -------- ---------- ------- -在上面的代码中，我们通过 flatMap 方法中的 map 方法从嵌套的对象数组中提取所有的宠物名字。最终的 petNames 数组将只包含宠物名字，并且已经被扁平化了。
3. 总结
Array.flatMap 可以帮助我们在 JavaScript 编程中更加高效地处理数组，提高代码的可读性、可维护性和性能。您可以使用它更简洁地提取、操作和转换数组中的元素，并且其用法广泛。在实际使用过程中，我建议您尽量使用自己的思路来处理代码和数据，以便更好地理解和灵活运用 Array.flatMap 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc516a5ad90b6d04273d24