js处理大数据数组循环的一些性能优化【黑马web前端】

更新时间:2019年07月26日 11时16分28秒来源:黑马程序员论坛

前言

观察者模式，是一种设计模式。这些设计模式就是一些思路。当然，关于排序，有快速排序法，关于查找有二分查找法等等，这些都为我们提供了一些思路。那么对于避免不了的大数据循环，分类，查找，有什么更加提高性能，或者说是降低内存消耗的方法吗？

案例

假设后端返回数据如下：

[JavaScript] 纯文本查看 复制代码

{
    "code": 0,
    "message": "",
    "data": {
        "list": [{
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 0,
            "name": "中国未知",
            "id": 156
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 0,
            "name": "台湾省",
            "id": 710000
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "台湾省未知",
            "id": 719900
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "高雄市",
            "id": 710200
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "花莲县",
            "id": 712200
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "嘉义市",
            "id": 710700
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "南投县",
            "id": 711500
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "澎湖县",
            "id": 712300
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "屏东县",
            "id": 712000
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "台北市",
            "id": 710100
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "台东县",
            "id": 712100
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "台南市",
            "id": 710500
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "台中市",
            "id": 710400
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "桃园市",
            "id": 711100
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "新竹市",
            "id": 710600
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "宜兰县",
            "id": 710900
        }, {
            "city_level": "CITY_LEVEL_NONE",
            "parent_id": 710000,
            "name": "云林县",
            "id": 711700
        }, ...........//此处省略上千条
            ]
            }
           }

上面的数据假设是全世界5000多个城市的数据，城市可能分为几个级别，省、市、区等等。

现在要把这些城市数据处理成级联关系的，类似如下：

[JavaScript] 纯文本查看 复制代码

[{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }]
        }]

一般人的做法如下：省、市、区三级，做三个循环，每个循环都要过滤一下，父元素ID和子元素parent_id相等的数据，当然也可以递归循环。

代码可能如下：

[JavaScript] 纯文本查看 复制代码

   this.shengData.forEach((item, index) => {
     item.children = _tempShengData.filter(itm => itm.parent_id == item.id)
      item.children.forEach(initem => {
        initem.children = _tempShengData.filter(itm => itm.parent_id == initem.id)
        if (initem.children.length > 0) {
          initem.children.forEach(sunitem => {
            sunitem.children = _tempShengData.filter(stm => stm.parent_id == sunitem.id)
          })
        }
      })
    })

//_tempShengData 是经过处理之后，去除了父级元素是0或者是空的情况的所有元素， this.shengData是后端返回的所有元素

这里最耗费性能的是循环里面还有过滤。这里消耗会很大！

优化方案

数据库查找快速方法可以建索引。那么数组可以建立类似索引的东西吗？根据上面的数组，我们可以得知，一个parent_id可能有多个子元素，我们可以建立类似key和vue形式的对象，通过对象的key，来直接获取vue值，岂不是更快？

这样就循环一次就可以了，将上面代码改进如下：

// 将所有的数据进行一个分类，key是parent_id，value是children

[JavaScript] 纯文本查看 复制代码

let regionObj = {}
城市数据.forEach(item => {
      regionObj[item['parent_id']] = regionObj[item['parent_id']] || []
       regionObj[item['parent_id']].push(item)
 })

这样regionObj这个对象就是以parent_id为key，value是一个children元素的集合了。

然后再进行一次分类吧

[JavaScript] 纯文本查看 复制代码

this.shengData.forEach((item, index) => {
        item.children = regionObj[item.id] ? regionObj[item.id] : []
      item.children.forEach(initem => {
        initem.children = regionObj[initem.id] ? regionObj[initem.id] : []
        if (initem.children.length > 0) {
          initem.children.forEach(sunitem => {
            sunitem.children = regionObj[sunitem.id] ? regionObj[sunitem.id] : []
          })
        }
      })
    })

这样比之前快了很多。

本文转自：https://www.haorooms.com/post/js_bigdataarray

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

js处理大数据数组循环的一些性能优化【黑马web前端】

相关阅读