前言
在编程的世界里,数组扁平化犹如一场巧妙的空间变换魔法,它能将深层嵌套的数组结构转化为单一层级的平面数组。就像手中的俄罗斯套娃,扁平化的过程就是将每一个小娃娃都优雅地取出,然后排列成一行。在这个变换过程中,递归、循环,以及ES6中的flat()方法,都是处理数据时的得力助手,它们使得数据处理变得更加简洁和高效,让我们不再担心在数组的多维迷宫中迷失方向。
1.初识递归
文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
我们这幅图清楚的给出了递归的计算过程,就是一层一层往里走,然后我们要给出初始值,就是递归的终止条件。最后往前进行回溯。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
斐波那契数列是递归的经典例子。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
2.flat方法
文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
js官方打造了一个非常好用的方法,可以直接进行数组的扁平化处理,里面传递的参数是扁平化的处理层数,我们可以直接传入一个Infinity(无穷的),就是不管为多少层,我都给你处理掉。最终返回处理结果[1,2,3,4,5]文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
3.手搓一个flat方法
文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
在手搓这个方法之前我们先认识一下concat数组的拼接方法,作用是把后面的数组元素取出来,拿到前面数组里面去,返回拼接后的新数组,原数组都不改变。打印[1,2,3,4]和[1,2]文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
同样我们也来聊一下数组的解构,我们可以把两个数组进行解构,然后拼接,这个和前面所讲方法的作用是一样的。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html
手搓1:
ini
const arr = [1, 2, 3, [1, 2, [4, 5]]]
function flat1(arr) {
let res = []
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
res = res.concat(flat1(arr[i]))
} else {
res.push(arr[i])
}
}
return res
}
console.log(flat1(arr));
手搓2:
ini
const arr = [1, 2, 3, [1, 2, [4, 5]]]
function flat1(arr) {
let res = []
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
res = [...res, ...flat1(arr[i])]
} else {
res.push(arr[i])
}
}
return res
}
console.log(flat1(arr));
接下来我们一起看看,如何手搓。
- 首先定义一个数组。
- 对传入数组进行遍历。
- 如果这个元素属于数组,则我们先进行递归。
- 然后和已有数组拼接。
- 如果不是数组则直接推入。
- 最后我们直接返回。
4.toString()方法
我们可以直接采用toString方法数组扁平化之后的字符串,我们将字符串转换为数组,然后处理每个元素为数字即可,但是大家也会发现这个方法是有弊端的,就是数组中出现字符串时会出现NaN。
5.reduce()方法
在此之前我们先来认识一下这个方法,里面接收两个参数,而回调函数里接4个参数,通常只用前两个参数,代表之前统计值和当前值,而初始值就是我们的第二个参数。上一轮的总和返回给下一轮作为初始值,最终返回数组元素内的累加。
javascript
const arr = [1, 2, 3, [1, 2, [4, 5]]]
function flat1(arr) {
return arr.reduce((pre, item) => {
return pre.concat(Array.isArray(item) ? flat1(item) : item)
}, [])
}
console.log(flat1(arr));
我们接下来就可以看看这个方法(因为截屏原因,冒号后面接的是item)
- 我们对数组里面的元素采用累加。
- 给一个初始值[ ]。
- 我们判断当前元素是不是数组,如果是则递归调用,不是则返回此数。
- 最后取其里面的元素和上一个元素进行拼接。
- 返回作为下一个元素要拼接的pre。
- 因为是一个递归而且我们要最终值,我们必须把整体的值进行返回。
6. some()方法
首先我们要知道some方法返回布尔值,判断每个值,是否至少存在一个满足表达式的结果。如果arr里面至少存在一个大于5的数,就是true
javascript
const arr = [1, 2, 3, [1, 2, [4, 5]]]
function flat1(arr) {
while (arr.some((item) => Array.isArray(item))) {
arr = [].concat(...arr)
}
return arr
}
console.log(flat1(arr));
这个方法和之前手搓的方法本质上差不多,但是会更加方便一些。
小结
数组扁平化是编程中将复杂问题简化的一种技巧,它的目的是将嵌套多层的数组转换为单层数组。通过使用循环、递归或ES6中的flat方法,可以轻松地展开嵌套的数组,使得信息结构清晰,数据处理变得更加高效和便捷。这不仅提高了代码的可读性,也优化了执行效率。
评论