js中對list陣列資料進行Map資料結構改造

後端返回的資料型別是list陣列

[



    {



        "processStartUser":"1111",



        "taskCreateTime":1590634371219,



        "taskCompleteTime":1590634371221,



        "taskHandler":"1111",



        "taskHandlerType":null,



        "taskHandlerOpinion"
 
:null,



        "taskHandlerLink":null,



        "taskHandlerDescription":null,



        "taskPractitioner":"1111",



        "taskId":null,



        "taskName":"開始",



        "actId":"start",



        "actName":"開始",



        "process_defined_id":null,



        "process_instance_id"
 
:null,



        "taskAuditStatus":"approving",



        "taskStatus":null,



        "logisticsNum":null




    },



    {



        "processStartUser":"1111",



        "taskCreateTime":1590634371221,



        "taskCompleteTime":1590634371236,



        "taskHandler":"1111",



        "taskHandlerType"
 
:null,



        "taskHandlerOpinion":null,



        "taskHandlerLink":null,



        "taskHandlerDescription":null,



        "taskPractitioner":"1111",



        "taskId":"472718072751329281",



        "taskName":"代理商申請",



        "actId":"service",



        "actName":"代理商申請",



        "process_defined_id":null,



        "process_instance_id":null,



        "taskAuditStatus":"approving",



        "taskStatus":null,



        "logisticsNum":null




    },



    {



        "processStartUser":"1111",



        "taskCreateTime":1590634371237,



        "taskCompleteTime":null,



        "taskHandler":"劉智慧",



        "taskHandlerType":null,



        "taskHandlerOpinion":null,



        "taskHandlerLink":null,



        "taskHandlerDescription":null,



        "taskPractitioner":"劉智慧",



        "taskId":"472718072835215362",



        "taskName":"商務審批",



        "actId":"business",



        "actName":"商務審批",



        "process_defined_id":null,



        "process_instance_id":null,



        "taskAuditStatus":"approving",



        "taskStatus":null,



        "logisticsNum":null




    },



    {



        "processStartUser":"1111",



        "taskCreateTime":1590634371247,



        "taskCompleteTime":null,



        "taskHandler":"Lisa",



        "taskHandlerType":null,



        "taskHandlerOpinion":null,



        "taskHandlerLink":null,



        "taskHandlerDescription":null,



        "taskPractitioner":"Lisa",



        "taskId":"472718072860381187",



        "taskName":"商務審批",



        "actId":"business",



        "actName":"商務審批",



        "process_defined_id":null,



        "process_instance_id":null,



        "taskAuditStatus":"approving",



        "taskStatus":null,



        "logisticsNum":null




    },



    {



        "processStartUser":"1111",



        "taskCreateTime":1590634371253,



        "taskCompleteTime":null,



        "taskHandler":"KiKi",



        "taskHandlerType":null,



        "taskHandlerOpinion":null,



        "taskHandlerLink":null,



        "taskHandlerDescription":null,



        "taskPractitioner":"KiKi",



        "taskId":"472718072885547009",



        "taskName":"商務審批",



        "actId":"business",



        "actName":"商務審批",



        "process_defined_id":null,



        "process_instance_id":null,



        "taskAuditStatus":"approving",



        "taskStatus":null,



        "logisticsNum":null




    },



    {



        "processStartUser":"1111",



        "taskCreateTime":1590634371258,



        "taskCompleteTime":null,



        "taskHandler":"",



        "taskHandlerType":"",



        "taskHandlerOpinion":"",



        "taskHandlerLink":"",



        "taskHandlerDescription":"",



        "taskPractitioner":"測試商務",



        "taskId":"472718072906518531",



        "taskName":"商務審批",



        "actId":"business",



        "actName":"商務審批",



        "process_defined_id":null,



        "process_instance_id":null,



        "taskAuditStatus":"approving",



        "taskStatus":"approvePending",



        "logisticsNum":""




    }



]

在js中對list陣列進行Map資料結構的改造

//Map陣列中的key集合陣列



    $ctrl.allActList = $ctrl.follow.map(function(item){



        return item.actName




    })



// key陣列去重



    $ctrl.equalList = _.uniq($ctrl.allActList)



    // 建立Map並set資料




    $ctrl.mapList = new Map()



    $ctrl.equalList.map(function(item){



        var valueList = []



        $ctrl.follow.map(function(e){



            if(e.actName == item)



                valueList.push(e)



                $ctrl.mapList.set(item,valueList) 



        })



    })

對應的HTML中的程式碼

其中在HTML中可以通過$ctrl.mapList.get()獲取值

<div ng-repeat="item in $ctrl.equalList">



    <div style="position:relative;overflow:hidden">




        <div class="app-line" style="top:20px"></div>




        <div class="dib renew-re" style="top:-4px">




            <i class="iconfont icon-time circle-gray" ng-show="!item.taskCompleteTime"></i>




            <i class="iconfont icon-zhengque circle-yellow" ng-show="item.taskCompleteTime"></i>




        </div>




        <div class="dib ml20 vertical-top" style="max-width:90%">




            <p>{{item}}</p>




            <p ng-repeat="e in $ctrl.mapList.get(item)">處理人：{{e.taskHandler}}



                <span ng-show="!e.taskHandler">等待稽核</span>




                <span ng-show="e.taskHandlerType=='approveReturned'">已退回</span>




                <span ng-show="e.taskHandlerType=='approveWithdrawed'">已撤回 撤回環節：{{e.taskHandlerLink}}



                </span>




                <span>{{e.taskHandlerOpinion}}</span>




                <span class="ml10">{{e.taskCompleteTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>




            </p>




                   



        </div>




    </div>




</div>

迴圈list套list比較慢，時間複雜度是m*n，list裡面用Map取比較快，時間複雜度m+n。

https://blog.csdn.net/adoreen/article/details/106401345?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-106401345.pc_agg_new_rank&utm_term=js%E5%90%91list%E6%95%B0%E7%BB%84%E6%B7%BB%E5%8A%A0map&spm=1000.2123.3001.4430