扁平化

# 扁平化

对于前端项目开发过程中，偶尔会出现层叠数据结构的数组，我们需要将多层级数组转化为一级数组（即提取嵌套数组元素最终合并为一个数组），使其内容合并且展开。那么该如何去实现呢？

需求:多维数组=>一维数组

let arr = [1, [2, [3, [4, 5]]], 6];// -> [1, 2, 3, 4, 5, 6]
let str = JSON.stringify(ary);

1
2

# flat()

Infinity表示展开的层次，可选指定数字，默认全部

arr.flat(Infinity);

# flatMap()

对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()

[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat() 只展开一层

1
2
3
4
5
6
7

# replace + JSON.parse

str = str.replace(/(\[|\]))/g, '');
str = '[' + str + ']';
ary = JSON.parse(str);

1
2
3

# 递归

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

1
2
3
4
5
6
7
8
9
10
11

# reduce函数迭代

function flatten(arr) {
    return arr.reduce((acc, cur)=> {
        // 遇到嵌套就递归
        return acc.concat(Array.isArray(cur) ? flatten(cur) : cur);
    }, []);
}

1
2
3
4
5
6

# 扩展运算符

function flatten(arr){
    //只要有一个元素有数组，那么循环继续
    while (arr.some(Array.isArray)) {
        arr = [].concat(...arr);
    }
    return arr;
}

1
2
3
4
5
6
7

← 数组遍历总结数组去重→