Javascript数组扁平化

js中的数组可以说是使用中频率最大的之一,有时候一些复杂的多维数组需要转成简单的一维数组来处理,这就是数组扁平化

	let arr = ['1','2','3','4','5',['6','7',['8','9']],['10']]
	// 扁平化之后[ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10' ]

首先我们可以观察一下,使用简单粗暴的方法,把数组看做一个字符串处理,剔除多余的括号[],实现方法如下

let arr = ['1','2','3','4','5',['6','7',['8','9']],['10']]
let arrs = arr.toString().replace(/\[\]/g, ' ').split(',')
console.log(arrs) // => [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10' ]

我们还可以使用递归的方法来实现降维的效果,实现如下

let arr = ['1','2','3','4','5',['6','7',['8','9']],['10']], arrs = []
function flat (arr) {
    arr.forEach(element => {
        if(Array.isArray(element)) {
            flat(element)
        } else {
            arrs.push(element)
        }
    })
}
flat (arr)
console.log(arrs) // => [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10' ]

还可以使用Array.flat()函数,将上述函数改写成如下所示:

let arrs = ['1','2','3','4','5',['6','7',['8','9']],['10']], depth = 0
function flats (arr) {
    arr.forEach(element => {
        if(Array.isArray(element)) {
            depth ++
        }
    })
	return arr.flat([depth])
}

console.log(flats (arrs)) // => [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10' ]

还可以使用数组的concat拼接数组,需要过滤空元素,示例如下:

let arr = ['1','2','3','4','5',['6','7',['8','9']],['10']], arrs = []
function flats (arr) {
    arr.forEach(element => {
        if(Array.isArray(element)) {
            arrs = arrs.concat(flats(element))
        } else {
        	arrs.push(element)
		}
    })
}
flats (arr)
console.log(arrs) // => [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10' ]

最后写一个扁平化排序去重的方法:

let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10], arr2 = []
function _arrays (arr) {
	arr.forEach(item => {
		Array.isArray(item) ? _arrays (item) : arr2.push(item)
    })
	return Array.from(new Set(arr2)).sort((a,b) => {return a-b;})
}
console.log(_arrays (arr)) // =>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]