深入探索多种数组扁平化方法，让你的数据结构处理能力更上一层楼
大家好！我是你们的技术小伙伴FogLetter，今天我们要一起探索一个既基础又重要的主题——数组扁平化。作为一个经常与数据打交道的开发者，相信你一定遇到过需要处理嵌套数组的场景。那么，让我们开始这场从多维到一维的奇妙冒险吧！
什么是数组扁平化？
想象一下，你有一个俄罗斯套娃，每个套娃里面都可能有更小的套娃。数组扁平化就像是把这些套娃全部取出来，排成一条直线。
用技术术语来说，数组扁平化就是将一个多维数组转换为一维数组的过程。
// 扁平化前
[1, 2, [3, 4, [5, 6]]]
// 扁平化后
[1, 2, 3, 4, 5, 6]
为什么需要数组扁平化？
在实际开发中，我们经常会遇到嵌套的数组结构：
- API返回的复杂数据
- 树形结构的扁平化处理
- 数据处理和统计分析
- 递归组件的props传递
学会数组扁平化，能让你在处理这些场景时事半功倍！
方法一：递归实现 - 最直观的解法
递归是解决树状结构问题的天然利器，数组的嵌套本质上就是一种树状结构。
const flatten = (arr) => {
let res = [];
for (let item of arr) {
if (Array.isArray(item)) {
// 如果当前元素是数组，递归扁平化
res = res.concat(flatten(item));
} else {
// 如果是基本元素，直接加入结果
res.push(item);
}
}
return res;
}
// 测试
console.log(flatten([1, 2, [3, 4, [5, 6]]]));
// [1, 2, 3, 4, 5, 6]
核心思路：
- 遍历数组的每个元素
- 如果元素是数组，递归调用扁平化函数
- 如果元素不是数组，直接加入结果数组
- 使用
Array.isArray()判断是否为数组
优点： 逻辑清晰，易于理解 缺点： 递归深度过大时可能导致栈溢出
方法二：reduce实现 - 函数式的优雅
如果你喜欢函数式编程，那么reduce方法一定会让你眼前一亮。
const flatten = (arr) => {
return arr.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
}, []);
}
// 测试
console.log(flatten([1, 2, [3, 4, [5, 6]]]));
// [1, 2, 3, 4, 5, 6]
代码解读：
reduce方法接收两个参数：回调函数和初始值（这里是空数组[]）- 回调函数接收两个参数：累加器
pre和当前值cur - 对于每个元素，如果是数组就递归扁平化，否则直接concat
函数式编程的魅力： 这种方法更加声明式，关注的是"做什么"而不是"怎么做"。
方法三：栈模拟 - 避免递归的智慧
当嵌套层级很深时，递归可能会导致栈溢出。这时候，我们可以用栈来模拟递归过程。
function flatten(arr) {
let res = [];
// 将初始数组展开并放入栈中
let stack = [...arr];
while (stack.length) {
let item = stack.pop();
if (Array.isArray(item)) {
// 如果是数组，展开后重新压入栈
stack.push(...item);
} else {
// 如果是基本元素，加入结果
res.push(item);
}
}
return res.reverse();
}
// 测试
console.log(flatten([1, 2, [3, 4, [5, 6]]]));
// [1, 2, 3, 4, 5, 6]
算法思路：
- 创建结果数组res和栈stack
- 将原始数组展开后放入栈
- 循环从栈中弹出元素：
- 如果是数组，展开后重新压入栈
- 如果是基本元素，加入结果数组
- 由于栈是后进先出，最后需要反转结果数组
优势： 避免了递归的栈溢出风险，适合处理深度嵌套的数组
方法四：ES6 flat方法 - 现代JavaScript的便利
ES2019引入了flat方法，让数组扁平化变得异常简单。
// 使用 Infinity 可扁平化任意深度的嵌套数组
console.log([1, 2, [3, 4, [5, 6]]].flat(Infinity));
// [1, 2, 3, 4, 5, 6]
// 也可以指定扁平化的深度
console.log([1, 2, [3, 4, [5, 6]]].flat(1));
// [1, 2, 3, 4, [5, 6]]
console.log([1, 2, [3, 4, [5, 6]]].flat(2));
// [1, 2, 3, 4, 5, 6]
参数说明：
flat()默认只扁平化一层flat(1)扁平化一层flat(2)扁平化两层flat(Infinity)扁平化任意深度
浏览器兼容性： 现代浏览器基本都支持，但在一些老版本浏览器中可能需要polyfill。
方法五：some + 扩展运算符 - 巧妙的迭代
还有一种巧妙的方法，利用some方法和扩展运算符来实现扁平化。
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
// 测试
console.log(flatten([1, 2, [3, 4, [5, 6]]]));
// [1, 2, 3, 4, 5, 6]
实现原理：
arr.some()检测数组中是否还有嵌套数组[].concat(...arr)利用扩展运算符展开一层嵌套- 循环直到没有嵌套数组为止
性能对比与选择建议
不同的方法有不同的适用场景：
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 递归 | 逻辑清晰，易于理解 | 深度大时栈溢出 | 嵌套不深的情况 |
| reduce | 函数式，代码优雅 | 性能相对较差 | 喜欢函数式编程 |
| 栈模拟 | 避免栈溢出 | 代码相对复杂 | 深度嵌套数组 |
| flat | 简单直接，原生支持 | 兼容性问题 | 现代浏览器环境 |
| some | 代码简洁 | 性能不是最优 | 浅层嵌套 |
实战应用场景
场景一：处理API返回的嵌套数据
// API返回的用户数据
const usersData = [
{
id: 1,
name: '小明',
hobbies: ['篮球', '游泳', ['游戏', '编程']]
},
{
id: 2,
name: '小红',
hobbies: ['绘画', ['音乐', '吉他']]
}
];
// 提取所有爱好并扁平化
const allHobbies = usersData.flatMap(user => user.hobbies);
const flattenedHobbies = flatten(allHobbies);
console.log(flattenedHobbies);
// ['篮球', '游泳', '游戏', '编程', '绘画', '音乐', '吉他']
场景二：多维数组求和
// 多维数组求和
const nestedArray = [1, [2, [3, 4], 5], 6];
// 先扁平化，再求和
const flatArray = flatten(nestedArray);
const sum = flatArray.reduce((a, b) => a + b, 0);
console.log(sum); // 21
场景三：组件树的扁平化处理
在React/Vue等框架中，我们经常需要处理组件的嵌套关系：
// 模拟组件树结构
const componentTree = [
'Header',
['Sidebar', ['Menu', 'SubMenu']],
['Main', ['Content', ['Widget', 'Widget']]],
'Footer'
];
// 扁平化获取所有组件
const allComponents = flatten(componentTree);
console.log(allComponents);
// ['Header', 'Sidebar', 'Menu', 'SubMenu', 'Main', 'Content', 'Widget', 'Widget', 'Footer']
进阶思考：手写flat方法的polyfill
理解原理后，我们可以自己实现一个flat方法的polyfill：
if (!Array.prototype.flat) {
Array.prototype.flat = function(depth = 1) {
// 递归扁平化函数
const flatten = (arr, currentDepth) => {
// 如果达到指定深度或者不是数组，直接返回
if (currentDepth >= depth || !Array.isArray(arr)) {
return arr;
}
return arr.reduce((result, current) => {
return result.concat(
Array.isArray(current)
? flatten(current, currentDepth + 1)
: current
);
}, []);
};
return flatten(this, 0);
};
}
// 测试polyfill
console.log([1, 2, [3, 4, [5, 6]]].flat(1));
// [1, 2, 3, 4, [5, 6]]
console.log([1, 2, [3, 4, [5, 6]]].flat(2));
// [1, 2, 3, 4, 5, 6]
总结
数组扁平化是一个看似简单却蕴含深度的主题。通过今天的学习，我们掌握了：
- 5种实现方法：递归、reduce、栈模拟、ES6 flat、some方法
- 不同方法的优缺点和适用场景
- 实际应用案例和进阶思考
记住，没有最好的方法，只有最适合当前场景的方法。在日常开发中，要根据数据特点、性能要求和运行环境来选择合适的方法。
希望这篇笔记能帮助你在处理复杂数据结构时更加得心应手！如果你有更好的实现方法或者有趣的应用场景，欢迎在评论区分享交流～
思考题： 如果数组中出现循环引用（自己引用自己），我们的扁平化方法会怎么样？该如何处理这种情况呢？
