在 ECMAScript 2019 （又称 ES10）中，JavaScript 添加了两个新的数组方法 flat 和 flatMap 。这两个方法都是处理多维嵌套数组的有力工具，能够将多维数组扁平化并转换为一位数组。在日常的前端开发中，这两个方法经常被用来处理数组数据，本文将介绍 flat 和 flatMap 的具体用法、常见问题以及一些处理方法。
flat 方法的用法
flat 方法的主要功能是将多维嵌套数组转换为一维数组，其语法如下：
-----------------
其中，arr 表示需要进行扁平化操作的数组，depth 表示扁平化的深度。如果不传入 depth 参数， flat 方法默认执行一次扁平化操作。如果传入的参数 depth 大于嵌套数组的深度，该方法将返回一个新的数组，不进行任何操作。
示例代码如下：
----- --- - --- -- --- ---- ----- ------- - ----------- --------------------- -- - -- -- -- - -
上述代码中，原始数组 arr 包含一个数字和一个嵌套数组。通过执行 flat 方法将其扁平化处理得到 arrFlat 数组。
flat 方法的问题
使用 flat 方法时，有几个常见的问题需要注意：
问题一： flat 方法不兼容低版本浏览器
flat 方法是在 ECMAScript 2019 标准中加入的新方法，因此只有支持 ES10 标准的浏览器才能使用它。对于不支持 ES10 标准的浏览器，我们可以使用 polyfill 或者手动实现扁平化操作。
在 polyfill 方案中，可以使用 core-js 库来实现 flat 方法：
---------------------------------
通过该语句引入 flat 方法的 polyfill，并且可以在所有浏览器上使用 flat 方法。
问题二： flat 方法只能处理数组类型
flat 方法只能对数组类型进行扁平化操作，如果传入的参数不是数组类型，会抛出 TypeError 异常。
----- --- - -------- ----- ------- - ----------- -- ---------- -------- -- --- - --------
上述代码中，参数 str 不是数组类型，因此使用 flat 方法会抛出异常。
针对该问题，我们可以使用 Array.from 方法来转换非数组类型的参数：
----- --- - -------- ----- ------- - ---------------- --------------------- -- ----- ---- ---- ---- ----
上述代码中，我们使用 Array.from 方法将字符串参数 str 转换为数组类型，然后再执行 flat 方法进行扁平化操作。
问题三： flat 方法不改变原始数组
flat 方法执行并不会改变原始数组，而是返回一个新的扁平化数组。如果我们需要改变原来的数组，需要手动将扁平化后的数组转换为原始数组。
----- --- - --- -- --- ---- ----- ------- - ----------- ----------------- -- --- -- --- ---
上述代码中，执行 flat 方法并不会改变原始数组的值，而是将扁平化后的数组赋值给 arrFlat。
为了改变原始数组，我们需要将 arrFlat 赋值给原始数组 arr：
--- - -------- ----------------- -- --- -- -- --
flatMap 方法的用法
flatMap 方法结合了 map 和 flat 两个方法的功能，可以对数组进行映射，并且支持扁平化操作，其语法如下：
---------------------- ---------
其中，callback 表示用来执行操作的回调函数，thisArg 表示执行回调函数时的上下文环境。
示例代码如下：
----- --- - --- -- --- ----- ---------- - ------------- -- -- - ---- ------------------------ -- --- -- --
上述代码中，我们使用 flatMap 方法和一个回调函数，将数组内的每个元素乘以 2，再生成一个扁平化的新数组 arrFlatMap。
flatMap 方法的问题
使用 flatMap 方法时，同样有几个常见的问题需要注意：
问题一： flatMap 方法不兼容低版本浏览器
同样，flatMap 方法是在 ECMAScript 2019 标准中加入的新方法，因此只有支持 ES10 标准的浏览器才能使用它。对于不支持 ES10 标准的浏览器，我们可以使用 polyfill 或者手动实现映射和扁平化操作。
polyfill 方案同 flat 方法一样，可以使用 core-js 库来实现 flatMap 方法：
------------------------------------
通过该语句引入 flatMap 方法的 polyfill，并且可以在所有浏览器上使用 flatMap 方法。
问题二： flatMap 方法可能会产生空值和 undefined
flatMap 方法会执行回调函数，如果回调函数返回空值或者 undefined，会在结果数组中产生空值。
----- --- - --- -- --- ----- ---------- - ------------- -- - -- - - -- - --- ------------------------ -- --- --
上述代码中，回调函数在处理 arr 数组的第二个元素时返回了一个空数组，因此 arrFlatMap 数组中没有包含该元素。
为了避免在结果数组中产生空值，我们可以使用 filter 方法过滤掉空值：
----- --- - --- -- --- ----- ---------- - ------------- -- - -- - - -- - ------------------- ------------------------ -- --- --
上述代码中，使用 filter 方法过滤掉了结果数组中的空值。
问题三： flatMap 方法不改变原始数组
同 flat 方法一样， flatMap 方法执行也会返回一个新的数组，而不会改变原始数组的值。如果需要改变原始数组，可以手动将结果数组赋值给原始数组。
----- --- - --- -- --- ----- ---------- - ------------- -- - - --- ----------------- -- --- -- --
上述代码中，执行 flatMap 方法并不会改变原始数组的值，而是将结果数组赋值给 arrFlatMap。
为了改变原始数组，我们需要将 arrFlatMap 赋值给原始数组 arr：
--- - ----------- ----------------- -- --- -- --
总结
本文介绍了 ECMAScript 2019 中添加的两个新数组方法 flat 和 flatMap 的用法及常见问题。在使用 flat 和 flatMap 方法时，我们需要注意浏览器兼容性，避免出现空值和 undefined，手动处理结果，并且手动将结果数组赋值给原始数组。对于不支持 ES10 标准的浏览器，我们可以使用 polyfill 或手动处理数组来实现这两个方法的功能，提高代码的兼容性和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6591a8f8eb4cecbf2d6b72b7