项目中数组循环的一个优化案例

·  阅读 1177

最近在项目中遇到一个性能问题,根据一些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!


分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改