本文详细介绍JavaScript中实现数组扁平化的五种主流方案。涵盖ES10的flat()方法、基于JSON字符串的正则替换、结合reduce与concat的函数式写法、传统递归遍历以及利用扩展运算符配合some()的循环降维。每种方法均提供代码示例与适用场景分析，帮助开发者根据实际需求选择最优解。
数组扁平化的方式
什么是数组扁平化？
数组扁平化是指将一个包含多层嵌套的多维数组转换为一维数组的过程。
例如，对如下数组进行扁平化处理：
const arr = [1, [2, 3, [4, 5]]] // ---> [ 1, 2, 3, 4, 5 ]
1. 使用 flat() 方法
flat() 是 ES10 引入的方法，它会根据指定的深度参数递归遍历数组，将所有子数组中的元素提取出来，合并生成一个新的一维数组返回。（flat 意为“水平的；平坦的”）
const result1 = arr.flat(Infinity) // 指定深度为无限
console.log(result1) // [ 1, 2, 3, 4, 5 ]
const result2 = arr.flat(1) // 指定深度为1
console.log(result2) // [ 1, 2, 3, [ 4, 5 ] ]
const result3 = arr.flat(2) // 指定深度为2
console.log(result3) // [ 1, 2, 3, 4, 5 ]
2. 使用正则表达式
以下方法会将数组中的所有元素转换为字符串类型，通常不建议在生产环境中使用；
const result1 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',')
console.log(result1) // [ '1', '2', '3', '4', '5' ] 数组元素都变成了字符串
对上述方法进行优化处理；
const result2 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']')
console.log(result2) // [ 1, 2, 3, 4, 5 ]
3. 使用 reduce() + concat()
利用 reduce() 遍历数组，获取当前值和累加器，判断当前值是否为数组。初始累加器设为空数组 []，若当前值为数组则递归调用，否则直接合并，最后使用 concat() 进行数组合并。
- reduce() 方法：对数组中的每个元素执行提供的 reducer 函数（按升序执行），将其结果汇总为单个返回值。
- concat() 方法：用于合并两个或多个数组。此方法不会修改现有数组，而是返回一个新数组。
function flatten(arr) {
return arr.reduce((pre, current) => {
return pre.concat(Array.isArray(current) ? flatten(current) : current)
}, [])
}
const result = flatten(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]
4. 使用函数递归
循环遍历数组元素，若发现元素为数组类型则进行递归处理，直至所有层级展开，最终将多维数组转换为一维数组。
const result = []
function exec(arr) {
arr.forEach(item => {
if (Array.isArray(item)) {
exec(item)
} else {
result.push(item)
}
})
}
exec(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]
5. 使用扩展运算符 + concat()
ES6 引入的扩展运算符可以对数组进行降维处理（每次仅降一维）。通过循环判断数组中是否仍包含数组元素，若包含则使用 concat 合并，直到所有子数组被展开。
some() 方法：测试数组中是否至少有 1 个元素通过了提供的函数测试（返回 Boolean 类型的值）。
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr)
}
return arr
}
const result = flatten(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]
总结
本文介绍了数组扁平化的多种实现方式，希望能为您提供帮助。欢迎持续关注本站以获取更多技术内容！