数据扁平化

数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。

一、递归

循环数组元素,如果还是一个数组,就递归调用该方法

	var arr = [1, [2, [3, 4]]];
	
	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;
	}


console.log(flatten(arr))

二、tostring

如果数组的元素都是数字,那么我们可以考虑使用 toString 方法,因为:

[1, [2, [3, 4]]].toString() // “1,2,3,4”
调用 toString 方法,返回了一个逗号分隔的扁平的字符串,这时候我们再 split,然后转成数字不就可以实现扁平化了

	// 方法2
	var arr = [1, [2, [3, 4]]];
	
	function flatten(arr) {
	    return arr.toString().split(',').map(function(item){
	        return +item
	    })
	}
	
	console.log(flatten(arr))

然而这种方法使用的场景却非常有限,如果数组是 [1, ‘1’, 2, ‘2’] 的话,这种方法就会产生错误的结果。

三、reduce

既然是对数组进行处理,最终返回一个值,我们就可以考虑使用 reduce 来简化代码:
// 方法3
var arr = [1, [2, [3, 4]]];

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

console.log(flatten(arr))

ES6 增加了扩展运算符,用于取出参数对象的所有可遍历属性,拷贝到当前对象之中:

var arr = [1, [2, [3, 4]]];
console.log([].concat(…arr)); // [1, 2, [3, 4]]
我们用这种方法只可以扁平一层,但是顺着这个方法一直思考,我们可以写出这样的方法:

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

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

四、yield*的用法,天才级别的扁平化方式

function* iterTree(tree){
      if(Array.isArray(tree)){
          for(let i = 0 ;i<tree.length;i++){
              yield* iterTree(tree[i]);
          }
      }else{
          yield tree;
      }
  }
 let arr1 = [1, 2, ['a', 'b', ['中', '文', [1, 2, 3, [11, 21, 31]]]], 3];
  let list=[]
for (const x of iterTree(arr1)) {
    list.push(x)
  }
  console.log(list);//[1, 2, "a", "b", "中", "文", 1, 2, 3, 11, 21, 31, 3]


五、es6中的flat函数也可以实现数组的扁平化

let arr1 = [1,2,['a','b',['中','文',[1,2,3,[11,21,31]]]],3];
 console.log( arr1.flat( Infinity ) ); 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值