前端多维数组扁平化常见的几种方法

在 JavaScript 中，数组扁平化是指将一个嵌套多层的数组转换为一个一维数组。

以下是几种实现数组扁平化的方法：

一：使用flat()方法：

const array = arr.flat([depth]);

参数 depth 参数可选，默认为1，代表要展开数组的深度级别.

flat()方法是ES2019中的方法

const arr = [1, 2, [3, 4], 5, 6];
const newArr = arr.flat();
console.log(newArr) // [1, 2, 3, 4, 5, 6]

const arr = [1, 2, [3, 4], [5, [6, 7], 8], 9];
const newArr = arr.flat();
console.log(newArr) // [1, 2, 3, 4, 5, [6, 7], 8, 9]

const newArr = arr.flat(2);
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 指定深度为 Infinity 可以完全扁平化
const arr = [1, 2, [3, 4], [5, [6, 7], 8], 9];
const newArr = arr.flat(Infinity);
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

当前方法会深度的递归展开数组，最终返回一个新的一维数组，但是原数组不会改变。

二：使用递归和reduce

通过遍历每个元素，将数组元素展开并合并成一个新的的数组。

function flatten(arr){
    return arr.reduce((acc, val)=>{
        return acc.concat(Array.isArray(val) ? flatten(val): val);
    }, []);
};

// 使用：
const arr = [1, 2, [3, 4], [5, [6, 7], 8], 9];
const newArr = flatten(arr);
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

三：flatMap()方法

flatMap()方法适合一层嵌套的数组。

const arr = [1, 2, [3, 4], 5, 6];
const newArr = arr.flatMap(item=>item);
console.log(newArr) // [1, 2, 3, 4, 5, 6]

如果使用flatMap()方法处理多层数组,只会结构最外层的单层一层数组。

const arr = [1, 2, [3, 4], [5, [6, 7], 8], 9];
const newArr = arr.flatMap(item=>item);
console.log(newArr) // [1, 2, 3, 4, 5, [6, 7], 8, 9]

四：使用 toString() 和 split()

当前方法只适用于纯数字的数组，这种方法先将数组转换为字符串，然后再转成数组。

const arr = [1, 2, [3, 4], [5, [6, 7], 8], 9];
const newArr = arr.toString().split(',').map(Number);
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

arr.toString() 会将数组转换成字符串 1,2,3,4,5,6,7,8,9, 再通过split(',')后转化为['1', '2', '3', '4', '5', '6', '7', '8', '9']，然后遍历数组将string转换为number。

五：使用栈（非递归方法）

function flatten(arr){
    const result = [];
    const stack = [...arr];
    while(stack?.length > 0){
        // 获取数组的最后一个元素，生成新数组。
        const current = stack.pop();
        if(Array.isArray(current)){
            stack.push(...current);
        }else{
           result.unshift(current); 
        }
    };
    return result;
};

const arr = [1, 2, [3, 4], [5, [6, 7], 8], 9];
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

总结：

• flat()简洁且性能好，但需要 ES2019+ 支持。
• 递归 + reduce() ：灵活且兼容性好，适合处理任意深度的嵌套。
• flatMap()：适合一层嵌套的数组。
• toString() ：仅适用于纯数字数组，简单但有局限性。
• 栈方法：避免了递归的潜在堆栈溢出问题，适合处理极深的嵌套数组。