js 标准二维数组变一维数组的方法
问题:[[0, 1], [2, 3], [4, 5]] -> [0, 1, 2, 3, 4, 5]?
方法一
利用es5
的arr.reduce(callback[, initialValue])
实现
var arr1 = [[0, 1], [2, 3], [4, 5]];
var arr2 = arr1.reduce(function (a, b) { return a.concat(b)} );
// arr2 [0, 1, 2, 3, 4, 5]
方法二
利用es6
var arr1 = [[0, 1], [2, 3], [4, 5]];
function flatten(arr) { return [].concat( ...arr.map(x => Array.isArray(x) ? flatten(x) : x) ) }
var arr2 = flatten(arr1); // arr2 [0, 1, 2, 3, 4, 5]
优点: 多维数组也可以
比如:var arr = [[1,2],3,[[[4], 5]]]
方法三
利用apply
实现
var arr1 = [[0, 1], [2, 3], [4, 5]];
var arr2 = [].concat.apply([], arr1);
// arr2 [0, 1, 2, 3, 4, 5]
方法四
通过将数组转变成字符串,利用str.split(',')
实现。缺点是数组元素都变字符串了
var arr1 = [[0, 1], [2, 3], [4, 5]];
var arr2 = (arr1 + '').split(',');
var arr2 = arr.toString().split(',');
var arr2 = arr.join().split(',');
// arr2 ["0", "1", "2", "3", "4", "5"]
方法五(补充)
利用 ES 的最新语法,Array.prototype.flat()。缺点是,有兼容性问题。优点是非常简单。
mdn 上是这么描述的:flat() 方法会递归到指定深度将所有子数组连接,并返回一个新数组。
语法:var newArray = arr.flat(depth)
,参数说明:depth,可选,指定嵌套数组中的结构深度,默认值为1。
举例:
var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]
//Infinity展开所有嵌套数组
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]
var arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]
特殊说明:flat()方法会移除数组中的空项。但undefined、null仍会保留。
var arr = [1, 2, undefined , 4, 5, null];
arr.flat(); // [1, 2, undefined , 4, 5, null]
如有问题或建议,请多多赐教!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY