Zlog
首页归档关于
Zlog

一个探索技术、编程和构建 Web 的个人空间。

© 2026 Zlog

导航

首页归档关于

链接

/
|
·
·
·
首页/数组扁平化

数组扁平化

将多维数组转换成一个一维数组 [1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]

Z

Zephyr110

2020年10月23日·1 分钟
|
frontendfrontend-javascript

1. 数组扁平化的几种方法

将多维数组转换成一个一维数组 [1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]

js
let arr = [1, 2, [3, 4], [5, [6, 7]]];

1.1 reduce

遍历数组每一项,若该项是数组则继续递归遍历,否则 concat

js
function flatten(arr) {
	return arr.reduce((result, item) => {
		return result.concat(Array.isArray(item) ? flatten(item) : item);
	}, []);
}
// 调用返回  [1, 2, 3, 4, 5, 6, 7]

1.2 toString & split

js
function flatten(arr) {
	return arr
		.toString()
		.split(',')
		.map((item) => {
			return Number(item);
		});
}
//调用返回  [1, 2, 3, 4, 5, 6, 7]

1.3 join & split

js
function flatten(arr) {
	return arr
		.join(',')
		.split(',')
		.map((item) => {
			return item * 1;
		});
}
//调用返回  [1, 2, 3, 4, 5, 6, 7]

1.4 扩展运算符

js
function flatten(arr) {
	while (arr.some((item) => Array.isArray(item))) {
		arr = [].concat(...arr);
	}
	return arr;
}
//调用返回  [1, 2, 3, 4, 5, 6, 7]

1.5 flat(depth)

参数: -depth: 嵌套层数,在未知层数时,可以用 Infinity 作为参数

js
arr.flat(Infinity);
//调用返回  [1, 2, 3, 4, 5, 6, 7]

总结

不管用上述哪种方法,均需结合使用场景选取,时间复杂度是首要需要考量的因素

标签

frontendfrontend-javascript

评论 (0)

评论功能仅在主站可用,请访问 zephyr110.vercel.app

相关文章

OffscreenCanvas

MDN-OffscreenCanvas

2025年12月10日·7 分钟

Service Worker

Web worker 是一种在浏览器中运行的后台脚本,它可以在独立的线程中执行任务,而不会阻塞主线程的执行。Web worker 的主要作用是处理耗时的计算任务,例如图片处理、文本分析、数据处理等,以避免阻塞主线程,提高页面的响应性能

2024年5月28日·4 分钟

vue-tour二次封装

npm install vue-tour

2023年7月22日·7 分钟

← 返回文章列表