js——数组扁平化实现方式(超详细！！！)

数组扁平化，就是将一个复杂的嵌套多层的数组，一层一层的转化为层级较少或者只有一层的数组。

方式1 使用ES2019中新增的 Array.prototype.flat(参数)方法

 //方式1 使用ES2019中新增的 Array.prototype.flat(参数)方法 该方法不会改变原数组，会返回一个新数组
        var arr1=[1,2,[2,3],[[4,5]],6]
        var arr2=[2,5,5]
        console.log(arr1.flat(Infinity))
        console.log(arr2.flat(Infinity))
        console.log(arr1)

方式2 使用 Array.prototype.reduce方法 +递归

  //方式2 使用 Array.prototype.reduce方法 +递归

        //数组扁平化 使用 Array.prototype.reduce方法 +递归
        var arr1=[1,2,[2,3],[[4,5]],6]
        var arr2=[2,5,5]
        function flatten(arr){
            return arr.reduce(function(res,cur){
                return res.concat(Array.isArray(cur)?flatten(cur):cur);
            },[])
        }
        console.log(flatten(arr1))
        console.log(flatten(arr2))
        console.log(arr1)

方式三 递归

   // 递归
    function getFlatArr(arr){
        let res=[];
        for(let i=0;i<arr.length;i++){
                if(Array.isArray(arr[i])){
                    res.push(...getFlatArr(arr[i])) //不能写成res.push(getFlatArr(arr[i]))
                   //或者 res=res.concat(getFlatArr(arr[i])) //注意concat不会改变原数组，所以要重新赋值
    
                }else{
                    res.push(arr[i])
                }
            }
        
        return res
    }

    var arr=[1,2,[4,5,[4]]];
    console.log(getFlatArr(arr))
    console.log(arr)

方式4 利用扩展运算符

         <script>
          
        //利用扩展运算符   每次展开一层
    function flatten(arr){

        while(arr.some(item => Array.isArray(item))){
            
            arr = [].concat(...arr);
            console.log(arr)
        }
        return arr;
    }
 
    var  arr = [1, [2, [3, 4],'hh']];
    var arr1=flatten(arr)

    console.log('---------------');
    console.log(arr1)
    console.log(arr)
 

方式五 利用JSON.stringify()以及JSON.parse()方法，以及string中replace方法

 <script>
        //实现数组扁平化
        //利用JSON.stringify()以及JSON.parse()方法，以及string中replace方法

        let arr=[1,[2,34,[4,5],'hhh'],3];
        let str=JSON.stringify(arr);
        str=str.replace(/\[|\]/g,'');
        var arr2=JSON.parse("["+str+"]") //arr2为数组扁平化后的结果
        console.log(arr2)
        console.log(str)
        console.log(arr1)
        
    </script>

方式六 数组转成字符串，然后再将字符串转成数组

 var arr1=[1,2,[2,3],[[4,5]],6]
 var arr2=[2,5,5] 

 // 方式三 数组转成字符串，然后再将字符串转成数组
 //借助数组对象中join和map方法，以及字符串中split方法
 function flatten2(arr){
     return arr.join().split(',').map(function(cur){
         return parseInt(cur) //将字符串转成数字
     })
 }
 
 console.log(flatten2(arr1))
 console.log(flatten2(arr2))

 //上述方法都不会改变原数组
 console.log(arr1)
 console.log(arr2)