原文地址
数组展开就是将嵌套的数组扁平化(转换为一维的)eg:
const arr=[[[1, 2], [1, 2, 3]], [1, 2]] => [1, 2, 1, 2, 3, 1, 2]
console.log(flatten(arr)) //[1,2,1,2,3,1,2]
1、判断每一项是否是数组,然后递归
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"a"]]
function flatten(arr){
let result=[]
for(let i=0,l=arr.length;i<l;i++){
if(Array.isArray(arr[i])){
//递归调用
result=result.concat(flatten(arr[i]))
}else{
result.push(arr[i])
}
}
return result
}
console.log(flatten(arr),arr)
2、toString
数组在调用toString()会将数组转换成"1,2,1,2,3,1,2"
,再执行split(",")
方法会变成["1", "2", "1", "2", "3", "1", "2"]
还需要将所有的参数转换为数字,所以这种方式的不足就是如果数组里面是[1,2,3,"4","5"]
既有数字又有字符串,会全部展开为数字
const arr=[[[1, 2], [1, 2, 3]], [1, 2]]
function flatten(arr){
return arr.toString().split(",").map(item => {
//转为数字
return +item
})
}
console.log(flatten(arr),arr)
3、reduce方法
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
function flatten(arr){
return arr.reduce((pre,next) => {
return pre.concat(Array.isArray(next) ? flatten(next) : next) //如果是数组同样的递归调用
},[])
}
console.log(flatten(arr),arr)
4、解构的方式
利用es6新增结构方法可以提取一层的方法,来一层层提取出来
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
function flatten(arr){
while(arr.some(item => Array.isArray(item))){
//如果当前数组中还有数组,则展开
arr=[].concat(...arr)
}
return arr
}
console.log(flatten(arr),arr)
5、js原生方法flat
flat(depth)
方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。参数depth
表示要提取嵌套数组的结构深度,默认为1
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
arr.flat(Infinity)
6、Underscore.js的flatten方法
先上代码
/**
* param {Array} input 要操作的数组
* param {Boolean} shallow 浅展开,及为true时,只展开一层,为false是深度展开
* param {Boolean} strict 遍历第一层时,是否放弃非数组对象
* param {Array} output 保存最后输出的内容
*/
var flatten = function(input, shallow, strict, output = []) {
var idx = output.length;
for (var i = 0, length = getLength(input); i < length; i++) {
var value = input[i];
// 说明flatten方法对类数组对象也有支持
if (isArrayLike(value) && (_.isArray(value) || _.isArguments(value))) {
if (shallow) {
// 只展开一层
var j = 0, len = value.length;
while (j < len) output[idx++] = value[j++];
} else {
// 深度迭代,递归展开
flatten(value, shallow, strict, output);
idx = output.length;
}
} else if (!strict) {
output[idx++] = value;
}
}
return output;
};
output
将返回数组当作参数传递,可以省去在递归的时候将数据一层层的return
到上一层,在性能上会有所提升
::: tip 注意
当shallow
为false
时,strict
为true
是,返回的永远时[]
,这是因为,当shallow
为false
时是深度迭代,,当最后迭代到不是数组的时候,就会进入到else if
中,如果此时strict
为true
则就不会进入到这个分支中,那么output
就永远不会被操作,
:::
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。