实现数组扁平化的 6 种方式

思考

怎么用最普通的方法解决数组扁平化问题。
ES6里面是否有一些高级的方法能够直接实现。

概述

数组扁平化其实就是将一个多层嵌套的数组Array(嵌套可以是任何层数)转化为只有一层的数组。

扁平化的实现

方法一：普通的递归实现

通过循环递归的方式，一项一项地去遍历，如果每一项还是数组那么就继续往下遍历，利用递归程序的方法，来实现数组的每一项的连接。

var a = [1,[2,[3,4]]];

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

flat(a) // [1, 2, 3, 4]

方法二：利用 reduce 函数迭代

从方法一可以看出，其实就是对数组的每一项进行处理，可以使用reduce来是实现数组的拼接，从而简化代码。

var arr = [1,[2,[3,4]]];

function flat(arr){
    return arr.reduce(function(prev, next){
        return prev.concat(Array.isArray(next) ? flat(next) : next)
    },[])
}

console.log(flat(arr)) // [1, 2, 3, 4]

方法三：扩展运算符实现

var arr = [1,[2,[3,4]]];

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

console.log(flat(arr)) // [1, 2, 3, 4]

以上三种方式都是通过普通递归思路衍生的方法，reduce方法提供的几个参数比较灵活，能解决很多问题。

方法四：split 和 toString 共同处理

var arr = [1,[2,[3,4]]];
function flat(arr){
    return arr.toString().split(',')
}
console.log(flat(arr)) // ['1', '2', '3', '4']

方法五：直接使用ES6中的 flat

arr.flat([depth])

depth:决定数组的展开深度，Infinity表示直接拍成一维数组

var arr = [1,[2,[3,4]]];

arr.flat(Infinity); // [1, 2, 3, 4]

方法六：正则和 JSON 方法的共同处理

var arr = [1,[2,[3,4]]];
function flat(arr){
   let str = JSON.stringify(arr);
   str = str.replace(/(\[|\])/g,'');
   str = '['+ str +']';
   return JSON.parse(str);
}

console.log(flat(arr)) // [1, 2, 3, 4]

总结

学习使用数组方法，灵活运用数组方法解决问题。