项目中数组循环的一个优化案例
2020/3/12 11:31:33
本文主要是介绍项目中数组循环的一个优化案例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
最近在项目中遇到一个性能问题,根据一些select选择框和一些单选按钮的值综合起来对一个数组进行遍历筛选,并获取最终符合条件的数据,但由于这个数组的长度过长,达到6000+,甚至更长,所以导致筛选之后的页面渲染有些卡顿,这个通过chrome浏览器的performance分析所得。所以需要对这个筛选的过程进行优化,最终想到将数组按一定长度拆分,然后并发执行循环这些拆分之后的数组,最后将结果组合起来即可。
用到的技术是promise,将拆分后的数组循环放到promise中,然后通过promise.all获得最终的数据
以下为实现demo(最近正好学typeScript,所以是以ts的语法编写的)
//拆分数组 function splitArray(array:Array<any>,spiltLength:number):Array<any>{ let index:number = 0; let arrayAfterSplit:Array<any> = []; while (index<array.length){ arrayAfterSplit.push(array.slice(index,index+=spiltLength)) } return arrayAfterSplit } // 构造数据 function constructRequireData(array:Array<any>,property:string){ let TemporaryArray:Array<any> = []; return new Promise((resolve,reject)=>{ for (let index = 0; index < array.length; index++) { //这里可以写一些筛选条件 TemporaryArray.push({ value:array[index][property], label:array[index][property] }) } resolve(TemporaryArray) }) } // 获取最终数据 function getFinalData(array:Array<any>):Array<any>{ let resultArr:Array<any>=[]; let splitArrayData:Array<any> = splitArray(array,2); let promiseArray:Array<any> = []; for (let index = 0; index < splitArrayData.length; index++) { promiseArray.push(constructRequireData(splitArrayData[index],'serviceName')) } Promise.all(promiseArray).then((result:Array<any>)=>{ resultArr = result.flat(); }) return resultArr } let arr:Array<any> = [ { serviceName:'demo01', offeringId:'01' }, { serviceName:'demo02', offeringId:'02' }, { serviceName:'demo03', offeringId:'03' }, { serviceName:'demo04', offeringId:'04' }, { serviceName:'demo05', offeringId:'05' }, { serviceName:'demo06', offeringId:'06' }, { serviceName:'demo07', offeringId:'07' }, ] getFinalData(arr);复制代码
TIME!
这篇关于项目中数组循环的一个优化案例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南