方法一

ES6 语法 Array.prototype.flat(depth), depth指扁平化层级

1
2
3
4
5
6
7
let arr = [1, 2, [3, 4, [5, 6, [7]]], 8]

arr.flat() === arr.flat(1)  // 结果 [ 1, 2, 3, 4, [ 5, 6, [ 7 ] ], 8 ]

arr.flat(2)					// 结果 [ 1, 2, 3, 4, 5, 6, [ 7 ], 8 ]

arr.flat(Infinity)			// 结果 [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Infinity指代无限层级,无论数组的层级为多深都可转为一维数组

方法二

Array.prototype.toString() 没错,就是我们常见的转为字符串,没想到吧:smile:

1
2
3
4
5
6
7
8
9
let arr = [1, 2, [3, 4, [5, 6, [7]]], 8]

arr.toString()   			// 结果 "1, 2, 3, 4, 5, 6, 7, 8"

// 利用Array.prototype.split()方法
arr.toString().split(',')   // 结果 [ '1', '2', '3', '4', '5', '6', '7', '8' ]

// 看着已经完成了,其实不然,这时数组的每一项都为字符串,得改为数字
arr.toString().split(',').map(item => Number(item))

其实arr.join(',')也能达到和arr.toString()一模一样的效果,此处省略了

方法三

和toString()很像的JSON.stringify(), 但有些不同​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr = [1, 2, [3, 4, [5, 6, [7]]], 8]

JSON.stringify(arr)								 // 结果 "[1,2,[3,4,[5,6,[7]]],8]"

// emmm 和我们预期的有点不一样!-_-

// 不过细心的人发现只要把结果中的[和]替换为空,就得到了toString()的效果了,开动
const reg = /(\[|\])/g
JSON.stringify(arr).replace(reg, '')			 // 结果 "1, 2, 3, 4, 5, 6, 7, 8"

// 熟悉的她又回来啦
JSON.stringify(arr).replace(reg, '').split(',')	 // 结果 [ '1', '2', '3', '4', '5', '6', '7', '8' ]

// 同法二 map 改为数字

还是toString()吧:joy:

方法四

ES6 延展操作符… 

1
2
3
4
5

arr.flat()           // 结果 [ 1, 2, 3, 4, [ 5, 6, [ 7 ] ], 8 ]

// 先别骂,我知道上面的这个讲过了,往下看
[].concat(...arr) 	 // 结果 [ 1, 2, 3, 4, [ 5, 6, [ 7 ] ], 8 ]

也就是说一次 arr.flat() 等于一次 [].concat(...arr)

但仔细一想, 我可没 Infinity ,我咋知道来多少次 concat 呢?:fearful:

1
2
3
4
5
6
7
8
9
10
// 循环呗, 还能咋整
while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr)
}
// 结果 [ 1, 2, 3, 4, 5, 6, 7, 8 ]

/* 
*  Array.isArray(item)  // 判断 item 是否为数组
*  arr.some(callback)   // callback 函数中任意一次循环的返回值为 true 则返回 true
*/

这个有点小绕,没上面几个来的舒服了:cry:

方法五

其实在方法四中讲到了循环, 通过循环的话, 我估计大家可以花式的将一个多维数据扁平化, 那样方法可就太多了,所以通过循环遍历的方法,就不一一去讲了,这里举个递归的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let arr = [1, 2, [3, 4, [5, 6, [7]]], 8]

let result = []

const myFlat = (arr) => {
    for (let i = 0; i < arr.length; i++) {
        const item = arr[i]
        if (Object.prototype.toString.call(item) === '[object Array]') {
            myFlat(item)
            continue;
        }
        result.push(item)
    }
    return result
}
myFlat(arr)  // 结果 [ 1, 2, 3, 4, 5, 6, 7, 8 ]

这个我也不舒服:cry:

总结

以上就是我所知的数组扁平化的5?种方法, 本人很菜, 若有错误,谢谢指出:smile:, 评论