在 ES9 中，JavaScript 引入了两个新的数组方法，分别是 Array.prototype.flatMap() 和 Array.prototype.flat()。这两个方法在操作数组时提供了更加方便和灵活的方式，使得我们可以更加高效地处理数组数据。
flatMap() 方法
flatMap() 方法可以将一个数组映射成另一个数组，并将结果扁平化成一个新的数组。具体来说，flatMap() 方法会对原数组中的每个元素应用一个映射函数，然后将所有的映射结果合并成一个新数组。如果映射结果是一个数组，则会将其扁平化成一个新的数组。
下面是一个使用 flatMap() 方法的示例代码：
----- --- - --- -- --- ----- ------ - ------------- -- --- - - ---- -------------------- -- --- -- -- -- -- --
在上面的代码中，flatMap() 方法首先将原数组 [1, 2, 3] 中的每个元素应用了一个映射函数 x => [x, x * 2]，得到了一个新的数组 [ [1, 2], [2, 4], [3, 6] ]。然后，flatMap() 方法将其扁平化成一个新的数组 [1, 2, 2, 4, 3, 6]。
需要注意的是，flatMap() 方法会自动去除映射结果中的空项，因此我们无需手动进行过滤操作。
flat() 方法
flat() 方法可以将一个多维数组扁平化成一个新的一维数组。具体来说，flat() 方法会将原数组中的所有元素递归地展开成一个新的数组。
下面是一个使用 flat() 方法的示例代码：
----- --- - --- --- --- ------- ----- ------ - ----------- -------------------- -- --- -- -- --
在上面的代码中，flat() 方法首先将原数组 [1, [2, [3, [4]]]] 中的第一层元素 [1, [2, [3, [4]]]] 展开成一个新的数组 [1, 2, [3, [4]]]。然后，flat() 方法再将其中的第二层元素 [3, [4]] 展开成一个新的数组 [1, 2, 3, [4]]。最后，flat() 方法再将其中的第三层元素 [4] 展开成一个新的数组 [1, 2, 3, 4]。
需要注意的是，flat() 方法可以指定扁平化的深度，例如：
----- --- - --- --- --- ------- ----- ------ - ------------ -------------------- -- --- -- -- --
在上面的代码中，flat(2) 方法指定了扁平化的深度为 2，因此只有第一层和第二层元素被展开成一个新的数组。
总结
flatMap() 方法和 flat() 方法是 ES9 中新增的两个数组方法，它们分别提供了数组映射和数组扁平化的功能。这两个方法可以让我们更加高效地处理数组数据，提高代码的可读性和可维护性。
需要注意的是，这两个方法在旧版本的浏览器中可能不被支持，因此在使用时需要做好兼容性处理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660cfebbd10417a222d67883