JS 数组扁平化

最新推荐文章于 2023-05-03 09:09:12 发布

shengjon

最新推荐文章于 2023-05-03 09:09:12 发布

阅读量70

点赞数

分类专栏： web 文章标签： javascript 数组扁平化 reduce 多维数组

本文链接：https://blog.csdn.net/shengjon/article/details/115762139

版权

web 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

理解：多维数组转化成一维数组

用数组自带的 flat 方法
利用正则表达式，（缺点：数组里面的元素都会变成字符串类型）
利用 JSON.parse 优化正则版
通过递归方式实现
通过 reduce 实现

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数组扁平化</title>
</head>

<body>
	<script>
		let arr = [1, [2, 3, [4, 5, 6], 7], 8];

		// 1. 用数组自带的扁平化方法
		console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8]

		// 利用正则表达式  缺点是：数组里面的元素都会变成字符串类型
		let arr2 = JSON.stringify(arr).replace(/\[|\]/g, ''); // ["1", "2", "3", "4", "5", "6", "7", "8"]
		console.log(arr2.split(','));

		// 正则改良版
		let arr3 = JSON.parse(`[${arr2}]`);
		console.log(arr3); //[1, 2, 3, 4, 5, 6, 7, 8]

		// 递归实现
		let array = [];
		let fn = (arr) => {
			for (let i = 0; i < arr.length; i++) {
				if (Array.isArray(arr[i])) {
					fn(arr[i]);
				} else {
					array.push(arr[i]);
				}
			}
		}
		fn(arr);
		console.log(array); // [1, 2, 3, 4, 5, 6, 7, 8]

		// reduce 实现
		let arr4 = arr => {
			return arr.reduce((pre, cur) => {
				return pre.concat(Array.isArray(cur) ? arr4(cur) : cur)
			}, [])
		}
		console.log(arr4(arr)); // [1, 2, 3, 4, 5, 6, 7, 8]
	</script>
</body>

</html>