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

评论

相关文章

Facade

外观模式:就是提供一个统一的接口去访问多个子系统的多个不同的接口,为子系统中的一组接口提供统一的高层接口。使得子系统更容易使用,不仅简化类中的接口,而且实现调用者和接口的解耦。

2021年12月26日·2 分钟

Singleton

单例模式:就是在整个运行时域,一个类只有一个实例对象。

2021年12月26日·2 分钟

Function Overloading

函数名相同,函数的参数列表不同(参数个数、参数类型),根据参数的不同之行不同的操作。

2021年12月19日·2 分钟

← 返回文章列表