分享几个数组降维的方法

二维数组

二维数组,以 [[],[{a:1}],[],[3,4],5] 为例,降维后得到 [{a:1},3,4,5]

双重循环

需要检查是否每个元素都是数组

 function flatten(arr){
     const res = []
     for(let i = 0;i < arr.length; i++){
         if(Array.isArray(arr[i])){
             for(let j = 0;j < arr[i].length;j++){
                 res.push(arr[i][j])
             }            
         } else {
             res.push(arr[i])
         }      
     }
     return res
 }

循环 + concat

concat 本身就可以给数组降维一次

 function reduceDiemension(arr){
     const res = []
     for(let i = 0;i < arr.length;i++){
         res = res.concat(arr[i])
     }
     return res
 }

reduce + concat

上面的过程本身是一种归并,所以考虑使用 reduce

 function flatten(arr){
     return arr.reduce((acc,cur) => acc.concat(cur),[])
 }

展开 / apply + concat

通过展开原数组或者将其作为 apply 的第二个参数,把数组转化为一个参数列表

 function flatten(arr){
     // return [].concat([],arr)
     return [].concat(...arr)
 }

多维数组

多维数组,以下面的数组为例:

 const arr = [
     1,
     [
         2,[3],
         [4,5,6],
         [7,8,9],
         10,11
     ],
     12,
     13,
     [15,16,17]
 ]

降维后得到 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17]

toString + split

数组降维可以看作是把所有的括弧都去掉,而数组的 toString 方法刚好可以做这个事,之后再调用字符串的 split 把字符串转换回数组即可。但这个方法很局限,要求数组元素的数据类型都相同。

 function flattern_numberArray(arr){
     return arr.toString().split(",").map(x => Number)
 }

forEach + 递归

 function flatten(arr){
     const res = []
     arr.forEach(item => {
         if(Array.isArray(item)){
             flatten(item)
         } else {
             res.push(item)
         }
     })
     return res
 }

reduce + 递归

同理,上面的过程是一种归并,可以使用 reduce 完成。需要注意的是,reduce 的回调函数必须返回一个数组,所以不要再用 push 了

 function flatten(arr){
     return arr.reduce((acc,cur) => {
         if(Array.isArray(cur)){
             return [...acc , ...flatten(cur)]    
         } else {
             return [...acc,cur]
         }
     },[])
 }

while + some

只要数组中还有数组,就使用 concat 给这个数组降维。这个方法可以不使用递归

 function flatten(arr){    
     while(arr.some(item => Array.isArray(item))){
         arr = [].concat(...arr)
     }
     return arr
 }

flat

直接用 flat 是最简单的。默认传参 1,表示降维一次;可以传参 Infinity,实现完全降维,最终得到一个一维数组。

什么?浏览器用不了?手写实现一个:

Array.prototype.myFlat = function(times = 1){
    let arr = this
    if(!Number(times) || Number(times) <= 0){
        return arr
    }
    return arr.reduce((acc,cur) => {
        acc.concat(Array.isArray(cur)? cur.myFlat(times - 1) : cur)
    },[])
}
javascript
81 views
Comments
登录后评论
Sign In
·

joy 好奇什么场景需要用到这个,用 ts 的话可以少很多类似的问题,后台返回树形数据最好直接扁平化,前端写个简单的生成树一般就够了~