在前端开发中，经常需要对数组进行扁平化操作。在 ES10 中，新增了两个数组方法：flat 和 flatMap，用于实现数组扁平化。本文将详细介绍这两个方法的用法及其指导意义，并提供示例代码。
flat 方法
flat 方法用于将多维数组扁平化为一维数组。其语法如下：
array.flat(depth)
其中，array 是需要扁平化的数组，depth 是可选参数，表示扁平化的深度。默认为 1，表示只扁平化一层。如果需要扁平化多层，则需要传入一个大于等于 0 的整数，表示扁平化的深度。
示例代码如下：
const arr = [1, 2, [3, 4, [5, 6]]]; const flatArr = arr.flat(); console.log(flatArr); // [1, 2, 3, 4, [5, 6]] const deepFlatArr = arr.flat(2); console.log(deepFlatArr); // [1, 2, 3, 4, 5, 6]
在上面的示例代码中，arr 是一个多维数组，通过 flat 方法将其扁平化为一维数组。flatArr 只扁平化了一层，所以其中还包含一个数组 [5, 6]。而 deepFlatArr 则扁平化了两层，得到了最终的一维数组。
flatMap 方法
flatMap 方法是在 map 方法的基础上，对数组进行扁平化操作。其语法如下：
array.flatMap(callback)
其中，array 是需要扁平化的数组，callback 是一个函数，用于对数组中的每个元素进行处理，并返回一个新的数组。flatMap 方法会对返回的数组进行扁平化操作。
示例代码如下：
const arr = [1, 2, 3]; const flatMapArr = arr.flatMap((item) => [item * 2]); console.log(flatMapArr); // [2, 4, 6]
在上面的示例代码中，arr 是一个普通的数组，flatMap 方法对其进行了扁平化操作，并将每个元素乘以 2，最终得到了一个新的一维数组 [2, 4, 6]。
指导意义
使用 flat 和 flatMap 方法可以简化数组扁平化的操作，提高代码的可读性和维护性。但需要注意的是，扁平化操作可能会降低代码的性能，因为需要遍历整个数组。在实际开发中，需要权衡性能和可读性，选择合适的方法。
此外，在使用 flatMap 方法时，需要注意返回值的类型。如果返回的是一个数组，则会对其进行扁平化操作；如果返回的是一个非数组类型的值，则会直接添加到新的数组中。
总结
本文介绍了 ES10 中的数组扁平化方法 flat 和 flatMap，并提供了详细的示例代码和指导意义。使用这两个方法可以简化数组扁平化的操作，提高代码的可读性和维护性。在实际开发中，需要根据具体情况选择合适的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f4c5322b3ccec22fd0ea8d