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

本文主要是介绍【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()实现

这里主要有三步操作

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

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步：

先利用JSON.stringify()方法将数组转换为一个字符串；
然后利用正则表达式对字符串中的[] 进行清除；
然后在最外层加上[];
最后利用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]