扁平化数组是前端中常用的操作，其主要功能是将多维嵌套的数组转化为一维数组。在ES9中，有两个关键字可以帮助我们更容易地实现数组扁平化操作：flat()和flatMap()。
flat()
flat()方法可以将多维嵌套的数组转化为一维数组。该方法可以接受一个可选参数depth，用于指定扁平化嵌套数组的深度，如果不指定，则默认将数组全部扁平化至一维数组。
----- --- - --- -- --- -- --- ----- ----- ------------ - ------------ -------------------------- -- --- -- -- -- -- --
在上述示例中，原始数组arr中包含三个元素，其中第三个元素又是一个嵌套数组。通过调用flat(2)方法将该数组的嵌套层数指定为2，将整个数组扁平化为一维数组，最终输出结果为[1, 2, 3, 4, 5, 6]。
需要注意的是，如果原始数组中存在空元素或者空数组，则调用flat()方法时会将这些空元素或空数组移除。另外，flat()方法只能对数组进行一次扁平化操作，如果需要对数组进行多次扁平化操作，则需要多次调用flat()方法。
flatMap()
flatMap()方法与flat()方法类似，都可以用于数组扁平化操作，但它可以在扁平化后对每个元素进行映射操作。该方法接受一个函数作为参数，该函数将被应用于每个扁平化后的数组元素上。
----- --- - --- -- --- ----- --------- - --------------- -- ---- - ---- ----------------------- -- --- -- --
在上述示例中，原始数组arr包含三个元素1、2和3。通过调用flatMap()方法，将每个元素乘以2得到一个新数组，最终输出结果为[2, 4, 6]。
需要注意的是，flatMap()方法除了进行扁平化操作，还对每个元素进行了映射操作。如果需要对数组进行多次扁平化和映射操作，则可以结合flat()和map()方法使用。
----- --- - ---- --- --- --- --- ---- ----- --------- - ------------------ -- -------------- -- --- - ---- ----------------------- -- --- -- -- -- --- ---
在上述示例中，原始数组arr包含三个子数组，每个子数组中都包含两个数字。通过调用flatMap()方法结合map()方法，将每个元素乘以2得到一个新数组，最终输出结果为[2, 4, 6, 8, 10, 12]。
总结
通过对ES9中的两个关键字flat()和flatMap()的介绍，我们可以更容易地完成数组扁平化操作，并对扁平化后的数组进行映射操作。这些操作对于前端开发中的数据处理和组件开发非常有帮助。需要注意的是，在使用flatMap()方法时，要确保映射操作返回的是一个数组，否则将会抛出错误。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/664470bed3423812e42537fa