JavaScript 将多维数组拉平到一维数组

1,313 阅读1分钟

方法一

使用ES6对数组的拓展方法 flat()

1)默认展平一层

[1,2,[3,4,[5,6]]].flat()
//[1, 2, 3, 4, [5,6]]

2)接收一个数字的参数,表述展平几层

[1,2,[3,4,[5,6]]].flat(2)
//[1, 2, 3, 4, 5, 6]

3)不论几维数组都展平成一维数组,接收 Infinity 作为参数

[1,2,[3,4,[5,6]]].flat(Infinity)
//[1, 2, 3, 4, 5, 6]

方法二

思路:利用reduce函数的特点,如果当前元素不是一个数组,就把当前元素concat链接在上一个元素后,如果当前元素是一个数组那么就递归fn,把每一项concat连接成数组

//用reduce实现
function fn(arr){
   return arr.reduce((prev,cur)=>{
      return prev.concat(Array.isArray(cur)?fn(cur):cur)
   },[])
}

reduce 的几个参数(total,currentValue, index,arr)
total(必需): 累计的初始值或者每次计算后的返回值
currentValue(必需):每次遍历的当前元素
index(可选):每次遍历的当前元素的索引
arr(可选):当前元素所属的数组对象

利用这个思路也可以使用循环代替reduce函数

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

也可以用扩展运算符改写成

function fn(arr){
    let arr1 = [];
    let bStop = true;
    arr.forEach((val)=>{
        if(Array.isArray(val)){
            arr1.push(...val);
            bStop = false
        }else{
            arr1.push(val)
        }
    })
    if(bStop){
        return arr1;
    }
    return fn(arr1)
}

方法三

let arr = [1,2,3,[4,5]]
let arr1 = arr.toString().split(',').map((val)=>{
    return parseInt(val)
})
console.log(arr1)//[1,2,3,4,5]

方法四

看当前数组是否是二维以上数组(即数组中的元素是否是数组),如果是一维数组即返回当前数组即可,如果是二维及二维以上数组,利用apply展开一层,一直循环展开成一维数组。

function fn(arr){
    while(arr.some(item => Array.isArray(item))){
       arr =  [].concat.apply([],arr);
    }
    return arr;
}