1. 项中最多一层深度的扁平化
- 1.1concat() + apply
- Array.prototype.concat.apply([],arr)
例子:
- Array.prototype.concat.apply([],[1,2,3,4,5,[6,7]])
- // 这样写相当于在一个空的数组上调用 concat 然后给他穿进去的参数不是一个数组, 而是这个数组里的项. 这是利用了 apply 的特性, 因为 apply 第二个参数接受一个数组, 然后数组里面的内容就是参数. 等同于下面的样子:
- [].concat(1,2,3,4,5,[6,7])
1.2 concat() + 拓展运算符
[].concat(...arr)
这样写就相当于把数组打碎了. 比如把 [1,2,3,4,5,[6,7]] 打碎成 1,2,3,4,5,[6,7]
然后调用[].concat(1,2,3,4,5,[6,7]) 结果就是[1, 2, 3, 4, 5, 6, 7]
所以有了拓展运算符 apply 就可以下岗了, 可读性非常的强.
1.3 flat()
这个是为了扁平化的专门的函数, 可以扁平化自定义层的的数组, 语法如下
var newArray = arr.flat([depth]);
depth 是指定的深度, 默认为 1
例如:
- const arr=[[1,2,3],[4,5,6]];
- console.log(arr.flat()) // [1,2,3,4,5,6]
如果是多层的话,
- const arr=[[1,2,3],[4,[5,6]]];
- console.log(arr.flat()) // [1,2,3,4,[5,6]]
- console.log(arr.flat(2)) // [1,2,3,4,5,6]
2. 项中最多 N 层数组的扁平化
2.1 递归方法
自然想到的就是递归了, 递归需要一个终点, 这个终点就是下面的 hasArray(), 如果这个数组里面的项不存在 Array 对象, 都是基本数据的话, 就返回 false. 否则返回 true.
- // 判断数组里面还有数组吗.(终点判定)
- function hasArray(arr){
- for(item of arr){
- if(Array.isArray(item)){
- return true
- }
- }
- return false
- }
- // 扁平化一个深度为一层数组
- function paiping(arr){
- // ES6 写法:
- return [].concat(...arr)
- // ES5 写法:
- // return Array.prototype.concat.apply([],arr)
- }
- // 扁平化 N 层深度的数组
- function paiping2(arr){
- if(hasArray(arr)){
- return paiping2(paiping(arr))
- }else{
- return arr
- }
- }
可以简化一下: 简洁的一批, 是吧, 不解释了, 对照着上面看就好了.
- function fn(arr){
- for(item of arr){
- if(Array.isArray(item)){
- return fn([].concat(...arr))
- }
- }
- return arr
- }
- 2.2 toString()
无论你的数组多深, 只要你 toString 一下, 他们的结构就没有了.
- const arr = [[1, 2, 3], [4, [5, 6]]];
- console.log(arr.toString()) // "1,2,3,4,5,6"
这时候我们针对这个字符串, 用 split 分隔一下逗号, 生成一个单个字符串数组.
let arr1 = arr.toString().split(',') // ?["1", "2", "3", "4", "5", "6"
我们现在只需要遍历一下, 把他转化成数字就行了.
- let arrnum = arr1.map((val) => {
- // console.log(val)
- return parseInt(val)
- })
- console.log(arrnum) // [1,2,3,4,5,6]
来源: http://www.bubuko.com/infodetail-3459683.html