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

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