數(shù)組扁平化是指將一個多維數(shù)組變成一維數(shù)組。如:
[1, [[2, 3], 4]] --> [1, 2, 3, 4]
Array.prototype.flat()
ES10 引入了 Array.prototype.flat()
方法缨称,使扁平數(shù)組變的簡單讯沈。
const arr = [1, [2, [3, [4, 5]]], 6]
// 你可以指定展開多少層
arr.flat(1) // [1, 2, [3, [4, 5]], 6]
arr.flat(2) // [1, 2, 3, [4, 5], 6]
// 使用 Infinity 作為參數(shù)郁岩,可以展開無限嵌套數(shù)組
arr.flat(Infinity) // [1, 2, 3, 4, 5, 6]
Array.prototype.toString() 和 Array.prototype.join()
如果數(shù)組的元素都是數(shù)字,那么我們可以考慮使用 Array.prototype.toString()
或 Array.prototype.join()
方法缺狠。
調(diào)用數(shù)組的 Array.prototype.toString()
方法问慎,將數(shù)組轉(zhuǎn)為字符串再用 String.prototype.split()
分割還原為數(shù)組
const flatten = arr => arr.toString().split(',').map(item => +item)
flatten(arr) // [1, 2, 3, 4, 5, 6]
Array.prototype.join()
也可以實現(xiàn)同樣的效果:
const flatten = arr => arr.join(',').split(',').map(item => +item)
flatten(arr) // [1, 2, 3, 4, 5, 6]
遞歸
對于具有更深層嵌套的數(shù)組,可以使用遞歸挤茄。
使用 Array.prototype.reduce()
遍歷數(shù)組的每一項如叼,若值為數(shù)組則遞歸遍歷,否則使用 Array.prototype.concat()
拼接穷劈。
const flatten = (arr) => {
return arr.reduce(
(acc, val) =>
Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val),
[],
)
}
flatten(arr) // [1, 2, 3, 4, 5, 6]
擴展運算符
使用 Array.prototype.concat()
配合擴展運算符(...
)展開一級嵌套數(shù)組
// 這僅適用于一級嵌套數(shù)組
[].concat(...arr) // [1, 2, [3, [4, 5]], 6]
// 較舊的瀏覽器解決方案
[].concat.apply([], arr) // [1, 2, [3, [4, 5]], 6]
在配合 while
循環(huán)笼恰,只要有一個元素有數(shù)組踊沸,那么循環(huán)繼續(xù)
const flatten = (arr) => {
while (arr.some(Array.isArray)) {
arr = [].concat(...arr)
}
return arr
}
flatten(arr) // [1, 2, 3, 4, 5, 6]
序列化后正則
const str = `[${JSON.stringify(arr).replace(/(\[|\])/g, '')}]`
JSON.parse(str) // [1, 2, 3, 4, 5, 6]