数组扁平化的几种方法

数组扁平化的几种方法

数组扁平化：将一个多维数组转换为一个一维数组的过程就是数组的扁平化。

arr = [ 1, [ 2, 3, [ 3, 8 ] ], [ 2, 5 ] ]   =>  [ 1, 2, 3, 3,  8, 2, 5 ]

1、ES6中的方法：flat方法。

// 默认展开一层数组
arr = arr.flat();
console.log(arr);  // [1,2,3,[3,8],2,5]

// 使用 Infinity 作为深度，可展开任意深度的嵌套数组
arr = arr.flat( Infinity );
console.log(arr);  // [1,2,3,3,8,2,5]

2、toString + split

调用数组的 toString 方法，将数组转为字符串，然后再用 split 分割，因为 split 分割后形成的数组的每一项值为字符串，所以需要用一个 map 方法遍历数组将其每一项转换为数值型。

arr.toString().split(',').map(x => Number(x));   // [1,2,3,3,8,2,5]

3、join + split

和上面的 toString 一样，join 也可以将数组转换为字符串。

arr.join(',').split(',').map(x => Number(x));   // [1,2,3,3,8,2,5]

4、递归

递归的遍历每一项，若为数组则继续遍历，否则 concat

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;  // [1,2,3,3,8,2,5]
}

5、扩展运算符

ES6的扩展运算符能将二维数组转换成一维数组

[].concat(...[ 1, [ 2, 3, [ 3, 8 ] ], [ 2, 5 ] ]);  // [ 1, 2, 3, [ 3, 8 ], 2, 5 ]

根据这个结果我们可以做一个遍历，若 arr 中含有数组则使用一次扩展运算符，直至没有为止。

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

flatten(arr)  // [1, 2, 3, 3, 8, 2, 5]

6、reduce

遍历数组每一项，若值为数组则递归遍历，否则 concat

function flatten(arr) {  
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}
flatten(arr)  // [1, 2, 3, 3, 8, 2, 5]