今天来小结一下面试中常问的一个问题:数组扁平化。
JS引用数据类型,数组。除了常见的一维数组,如
let arr = [1,2,3,4,5]
还有二维数组和多维数组,如
let arr2 = [1,2,3,[4,5],[6,7],8]
let arr3 = [1,2,3,[4,5],[6,7,[8,9]]]
有时候我们需要将这些数组转化成一维数组,这个过程就叫做数组扁平化。
以下就是几种常见的数组扁平化的方法:
1、递归法
思想:遍历数组,判断数组的某项是否还是数组,如果不是,直接放入新数组里面,如果该项是数组,则继续将该项的数组进行遍历,递归调用同样的方法,将结果与上层结果进行拼接。
//定义一个数组扁平化函数
function flatten(arr){
var res = []
for(var i=0; i<arr.length; i++){
if(Array.isArray(arr[i])){ //判断数组里面的项是否还是数组
res = res.concat(flatten(arr[i])) //如果是,递归执行扁平化函数
}else{
res.push(arr[i]) //如果不是,则将该项放入新数组中
}
}
return res
}
let arr = [1,2,3,[4,5],[6,7,[8,9]]]
let res = flatten(arr)
console.log(res)
2、ES6扩展运算符(...)
扩展运算符可以对数组进行展开,如
let arr = [1,2,3,4,5]
console.log(...arr) //1,2,3,4,5
根据这个思想,我们可以对多维数组进行一层层展开,如
let arr = [1,2,3,4,[5,6]]
console.log(...arr) //展开最外层 1 2 3 4 [5,6]
每使用一次扩展运算符,会展开一层,这样我们可以多次使用,使得数组里面的数组全部展开。
tips:some()方法是判断数组中的某一项是否满足某个条件,有一个条件满足,则返回true。
function flatten(arr){
while(arr.some(item => Array.isArray(item))){
console.log(arr) //控制台打印,看每一步的结构
arr = [].concat(...arr)
}
return arr
}
let arr = [1, 2, 3, 4, [5, 6, [7, 8, [9, 10]]]]
let res = flatten(arr)
console.log(res) //[1,2,3,4,5,6,7,8,9,10]
控制台打印的层级结构
3、ES2019引入 flat()
ES2019引入flat()方法,可以递归到指定深度将所有数组连接,返回一个新数组。
let arr = [1,2,3,4,[5,6]]
console.log(arr.flat(1)) //[1,2,3,4,5,6]
let arr1 = [1,2,3,4,[5,6,[7,8]]]
console.log(arr1.flat(2)) //[1,2,3,4,5,6,7,8]
如果不确定多维数组的层数,那么可以用 Infinity 代表“无穷大”。
let arr = [1,2,3,......] //很多层数组,具体不清楚
let res = arr.flat(Infinity)
console.log(res) //达到效果