在 JavaScript 中，数组是一种十分常见的数据结构。而在 ECMAScript 2020 中，通过引入 flat() 和 flatMap() 这两个新的数组方法，我们可以更加方便地操作和处理数组数据。在本文中，我们将详细介绍这两个方法的用法、实现以及常见的应用场景，并给出相关示例代码作为参考。
flat()
首先，让我们先来介绍 ECMAScript 2020 中的第一个新方法：flat()。这个方法用于将嵌套数组（也就是多维数组）“扁平化”，即将嵌套数组中的所有元素都移到一个新数组中，从而方便进行各种数组操作。
语法
flat() 方法的语法如下：
array.flat([depth])
其中，array 是需要进行“扁平化”的数组，depth 是可选的参数，用于指定扁平化的深度。如果没有设置这个参数，则默认为 1。
示例
下面是一个简单的例子，演示了 flat() 方法的基本用法：
const arr = [1, 2, [3, 4]]; const flattened = arr.flat(); console.log(flattened); // [1, 2, 3, 4]
在这个例子中，我们定义了一个数组 arr，其中包含一个嵌套数组 [3, 4]。我们调用了 flat() 方法，将 arr 数组“扁平化”，最终得到了一个包含所有元素的新数组 flattened。
深度设置
除了默认深度为 1 的情况外，我们还可以通过设置 depth 参数，控制“扁平化”的深度。下面是一个例子，演示了这个行为：
const arr = [1, 2, [3, [4, 5]]]; const flattened1 = arr.flat(); const flattened2 = arr.flat(2); console.log(flattened1); // [1, 2, 3, [4, 5]] console.log(flattened2); // [1, 2, 3, 4, 5]
在这个例子中，我们定义了一个更加深度的嵌套数组 arr，其中包含了两个嵌套数组 [3, [4, 5]]。我们再次调用了 flat() 方法，分别设置了默认深度和深度为 2。通过这两次操作，我们得到了不同深度的扁平化后的新数组 flattened1 和 flattened2。
flatMap()
接下来，让我们进一步介绍 ECMAScript 2020 中的第二个新方法：flatMap()。这个方法是 flat() 方法的加强版，除了可以实现“扁平化”之外，还能够进行数组映射和过滤操作。
语法
flatMap() 方法的语法如下：
array.flatMap(callback)
其中，array 是需要进行操作的数组，callback 是一个函数，用于对数组元素进行映射处理。这个函数将会接收三个参数：
- currentValue：当前元素的值
- index：当前元素的索引
- array：原始数组
这个函数应该返回一个数组，表示当前元素映射后的结果。flatMap() 方法将会对所有映射后的结果进行“扁平化”操作，从而生成最终的新数组。
示例
下面是一个简单的例子，演示了 flatMap() 方法的基本用法：
const arr = [1, 2, 3]; const mapped = arr.flatMap(x => [x * 2]); console.log(mapped); // [2, 4, 6]
在这个例子中，我们定义了一个数组 arr，其中包含了三个元素。我们调用了 flatMap() 方法，对每个元素进行了映射处理，将元素的值乘以 2。最终，我们得到了一个扁平化后的数组 mapped，包含了所有元素映射后的值。
过滤操作
除了数组映射以外，我们还可以在 flatMap() 方法中进行过滤操作。下面是一个例子，演示了这个行为：
const arr = [1, 2, 3]; const filtered = arr.flatMap(x => x % 2 === 0 ? [] : [x]); console.log(filtered); // [1, 3]
在这个例子中，我们定义了一个数组 arr，其中包含了三个元素。我们调用了 flatMap() 方法，对每个元素进行了过滤处理，仅将奇数元素考虑在内。最终，我们得到了一个扁平化后的数组 filtered，包含了所有奇数元素。
总结
通过本文的介绍，我们了解了 ECMAScript 2020 中引入的两个新数组方法 flat() 和 flatMap() 的基本用法和实现。这两个方法可以帮助我们更加方便地操作和处理数组数据，从而提高代码效率和可维护性。我们强烈建议在实际开发中积极地使用它们，以适应日益复杂的 JavaScript 开发环境，提高自己的编程能力和代码水平。
参考链接
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6547305b7d4982a6eb18eefb