js中对list数组数据进行Map数据结构改造

最新推荐文章于 2024-10-17 00:18:07 发布

cool-girl

最新推荐文章于 2024-10-17 00:18:07 发布

阅读量1.5k

点赞数

分类专栏：纯原创文章标签： js

本文链接：https://blog.csdn.net/adoreen/article/details/106401345

版权

纯原创专栏收录该内容

6 篇文章 0 订阅

订阅专栏

后端返回的数据类型是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。