网站地图    收藏    合作   

主页 > 采坑 > 前端采坑 > javascript常见API采坑 >

js递归优化之纵转横

来源:未知    时间:2021-05-22 19:27 作者:小飞侠 阅读:

[导读] 前端JS递归慎用!多少级递归就会创建多少级调用帧,非常消耗内存和CPU!!! 如图: 优化方法: 其一:纵深不执行,转横向执行,也就是利用while循环执行, 其二:如果上面还不满...

前端JS递归慎用!多少级递归就会创建多少级调用帧,非常消耗内存和CPU!!!

如图:

image.png


优化方法:

其一:纵深不执行,转横向执行,也就是利用while循环执行,

其二:如果上面还不满足,比如超大递归纵深,超大关联关系,可以先执行其一,然后收集所有参数转为1维数组(纵深改横向),然后利用队列思路去解决问题。


执行结果:

image.png

代码如下:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">

var list = [];
// var max = 10000;
// var index = 0;
var data = [
	{
		n:'a',x:0,y:0
		,child:[
			{ n:'a1',x:0,y:0 },
			{ n:'a1',x:0,y:0 },
			{ n:'a1',x:0,y:0 },
			{ n:'a1',x:0,y:0 },
			{ n:'a1',x:0,y:0
				,child:[
					{ n:'a',x:0,y:0 },
					{ n:'a',x:0,y:0 },
					{ n:'a',x:0,y:0 },
					{ n:'a',x:0,y:0 },
					{ n:'a',x:0,y:0 
						,child:[
							{ n:'a1',x:0,y:0 },
							{ n:'a1',x:0,y:0 },
							{ n:'a1',x:0,y:0 },
							{ n:'a1',x:0,y:0 },
							{ n:'a1',x:0,y:0
								,child:[
									{ n:'a',x:0,y:0 },
									{ n:'a',x:0,y:0 },
									{ n:'a',x:0,y:0 },
									{ n:'a',x:0,y:0 },
									{ n:'a',x:0,y:0 
										,child:[
											{ n:'a',x:0,y:0 },
											{ n:'a',x:0,y:0 },
											{ n:'a',x:0,y:0 },
											{ n:'a',x:0,y:0 },
											{ n:'a',x:0,y:0 
												,child:[
													{ n:'a1',x:0,y:0 },
													{ n:'a1',x:0,y:0 },
													{ n:'a1',x:0,y:0 },
													{ n:'a1',x:0,y:0 },
													{ n:'a1',x:0,y:0
														,child:[
															{ n:'a',x:0,y:0 },
															{ n:'a',x:0,y:0 },
															{ n:'a',x:0,y:0 },
															{ n:'a',x:0,y:0 },
															{ n:'a',x:0,y:0 }
														]
													}
												]
											}
										]
									}
								]
							}
						]
					}
				]
			}
		]
	}
	,{
		n:'b',x:0,y:0
		,child:[
			{ n:'b1',x:0,y:0 },
			{ n:'b1',x:0,y:0 },
			{ n:'b1',x:0,y:0 },
			{ n:'b1',x:0,y:0 },
			{ n:'b1',x:0,y:0
				,child:[
					{ n:'b1a',x:0,y:0 },
					{ n:'b1a',x:0,y:0 },
					{ n:'b1a',x:0,y:0 },
					{ n:'b1a',x:0,y:0 },
					{ n:'b1a',x:0,y:0 },
				]
			}
		]
	}
	,{
		n:'c',x:0,y:0
		,child:[
			{ n:'c1',x:0,y:0 },
			{ n:'c1',x:0,y:0 },
			{ n:'c1',x:0,y:0 },
			{ n:'c1',x:0,y:0 },
			{ n:'c1',x:0,y:0
				,child:[
					{ n:'c1',x:0,y:0 },
					{ n:'c1',x:0,y:0 },
					{ n:'c1',x:0,y:0 },
					{ n:'c1',x:0,y:0 },
					{ n:'c1',x:0,y:0 }
				]
			}
		]
	}
];


var listCbk = function(){

}

function tco(f) {
  var value;
  var active = false;
  var accumulated = [];

  return function accumulator() {
  // 这里accumulated将形参入栈
    accumulated.push(arguments);
	// 这里保证只有第一次调用才会进入
    if (!active) {
      active = true;
      while (accumulated.length) {
        value = f.apply(this, accumulated.shift());
      }
      active = false;
      return value;
    }
  };
}

var sum = tco(function(_data) {
  for(var i=0,len=_data.length;i<len; i++){
  	//
  	var _fnData = _data[i];
  	// console.log('first----', _fnData);
  	list.push(_fnData);

  	if (_fnData.child && _fnData.child.length > 0){
  		sum(_fnData.child);
  	}else {
  		// return list;
  	}
  }
  return list;
});
console.log((data));
console.log(sum(data));

</script>
</body>
</html>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论