【JS】实现数组扁平化的7种方式

历史小剧场

换句话说，崇祯上台以后，是很想干事的，但有的事，干了也白干，有的事，干了不如不干，朝廷就是这么个朝廷，大臣就是这帮大臣，没法干。----《明朝那些事儿》

一、递归实现

循环：如果当前当前元素是一个数组，那么就对它进行递归处理，再将递归处理的结果拼接到结果数组上

const arr = [1, [2, [3, [4, [5]]]]]
const flatten1 = (arr) => {
    let result = [];
    arr.forEach(element => {
        if (Array.isArray(element)) {
            result = [...result, ...flatten1(element)]
        } else {
            result.push(element)
        }
    });
    return result;
}

console.info('递归：', flatten1(arr)) // [1, 2, 3, 4, 5]

二、reduce实现

原理与第一种类似
reduce方法详解：https://juejin.cn/post/6844904063729926152

const flatten2 = (arr) => {
    // pre: 用来返回最后累加的结果
    // cur: 用来遍历数组的每一项
    return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur)? flatten2(cur) : cur), [])
}

console.info('reduce：', flatten2(arr)) // [1, 2, 3, 4, 5]

三、扩展运算符实现

扩展运算符… 操作数组可以直接展开数组的第一层，主要利用这个特性进行编程

const flatten3 = (arr) => {
    while (arr.some(Array.isArray)) {
        arr = [].concat(...arr)
    }
    return arr;
}
console.log('展开运算符：', flatten3(arr)) // [1, 2, 3, 4, 5]

四、toString()+split()实现

这里主要有三步操作

1. toString(): 将数组展平成一维后再转换成字符串；
2. split()： 转换为数组；
3. 元素类型转换

const flatten4 = (arr) => {
    return arr.toString().split(',').map(Number);
}
console.log('toString() + split()：', flatten4(arr)) // [1, 2, 3, 4, 5]

注意：这种方式对数组内部的元素类型有局限性

五、JSON.stringify() + JSON.parse() + 正则表达式

这里主要分为4步：

1. 先利用JSON.stringify()方法将数组转换为一个字符串；
2. 然后利用正则表达式对字符串中的[] 进行清除；
3. 然后在最外层加上[];
4. 最后利用JSON.parse()方法解析成数组对象

const flatten6 = (arr) => {
    let str = JSON.stringify(arr).replace(/\[|\]/g, '')
    str = `[${str}]`
    return JSON.parse(str);
}
console.log('JSON.stringify() + JSON.parse() + 正则表达式：', flatten6(arr)) // [1, 2, 3, 4, 5]

注意：这种方式也对数组内部的元素类型有局限性

六、栈 - 递归的另一种表现形式（迭代）

const flatten5 = (arr) => {
    let stack = [...arr];
    let result = [];
    while (stack.length) {
        let current = stack.pop();
        if (Array.isArray(current)) {
            stack.push(...current);
        } else {
            result.push(current);
        }
    }
    return result;
}
console.log('栈：', flatten5(arr)) // [1, 2, 3, 4, 5]

七、Array.prototype.flat (终极方案)

const flatten7 = (arr) => {
    // 第二个参数是数组的深度，Infinity表示全部展开
    return arr.flat(Infinity)
}
console.log('ES6: Array.prototype.flat()：', flatten7(arr)) // [1, 2, 3, 4, 5]

参数Infinity表示完全展开

flat()方法教程：https://www.runoob.com/jsref/jsref-flat-array.html