前言
最近有同学问我,有没有一些比较简单的方法,把多维数组展开成一维数组,就是扁平化数组。这也是一道常见的大厂面试题!
如果没有遇到这个问题的朋友可能会问什么是数组扁平化?
其实数组扁平化是指将一个多维数组变为一个一维数组。
例如:
[1,2,[3,4,[5],6,[7]]]
===>[1,2,3,4,5,6,7,]
今天婧婧就带大家,手撕它!
一、ES10的flat方法
作为开发人员都喜欢用最简单的方法,最好是一句代码能搞定一个功能那种。
那就先给大家介绍一个最简单,代码量最少的flat()
方法实现数组扁平化。
flat()
方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
// 默认只可展开一层数组 const arr1 = [0, 1, 2, [3, 4]] console.log(arr1.flat()) // [0, 1, 2, 3, 4] // 只可展开两层数组 const arr2 = [0, 1, 2, [[[3, 4]]]]; console.log(arr2.flat(2)) // [0, 1, 2, [3, 4]] //使用 Infinity,可展开任意深度的嵌套数组 var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
用好flat()
,好像就没有解决不了的数组扁平化。如果有,那就用join或者split方法吧!
二、join+split 方法
join()
和 split()
两个方法大家应该都很熟悉吧,p.s.不熟悉的往下阅读也就熟悉了!
没想到两个平平无奇的方法组合起来,竟然还能实现这么强大的功能!这简直震惊了我的小伙伴~
接下来看看我是如何组合使用这两个方法实现数组扁平化吧~
join()
方法把 数组展开为字符串,并且以 , 隔开split() 把字符串分割为数字 ,但是数组中的每一项数据都为字符串的数字使用map()
映射把字符串转换为number数据类型的数字。
var arr = [1, 2, [3, 4],5,[6,[7]]];// 展开一层数组 var res = arr.join(',').split(',').map(function(item) { return item*1; }) // res = [1,2,3,4,5,6,7]
是不是看起来一目了然?接下来婧婧就要讲一个多数小伙伴都头疼的方法了,准备好了吗?
三、递归 + 数组方法
递归对于很多朋友来讲就是噩梦般的存在。
很难了解递归的执行过程和递归性能本身也不怎么好,所以都遵循能不用递归就不用它。
随着ES6+
的发展,一些新的技术都能实现以前只有递归才能做的事,就导致使用递归的频率就更低,但多用,你会发现递归也就那样,没有难点。
接下看看如何使用递归实现数组扁平化吧~
function flatDeep(arr) { return arr.reduce((result, item)=> { return result.concat(Array.isArray(item) ? flatDeep(item) : item); }, []); } var arr = [1,2,3,[1,2,3,4, [2,3,4]]]; var res = flatDeep(arr) // res = [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
嗯,这样来看,这个其实也不是什么噩梦嘛。如果不熟悉,就多写多练,总能学会的!
但下面这个对于多数人来说,就是个陌生的存在。跟着婧婧一起来看看!
四、Generator迭代器
Generator是ES6新增的技术之一。ES6 新增了 Generator 函数,可以通过 yield 关键字,把函数的执行流挂起,从而可以改变执行流程,或者可以暂停、延迟执行,可以给异步编程提供解决方案。
我们也可以利用这一特性,来实现数组扁平化,但是也会涉及到递归的操作,说明在JavaScript
中递归的是一个不可忽视的技术点。
function* flatten(array) { for (const item of array) { if (Array.isArray(item)) { yield* flatten(item); } else { yield item; } }} var arr = [1, 2, [3, 4, [5, 6]]] var res = [...flatten(arr)] // [1, 2, 3, 4, 5, 6]
这里调用方法并不能直接得到结果,而是在迭代器里,使用next()可以一个个取出来,但是太麻烦,所以可以用扩展运算符展开之后放入一个新的额数组从而得到最终结果。
五、结语
讲到这里,好像数组扁平化也没有那么难了吧。现在看好像很简单,但是太久没有使用,偶然碰见还是会装作不认识。嗯,可不要让它成为你最熟悉的陌生人哦~
动起手来手撕它才是正解!