JavaScript多维数组扁平化:递归、reduce与扩展运算符实现及push与concat区别
本文详细讲解JavaScript中将多维数组转换为一维数组的多种实现方式,包括递归、toString拼接、reduce累加及ES6扩展运算符。重点解析push()与concat()在修改原数组及处理嵌套数组时的行为差异,并提供各方法的适用场景与代码示例,帮助开发者根据实际需求选择最优方案。
数组扁平化概述
数组扁平化:将多维数组变成一维数组
面对如 a=[1,[2,[3,4]],5,6] 这样的嵌套数组结构,我们的目标是将其转换为仅包含元素的一维数组。实现这一目标有多种技术手段:
方法一:递归实现
function parseArr(arr,res){
var i=0;
for(i=0;i<arr.length;i++){
if(arr[i] instanceof Array){
parseArr(arr[i],res);
}else{
res.push(arr[i]);
}
}
}
var a=[1,[2,[3,4]],5,6];
var res=[];
parseArr(a,res);
递归实现方案
方法二:递归优化(推荐)
var arr = ['mu','zi',['dig',['big','love']]]
function flatten(arr){
var res = [];
for(var i=0;i<arr.length;i++){
if(Array.isArray(arr[i])){
res = res.concat(flatten(arr[i]));
}else{
res.push(arr[i]);
}
}
return res;
}
console.log(flatten(arr))//["mu", "zi", "dig", "big", "love"]
对上述代码逻辑进行详细解析:
1.语法: Array.isArray(object);参数:object必需。要测试的对象。
返回值
若 object 为数组则返回 true;否则返回 false。若 object 参数非对象类型,同样返回 false。
push与concat方法差异
2.push()与concat()的区别
- 第一,push()直接修改原数组,执行后原数组内容发生变化,即在原数组末尾追加值;而concat()操作时,会先将原数组的值复制到新数组中,再对新数组进行操作,因此原数组保持不变。
- 第二,当参数非数组时,无论参数数量多少,push()和concat()均直接将参数追加至数组末尾;若参数为数组,push()会将整个数组作为一个元素追加到原数组后,而concat()则会展开数组,将其内部元素逐一追加到原数组后。
方法二:利用toString()将数组转换为字符串,再通过split()分割为字符串数组(此时每个元素均为字符串类型),最后使用map()方法将每个元素转换回非字符串类型(如数字)。
//arr数组中的元素不能为字符串只能为数组
var newArr=arr.toString().split(',').map(function(ele){
return +ele;
});
console.log(newArr)
alert(typeof arr[0]); //number
字符串转换方案
方式三:使用toString()和split(',')方法
toString()
若数组元素均为数字,可考虑使用 toString 方法,因为: toString会将数组中的数以逗号形式结合起来。
调用toString()后使用split(',')转换为数组,并将其转换回数字数组:
var arr = [1, [2, [3, 4],[5,[6],[7,8]]]];
var arrStr = arr.toString();
console.log(arrStr);//1,2,3,4,5,6,7,8
var strArr = arrStr.split(',');
console.log(strArr)//["1", "2", "3", "4", "5", "6", "7", "8"]
方式二和方式三 的场景只适用于数组内全部是数字的情况,因为中间是全部转换为字符串了。
reduce累加器方案
方法四: 使用reduce和concat方法
Array.prototype.flatten=function(){
return this.reduce(function(prev, cur) {
var moreArr = [].concat(cur).some(Array.isArray); //判断cur是不是一个数组
return prev.concat(moreArr ? cur.flatten() : cur);
},[]);
};
var arr=a.flatten();
//合并二维数组
var twoArr = [['mu','zi'],['dig','big'],['lucky','jiji']];
var oneArr = twoArr.reduce(function(total,currentValue){
// console.log(total)
return total.concat(currentValue);
})
console.log(oneArr);//["mu", "zi", "dig", "big", "lucky", "jiji"]
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。

var arr = [1,2,3,4,5,6,7,8,9,10]
var str = arr.reduce(function(prev,cur,index,arr){
return prev + cur ;
})
console.log(str)//55
ES6扩展运算符方案
方式五:es6扩展运算符
function flatten(arr){
while(arr.some(item=>Array.isArray(item)){
arr = [].concat(...arr);
}
return arr;
}
由于扩展运算符一次只能展开一层数组:
var arr = [1, [2, [3, 4]]];
console.log([].concat(...arr)); // [1, 2, [3, 4]]
因此考虑只要数组中还有数组,就使用扩展运算符展开一次。
若有不足请多多指教!希望给您带来帮助!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对本站的支持。如果你想了解更多相关内容请查看下面相关链接
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
相关标签:
