前端日常开发常用功能系列之数组扁平

这是前端日常开发常用功能这个系列文章的第一篇，该系列是日常开发中一些常用的功能的再总结、再提炼，以防止遗忘，便于日后复习。该系列预计包含以下内容： 防抖、节流、去重、拷贝、最值、扁平、偏函数、柯里、惰性函数、递归、乱序、排序、相等、注入、上传、下载、截图。。。

 

数组扁平就是将多维数组转化为一维数组；

方法一，利用数组原型的toString方法，但是只能用于数组元素都是数值时

const arr = [1, 3, [1, 4], [2, [5, 65, [8, 9]]]];

const flattenArr = arr.toString().split(',');

// ["1", "3", "1", "4", "2", "5", "65", "8", "9"]

方法二，循环递归

const ar = [1, 3, [1, 4], ['a', [5, 65, ['b', 9]]]];

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

flatten(ar); // [1, 3, 1, 4, "a", 5, 65, "b", 9]

方法三，使用es6展开符...

const ar = [1, 3, [1, 4], ['a', [5, 65, ['b', 9]]]];

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

    flatten(ar); // [1, 3, 1, 4, "a", 5, 65, "b", 9]

方法四，使用reduce简化数组

const ar = [1, 3, [1, 4], ['a', [5, 65, ['b', 9]]]];

    const flatten = arr => {
        return arr.reduce((pre, cur) => {
            if(Array.isArray(cur)) return pre.concat(flatten(cur));
            return pre.concat(cur);
        }, []);
    };

    flatten(ar); // [1, 3, 1, 4, "a", 5, 65, "b", 9]

数组扁平化的思路基本就是循环遍历，递归进行扁平化。