数组扁平化

410 阅读2分钟

数组扁平化就是把多维数组转化成一维数组。

数组扁平化的方法

1、 es6 flat(depth)

flat(depth) 方法中的参数depth,代表展开嵌套数组的深度,默认是1

以下需要知道数组的维度

[1,2,[3,4],5].flat();
//(5) [1, 2, 3, 4, 5]
​
[1,2,[3,4,[6,7]],5].flat()
//(6) [1, 2, 3, 4, [6, 7], 5]
​
[1,2,[3,4,[6,7]],5].flat(2)
 //(7) [1, 2, 3, 4, 6, 7, 5]

更简单的方法无需知道数组的维度,直接将目标数组变成1维数组。depth的值设置为Infinity

let a = [1,[2,3,[4,[5]]]];  
a.flat(Infinity); // [1,2,3,4,5]  a是4维数组

2、 for循环
let arr1 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
function flatten(arr) {
    let res = [];
    for (let i = 0, length = arr.length; i < length; i++) {
        if (Array.isArray(arr[i])) {
            res = res.concat(flatten(arr[i])); //concat 并不会改变原数组
            //res.push(...flatten(arr[i])); //扩展运算符  
        } else {
            res.push(arr[i]);
        }
    }
    return res;
}
flatten(arr1); //[1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

利用for循环遍历数组的每一项并加以判断,如果不是数组,就执行push操作,是数组的化,就再次执行该函数(递归),直至遍历完整个数组。

...和concat()可以进行替换。


3、 reduce()方法

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

var arr1 = [1, 2, [3], [1, 2, 3, [4, [2, 3, 4]]]];
function flatten(arr) {
    return arr.reduce((res,next) =>{
        return res.concat(Array.isArray(next)? flatten(next) : next);
    },[]);
}

这里使用的是数组的reduce方法,需要注意的是reduce方法,我们传递了两个参数,

第一个参数就是就是处理扁平化的箭头函数,第二个参数是一个空数组,也是作为遍历的开始。(res)


4、 toString()方法

无论数组多深,只要你toString一下,他们的结构就没有了。

var arr = [[1, 2, 3], [4, [5, 6]]];

//用split分隔逗号,生成一个单个字符串数组。
let arr1 = arr.toString().split(',') //  ["1", "2", "3", "4", "5", "6"]

//转化为数字
let arrnum = arr1..map((item) => parseInt(item))
console.log(arrnum) // [1,2,3,4,5,6]

5、concat() + 拓展运算符

var arr = [1,2,3,4,5,[6,7]]
[].concat(...arr)
//(7)[1, 2, 3, 4, 5, 6, 7]


[].concat(1,2,3,4,5,[6,7,[8,9]])
//(8) [1, 2, 3, 4, 5, 6, 7, Array(2)]

此方法的优势:可读性强;缺点:项中最多一层深度的扁平化