在 ES8(ECMAScript 2017)中,新增了两个数组方法:flat
和 flatMap
,它们有助于简化数组操作,提高代码的可读性和可维护性。
flat
flat
方法可以将一个多维数组变成一个一维数组,其用法如下:
-------------------
其中,array
为要操作的数组,depth
为选填参数,代表将数组展开的深度,默认值为 1
。
例如,对于一个数组 arr = [1, [2, 3], [4, [5, 6]]]
,我们可以使用 flat
方法将其展开为一维数组:
----- --- - --- --- --- --- --- ----- ----- ---------- - ----------- ------------------------ -- --- -- -- -- --- ---
上述代码会将 arr
数组展开为 [1, 2, 3, 4, [5, 6]]
,[5, 6]
这个数组的层数并没有受到影响,因为默认情况下 depth
只展开一层。
如果我们希望展开所有层数,可以将 depth
设置为一个足够大的值(如 Infinity
):
----- --- - --- --- --- --- --- ----- ----- ---------- - ------------------- ------------------------ -- --- -- -- -- -- --
上述代码将 arr
中所有元素展开为一维数组。
flat
方法不会改变原数组,而是返回一个新数组。
flatMap
flatMap
方法可以同时执行 map
和 flat
操作,其用法如下:
------------------------------------- ------- ---------- ---------
其中,array
为要操作的数组,callback
为对数组每个元素执行的函数,函数返回的结果会被展开为一维数组,thisArg
为可选的执行上下文。
例如,对于一个数组 arr = [1, 2, 3]
,我们可以使用 flatMap
方法将每个元素乘以 2
并展开为一维数组:
----- --- - --- -- --- ----- ---------- - ------------- -- -- - ---- ------------------------ -- --- -- --
上述代码相当于执行了以下操作:
----- --- - --- -- --- ----- ------ - --------- -- - - --- ----- ---------- - -------------- ------------------------ -- --- -- --
flatMap
方法同样不会改变原数组,而是返回一个新数组。
总结
flat
和 flatMap
方法可以帮助我们简化数组操作,提升代码的可读性和可维护性。需要注意的是,在使用过程中要清楚 depth
和 callback
函数的影响,确保得到正确的结果。
----- --- - --- --- --- --- --- ----- ----- ---------- - ------------------- ------------------------ -- --- -- -- -- -- -- ----- ---- - --- -- --- ----- ---------- - -------------- -- -- - ---- ------------------------ -- --- -- --
以上就是 flat
和 flatMap
方法的详细介绍和示例代码,希望能对读者学习前端类相关知识有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6470085b968c7c53b0e2f35f