5种 JavaScript 方式实现数组扁平化
本文介绍了JavaScript中实现数组扁平化的五种常用方法。涵盖reduce递归、toString与split结合、join与split结合、显式递归以及ES6扩展运算符。通过对比各方法的代码实现与适用场景，帮助开发者根据实际需求选择最优方案，深入理解数组处理技巧。
一、数组扁平化概念
数组扁平化的核心目标是将一个包含多层嵌套的多维数组转换为一维数组。
[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]
二、实现
1. reduce
遍历数组的每一项，如果当前项是数组，则进行递归处理；否则使用concat将其合并到结果中。
function flatten(arr) {
return arr.reduce((result, item)=> {
return result.concat(Array.isArray(item) ? flatten(item) : item);
}, []);
}
reduce是数组原型上的一种方法，它接收一个回调函数作为累加器，让数组中的每个值（从左到右）逐步缩减，最终计算出一个单一的值。
reduce方法包含两个主要参数：回调函数，以及传给total的初始值。
// 求数组的各项值相加的和：
arr.reduce((total, item)=> { // total为之前的计算结果，item为数组的各项值
return total + item;
}, 0);
2. toString & split
调用数组的toString方法，先将数组转换为字符串，然后再利用split方法分割字符串，还原为数组形式。
function flatten(arr) {
return arr.toString().split(',').map(function(item) {
return Number(item);
})
}
由于split分割后得到的数组每一项都是字符串类型，因此需要配合map方法遍历数组，将每一项转换为数值型。
3. join & split
与上述toString类似，join方法同样可以将数组转换为字符串。
function flatten(arr) {
return arr.join(',').split(',').map(function(item) {
return parseInt(item);
})
}
4. 递归
通过递归方式遍历每一项，若遇到数组则继续深入遍历，否则使用concat将元素添加到结果中。
function flatten(arr) {
var res = [];
arr.map(item => {
if(Array.isArray(item)) {
res = res.concat(flatten(item));
} else {
res.push(item);
}
});
return res;
}
5. 扩展运算符
es6语法的扩展运算符能够将二维数组展开变为一维。
[].concat(...[1, 2, 3, [4, 5]]); // [1, 2, 3, 4, 5]
基于这一特性，我们可以进行遍历操作：若arr中仍包含数组元素，则再次使用扩展运算符进行展开，直至数组中不再包含嵌套数组为止。
function flatten(arr) {
while(arr.some(item=>Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
总结：
到此这篇关于5种 JavaScript 方式实现数组扁平化的文章就介绍到这了,更多相关JavaScript 实现数组扁平化内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38