如何扁平化2维数组和多维数组 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 数组的扁平化
        // 扁平化二维数组
        {
            // 1. 直接使用自带的方法flat()会返回一个扁平化后的数组,并不会改变原数组
            let arr = [1, 2, [3, 5], 6];
            let arr1 = arr.flat();
            console.log(arr1, arr);// [1, 2, 3, 5, 6] ,[1, 2, Array(2), 6]
            // 也可以去除数组中的空字符
            let arr2 = [1, 2, , 4, 5];
            let arr3 = arr2.flat();
            console.log(arr3);//[1, 2, 4, 5]
            // 在flat(2)代表可以扁平化2维数组
            console.log(arr.flat(2)); //[1, 2, 3, 5, 6]
        }

        {
            // 2.二维数组使用ES6的reduce和concat方法 返回一个扁平化的数组
            let arr = [1, 2, [3, 5], 6, [1]];
            let arr1 = arr.reduce((acc, val) => acc.concat(val), []);
            console.log(arr1); //[1, 2, 3, 5, 6, 1]
        }


        // 如何扁平化多维数组呢=================================
        {
            // 1.在flat(3)代表可以扁平化3维数组以此类推4,5,6...Infinity(可以扁平化所有多维数组)
            let arr4 = [1, 2, [3, [4, [5]]]];
            console.log(arr4.flat(3)); //[1, 2, 3, 4, 5]
            console.log(arr4.flat(Infinity)); //[1, 2, 3, 4, 5]



            // 2.reduce + concat + isArray + recursivity(递归)
            let arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
            function flatDeep(arr) {
                // return arr.reduce((acc,val)=>acc.concat(Array.isArray(val)?flatDeep(val):val),[]);

                return arr.reduce((acc, val) => {
                    acc.push(Array.isArray(val) ? flatDeep(val) : val)
                    return acc;
                }, [])
            };
            console.log(flatDeep(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]



            // 3.扩展运算符来进行数组的扁平化
            function flat() {
                while (arr.some(item => Array.isArray(item))) {
                    arr = [].concat(...arr);
                }
                return arr;
            }
            console.log(flat(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]




            // 4.使用Generator 
            function* flatten(array) {
                for (const item of array) {
                    if (Array.isArray(item)) {
                        yield* flatten(item);
                    } else {
                        yield item;
                    }
                }
            }
            const flattened = [...flatten(arr)];
            // [1, 2, 3, 4, 5, 6]


            

            // 5.如何使用ES5的方法来扁平化数组呢
            let flatDeep1 = (arr) => {
                const arrFlat = [];//初始化缓存数组
                // 开始递归
                (function flat(arr) {
                    arr.forEach((item) => {  //forEach可以自动跳过空字符
                        Array.isArray(item) ? flat(item) : arrFlat.push(item);//判断item是不是数组如果是就递归否则就push到缓存数组
                    })
                })(arr)
                // 返回递归结果
                return arrFlat;
            }
            console.log(flatDeep1(arr));//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


            
        }
    </script>
</body>

</html>

 

posted @ 2020-11-29 18:27  小不点灬  阅读(256)  评论(0)  编辑  收藏  举报