几种数组扁平化方式

数字扁平化可能在日常的工作中会用到，下面有几种扁平化的方式，收集起来，方便之后使用

    <script>
        /**
         方式一：使用原型的isPrototypeOf()方法，结合递归实现
         isPrototypeOf() 用来检测一个对象是否存在于另一个对象的原型链中，如果存在就返回 true，否则就返回 false
         如果存在于另一个对象的原型链中就继续调用方法 fn，如果不存在就直接push到用来存放的数组里面
        ***/


        let arr = [1, 2, [3, ["小王", "小张"], 5, [6, 7, 8, 9]]]

        function flattening(arr) {
            let newArr = []

            let fn = function (arrData) {
                arrData.forEach(item => {
                    Array.prototype.isPrototypeOf(item) ? fn(item) : newArr.push(item)
                })
            }
            fn(arr);
            fn = null;
            return newArr

        }
        console.log(flattening(arr))




        /**
         方式二：flat() 
         该方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
         使用 Array.flat(depth)可以实现数组的扁平化
         flat()的默认深度为1
        **/
        let arrTwo = [1, 2, [3, 4, 5, [6, 7, 8, 9, ["A", "B", "C", ["小王", "小张"]]]]]

        console.log(arrTwo.flat()) // [ 1, 2, 3, 4, 5, [ 6, 7, 8, 9 ] ]
        console.log(arrTwo.flat(1)) // [ 1, 2, 3, 4, 5, [ 6, 7, 8, 9 ] ]
        //所以 可以看出 当flat() 未传递指定深度时，默认深度为 1

        console.log(arrTwo.flat(2)) // 结果[1, 2, 3, 4, 5,6, 7, 8, 9]
        //也可以直接传递 Infinity(无穷大) 实现数组的多层嵌套的扁平化
        console.log(arrTwo.flat(Infinity));




        /***
         * 方式三:使用数组的reduce方法
         */
        let arrThree = [
            [0, 1],
            [2, 3],
            [4, 5]
        ]
        let arrFour = [1, 2, [3, 4, 5, [6, 7, 8, 9, ["A", "B", "C", ["小王", "小张"]]]]]

        //reduce实现二维数组扁平化
        let newArrOne = arrThree.reduce((prev, cur) => {
            return prev.concat(cur)  //数组 concat() 可以将两个数据合并到一个数组中，也可以将一个字符串合并到数组中去
        }, [])
        console.log(newArrOne);

        //reduce结合递归 实现二维数组扁平化
        function fn(arr) {
            return arr.reduce((acc, cur) => {
                return acc.concat(Array.isArray(cur) ? fn(cur) : cur)
            }, [])
        }
        console.log(fn(arrFour));



        /**
         *  方式四：Es6的扩展运算符 
         **/

        let arrFive = [
            [0, 1],
            [2, 3],
            [4, 5]
        ]
        let newArrOne = []
        newArrOne = arrFive.concat(...arrFive)  //扩展运算符 会去掉第一层的 []  得到 [0, 1]、[2, 3]、[4, 5]
        console.log(newArrOne) // [ 0, 1, 2, 3, 4, 5 ]

        // 多维数组转化为一维数组：
        let newArrSex = [[0, 1],[2, 3],[4, [5, 6, 7]], 8, [9] ,"A",["B","小王"]]
        let newArrTwo = []
        newArrSex.forEach(item => {
            if (Array.isArray(item)) {
                newArrTwo = newArrTwo.concat(...item)
            } else {
                newArrTwo.push(item)
            } 
        })
        console.log(newArrTwo) // 结果
    </script>