JS 数组扁平化

假如有一个数组 var arr = [1, [2, 3, [4]]] ,我们怎么能把arr变成[1, 2, 3, 4]呢?即让多维数组降维,转换为只有一层的数组。
1. 循环数组+递归

 function flatten(arr){
     var result = [];
     for(var i = 0, len = arr.length; i < len; i++){
         if(Array.isArray(arr[i])){
             result = result.concat(flatten(arr[i]));
         }else{
             result.push(arr[i]);
         }
     }
     return result;
 }

flatten(arr)   // [1,2,3,4]

2. 利用apply
可以使用apply的原因如下:

var arr = [1, [2, 3, [4]]];
[].concat.apply([],arr);
// [1,2,3,[4]]

实现思路:利用arr.some判断当数组中还有数组的话,递归调用flatten扁平函数(利用apply扁平), 用concat连接,最终返回arr;

function flatten(arr){
	while(arr.some(item=>Array.isArray(item))){
		arr=[].concat.apply([],arr);
	}
	return arr;
}

3. reduce方法
reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。
能使用reduce原因如下:

var flattened = arr.reduce(function(prev, cur){
    return prev.concat(cur)
},[])

console.log(flattened);
//  [1,2,3,[4]]

实现思路:使用reduce, 当数组中还有数组的话,递归调用flatten扁平函数(利用reduce扁平), 用concat连接,最终返回arr.reduce的返回值;

function flatten(arr){
    return arr.reduce(function(prev, cur){
        return prev.concat(Array.isArray(cur) ? flatten(cur) : cur)
    },[])
}

flatten(arr)   // [1,2,3,4]

4. es6 展开运算符
可以使用es6 展开运算符的原因如下:

var arr = [1, [2, 3, [4]]];

console.log(...arr);
// 1,[2,3,[4]]

实现思路:利用arr.some判断当数组中还有数组的话,递归调用flatten扁平函数(利用es6展开运算符扁平), 用concat连接,最终返回arr;

function flatten(arr){
  while(arr.some(item => Array.isArray(item))){
      arr = [].concat(...arr);
  }
  return arr;
}

flatten(arr)   // [1,2,3,4]

**5. toString方法(数组元素为数字) **
如果数组的元素是数字,那么我们可以考虑toString()方法,其他情况不适用。原因如下:

[1, [2, 3, [4]]].toString()
// "1,2,3,4"

实现思路:数组适用toString()方法后变成以逗号分割的字符串,然后map遍历数组把每一项再变回整数并返回map后的结果。

function flatten(arr){
    return arr.toString().split(',').map(function(item){
         return parseInt(item);
     })
}    

flatten(arr)   // [1,2,3,4]

参考: https://blog.csdn.net/original_heart/article/details/78906911

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值