随着Web前端技术的不断发展,技术团队的不断壮大,越来越多的数据需要放在前端用JavaScript做处理。本篇我就来介绍一下,如何使用 Object 对象做索引,从而实现信息的快速检索。
场景一:根据ID找到学生信息
拿学生信息管理举例说明吧,其实公司里的员工管理,药店里的药品管理及分类管理都是类似的。
场景说明
在学生列表页面,后端把20名学生(每页20条数据)的所有信息都给到了Web前端;前端根据情况选择比较重要的信息在列表中显示。如果需要查看学生的详细信息,则需要点击“学生名”,或该点击对应列的“查看详情”按钮。
一般情况下在列表中,可点击部分都会绑定该第信息的“唯一标识码”(ID)。所以前端需要根据这个“唯一标识码”检索出对应学生的信息并显示出来。
在列表页面学生信息的结构如下面的代码段所示:
var students = [
{id:1,name:"仵士杰",gender:"男",birthday:"1990-02-03",……},
{id:2,name:"张珍珍",gender:"女",birthday:"1989-02-08",……},
……
];
需要强调以下几点:
- 在列表页面,学生的所有信息都已经加载到Web前端;
- 在列表页面仅显示了比较重要的学生信息,如:姓名、性别,班级;
- 详细信息页面包含列表页面所没有的信息,如:入学时间,年龄,证件照、学费金额、学费缴纳状态等;
一般做法
可能有人会想到,每次“查看详细信息”时就向后端发起一次请求。如果在列表页面仅是加载了学生的部分信息,而详情页面中显示的很多信息在列表页面中没有加载的情况下,只能用这种方式。当然我们例举的这个场景下这种做法也可以,但是对于一个在程序优化方面有强迫症且有些偏执的人来说,是绝对不会这么做的。
还有人想到了可以使用循环,代码如下:
function getStudentById(id){
for(var i=0; i
或者有人觉得循环的效率太低,于是想先对 students 数组排序,然后用二分查找。这是一个好的想法,但必须保证所选择的排序算法有较高的效率。否则还不如使用上面的循环。
以上这些方法中,最优的应该是二分查找;但门槛较高,需要写一个高效率的排序,然后还需要写二分查找的算法。
用 Object 做索引
在JavaScript中,Object 对象可以动态增加属性,对属性的访问速度是非常快的(可暂且认为与平衡二叉树的叶子结点的访问速度相同)。所以可以利用Object对象的这一特点构造快速检索的数据结构。
针对此场景生成 可快速检索的 Object 对象的代码如下:
var stuObj = {};
for(var i=0; i
上面的代码生成了一个 stuObj 对象,这个对象中的属性与 students 数组中元素的id一一对应。可使用如下代码完成快速检索:
function getStudentById(id){
return stuObj["_"+id];
}
小结
每次“查看详细信息”都向服务端发起一次请求的方案是最差的,这一点应该不会有异议。
使用循环的方式进行查找的时间复杂度是 O(n)。
排序后进行二分查找时,假设使用了效率较高的排序算法(如快排,n*logn)。二分查找的时间复杂度是 logn 。则总体时间复杂度为:n*logn /n+logn = 2logn。但这种方式需要我们写复杂的排序和二分查找算法,有些得不尝失。
最后分析用Object 做索引的方案。每次向Object中增加属性的时间复杂度是 logn(n是Object中当前属性的数量) ,外面有个for循环时间复杂度为n。而检索时的时间复杂度是 logn(n是Object中当前属性的数量)。所以总体时间复杂度约为: n*logn/n +logn = 2logn。
虽然我们用 Object 做索引时,在时间复杂度上与“快速排序+二分查找”相同,但是这种方案容易实现。不用写复杂的快排和二分查找算法。
场景二:多级联动时查找下一级select元素应该需要显示的option。
简单点,举一个“省、市、县”三级联动的例子吧。
场景说明
后端一次性把全国所有的省、市、县信息及它们之间的所属关系都发送到前端了。后面的事全部交给前端处理。原始数据结构如下面的代码段所示:
// 省
var province=[{name:"北京",id:1},{name:"河北",id:2},{name:"河南",id:3},……];
// 市
var city=[{name:"郑州市",id:1,province_id:3},{name:"周口",id:2,province_id:3},……];
// 县
var county=[{name:"郸城县",id:1,city_id:2},{name:"西化县",id:2,city_id:2},……];
当我选中一个省的时候,在第二级的select上元素需要显示该省下面所有的市以供选择。当我选择一个市时,在第三级的select元素上需要显示对应市下面所有的县以供选择。
一般做法
循环方式,当选中一个省时的示例代码如下:
function getCitysByProvinceId(province_id){
var results = [];
for(var i=0;i
当选中一个市时,获取市下面所有县的代码与上面的代码类似。
用 Object 做索引
首先需要创建索引,代码如下:
var cityByProvinceId = {};
for(var i=0;i
索引完成后,检索就容易了,并且效率会非常之高:
function getCityByProvinceId(province_id){
return cityByProvinceId["_"+province_id];
}
选择市时对县的处理方式,与选择省时对市的处理方式完全相同,在此不再赘述。
总结
在Web前端,需要用到快速检索的地方,用 Object 做索引的方式来完成是一个非常好的方案。首先,Object 中属性的检索效率是由JavaScript引擎优化过的,值得信赖。其次,没有复杂的算法和逻辑,代码清晰易读。即提高了效率又简化了代码,何乐而不为呢。