ES10（ECMAScript 2019）是 JavaScript 语言的最新版本，也是该语言的一个里程碑。该版本的目标是使语言更加现代化，与时俱进。其中，Array 类型有两个新方法，flat() 和 flatMap()，这两个方法极大地改善了数组的处理能力。本篇文章将详细介绍这两个方法的作用、用法和示例。
flat 方法
flat() 方法将嵌套数组展开至指定的深度，返回一个新的数组。该方法的语法如下：
array.flat([depth])
其中，array 为需要展开的嵌套数组，depth 是一个可选参数，指定展开的深度，默认为 1。
示例
以下是一个展示 flat() 方法的示例代码：
-- -------------------- ---- ------- --- ---- - --- -- --- ---- --- ---- - ------------ ------------------ -- --- -- -- -- --- ---- - ---- --- --- -- --- ----- --- ---- - ------------ ------------------ -- --- -- -- -- --- --- --- ---- - ---- --- --- -- --- ----- --- ---- - ------------- ------------------ -- --- -- -- -- -- --
在第一个示例中，arr1 是一个嵌套数组，使用 flat() 方法展开后得到新的数组 arr2。在第二个示例中，arr3 中包含了另一个嵌套数组 [5, 6]，默认情况下不会展开，导致 arr4 中还包含了一个嵌套数组。在第三个示例中，指定展开深度为 2 后，[5, 6] 也得以展开。
指导意义
flat() 方法对于将嵌套数组展开至一定深度非常有用，可以将复杂的嵌套数据转换为扁平化的列表，方便后续处理。在实际开发中，我们可以使用 flat() 方法简化数组处理逻辑。
flatMap 方法
flatMap() 方法将嵌套数组展开至指定的深度，并对每个元素执行一个指定操作后生成一个新数组，最后将新数组展开并返回。该方法的语法如下：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，array 为需要展开的嵌套数组，callback 是一个回调函数，对数组中的每个元素执行一次，返回一个值数组，用于生成新数组。thisArg 是可选参数，指定 callback 函数中 this 的值。
示例
以下是一个展示 flatMap() 方法的示例代码：
-- -------------------- ---- ------- --- ---- - --- -- -- --- --- ---- - -------------- -- -- - ---- ------------------ -- --- -- -- -- --- ---- - ---- --- --- ---- --- ---- - -------------- -- ------- -- - - ---- ------------------ -- --- -- -- -- --- ---- - ------- ------- ---- ----- ----- ------ --- ---- - -------------- -- --------- ---- ------------------ -- --------- -------- ------ -------- -------- ------
在第一个示例中，arr1 中的每个元素都乘以 2 后生成一个新数组，最后将新数组展开。在第二个示例中，用 map() 方法生成了新数组 [[2, 4], [6, 8]]，最后将其展开为 [2, 4, 6, 8]。在第三个示例中，将字符串划分为单词后生成一个新数组，最后将新数组展开。
指导意义
flatMap() 方法通过将 map() 和 flat() 两个方法组合使用，将嵌套数组展开并对其中每个元素执行指定操作后生成新数组，从而简化了数组处理逻辑，提高了开发效率。
结论
通过本篇文章的介绍，我们详细了解了 ES10 中的 flat() 和 flatMap() 方法的作用、语法和示例，以及如何将它们用于我们的代码中，大大提高了我们的数组处理能力和开发效率。在实际开发中，我们应该灵活使用这两个方法，根据不同场景选择合适的方法来处理数组。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67161b98ad1e889fe21ad0c7