在开发前端项目时,经常会用到嵌套的数组来组织数据。但是当数组有多级嵌套时,操作变得复杂而繁琐。ES10 新增了两个数组方法 —— Array.flat
和 Array.flatMap
。它们可以用来解决多级数组嵌套的问题。
Array.flat
Array.flat
方法可以将多级数组嵌套平铺成一维数组。该方法接收一个可选参数 depth,表示需要平铺的深度。例如:
----- ------- - --- -- --- -- --- ----- ----- ------- - ---------------- --------------------- -- --- -- -- -- -- --
上述代码中,nestArr
是一个多级嵌套的数组,使用 flat(2)
将其平铺成一维数组,结果为 [1, 2, 3, 4, 5, 6]
。
如果不传入 depth 参数,则默认平铺一层。例如:
----- ------- - --- -- --- -- --- ----- ----- ------- - --------------- --------------------- -- --- -- -- -- --- ---
上述代码中,nestArr
是一个多级嵌套的数组,使用 flat()
将其平铺一层,结果为 [1, 2, 3, 4, [5, 6]]
。
Array.flatMap
Array.flatMap
方法可以将原数组的每个元素映射成一个新的数组,并将所有数组拼接成一个新的数组。例如:
----- --- - --- -- --- ----- ------ - ------------------ -- ----- - ---- -------------------- -- --- -- --
上述代码中,arr
是一个普通数组,使用 flatMap
将它的每个元素都乘以 2,结果为 [2, 4, 6]
。
flatMap
方法还可以接受第二个可选参数,表示映射函数中this的指向。例如:
----- --- - --------- --------- ---------- ----- ------ - -------------------- ------ - ------ ----------------------- -- --------- ---------- -- - ------- ------- -------- --- -------------------- -- ----- ------- ------ ------- ---- -------- ------ -------- ---- -------- ------ --------
上述代码中,this
指向一个对象,该对象包含 basket
属性,其值为 ["big", "small"]
。flatMap
方法将每个元素与 basket
数组拼接,最终结果为 ['big apple', 'small apple', 'big banana', 'small banana', 'big orange', 'small orange']
。
示例代码
下面是一个有多级数组嵌套的示例代码,展示 Array.flat
和 Array.flatMap
的使用方法:
----- ----- - - - ----- ------ ---- --- -------- ----------- ----------- -- - ----- -------- ---- --- -------- ----------- -------- -- - ----- ------- ---- --- -------- --------- ---------- -- -- -- -- ---- - ------- --- ----- ----------- - ---------------- -- --------------------- ------------------------- -- ----------- ----------- ---------- -------- -------- ---------- -- -- ------- - ------- --- ----- -------------- - -------------------- -- -------------- ---------------------------- -- ----------- ----------- ---------- -------- -------- ----------
上述代码中,users
是一个多级数组嵌套,包含了一些用户信息。使用 map
方法和 flat
方法将用户的爱好扁平化成一维数组,结果为 ['reading', 'swimming', 'running', 'music', 'music', 'dancing']
。使用 flatMap
方法也能达到相同的效果。
总结
ES10 提供了 Array.flat
和 Array.flatMap
两个方法,能够很方便地解决多级数组嵌套问题。使用这两个方法,可以让代码更加简洁,易于维护。在开发过程中,可以根据实际情况选择合适的方法来处理嵌套的数组。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64573092968c7c53b09fece8