隨著Web前端技術(shù)的不斷發(fā)展，技術(shù)團(tuán)隊(duì)的不斷壯大，越來越多的數(shù)據(jù)需要放在前端用JavaScript做處理。本篇我就來介紹一下，如何使用 Object 對象做索引，從而實(shí)現(xiàn)信息的快速檢索。
場景一：根據(jù)ID找到學(xué)生信息
拿學(xué)生信息管理舉例說明吧，其實(shí)公司里的員工管理，藥店里的藥品管理及分類管理都是類似的。
場景說明
在學(xué)生列表頁面，后端把20名學(xué)生（每頁20條數(shù)據(jù)）的所有信息都給到了Web前端；前端根據(jù)情況選擇比較重要的信息在列表中顯示。如果需要查看學(xué)生的詳細(xì)信息，則需要點(diǎn)擊“學(xué)生名”，或該點(diǎn)擊對應(yīng)列的“查看詳情”按鈕。
一般情況下在列表中，可點(diǎn)擊部分都會(huì)綁定該第信息的“唯一標(biāo)識碼”（ID）。所以前端需要根據(jù)這個(gè)“唯一標(biāo)識碼”檢索出對應(yīng)學(xué)生的信息并顯示出來。
在列表頁面學(xué)生信息的結(jié)構(gòu)如下面的代碼段所示：
var students = [
{id:1,name:"仵士杰",gender:"男",birthday:"1990-02-03",……},
{id:2,name:"張珍珍",gender:"女",birthday:"1989-02-08",……},
……
];
需要強(qiáng)調(diào)以下幾點(diǎn)：
- 在列表頁面，學(xué)生的所有信息都已經(jīng)加載到Web前端；
- 在列表頁面僅顯示了比較重要的學(xué)生信息，如：姓名、性別，班級；
- 詳細(xì)信息頁面包含列表頁面所沒有的信息，如：入學(xué)時(shí)間，年齡，證件照、學(xué)費(fèi)金額、學(xué)費(fèi)繳納狀態(tài)等；
一般做法
可能有人會(huì)想到，每次“查看詳細(xì)信息”時(shí)就向后端發(fā)起一次請求。如果在列表頁面僅是加載了學(xué)生的部分信息，而詳情頁面中顯示的很多信息在列表頁面中沒有加載的情況下，只能用這種方式。當(dāng)然我們例舉的這個(gè)場景下這種做法也可以，但是對于一個(gè)在程序優(yōu)化方面有強(qiáng)迫癥且有些偏執(zhí)的人來說，是絕對不會(huì)這么做的。
還有人想到了可以使用循環(huán)，代碼如下：
function getStudentById(id){
for(var i=0; i<students.length;i++){
if(students[i].id == id){
return students[i];
}
}
}
或者有人覺得循環(huán)的效率太低，于是想先對 students 數(shù)組排序，然后用二分查找。這是一個(gè)好的想法，但必須保證所選擇的排序算法有較高的效率。否則還不如使用上面的循環(huán)。
以上這些方法中，最優(yōu)的應(yīng)該是二分查找；但門檻較高，需要寫一個(gè)高效率的排序，然后還需要寫二分查找的算法。
用 Object 做索引
在JavaScript中，Object 對象可以動(dòng)態(tài)增加屬性，對屬性的訪問速度是非常快的（可暫且認(rèn)為與平衡二叉樹的葉子結(jié)點(diǎn)的訪問速度相同）。所以可以利用Object對象的這一特點(diǎn)構(gòu)造快速檢索的數(shù)據(jù)結(jié)構(gòu)。
針對此場景生成 可快速檢索的 Object 對象的代碼如下：
var stuObj = {};
for(var i=0; i<students.length;i++){
stuObj["_"+students[i].id] = students[i];
}
上面的代碼生成了一個(gè) stuObj 對象，這個(gè)對象中的屬性與 students 數(shù)組中元素的id一一對應(yīng)。可使用如下代碼完成快速檢索：
function getStudentById(id){
return stuObj["_"+id];
}
小結(jié)
每次“查看詳細(xì)信息”都向服務(wù)端發(fā)起一次請求的方案是最差的，這一點(diǎn)應(yīng)該不會(huì)有異議。
使用循環(huán)的方式進(jìn)行查找的時(shí)間復(fù)雜度是 O(n)。
排序后進(jìn)行二分查找時(shí)，假設(shè)使用了效率較高的排序算法（如快排，n*logn）。二分查找的時(shí)間復(fù)雜度是 logn 。則總體時(shí)間復(fù)雜度為：n*logn /n+logn = 2logn。但這種方式需要我們寫復(fù)雜的排序和二分查找算法，有些得不嘗失。
最后分析用Object 做索引的方案。每次向Object中增加屬性的時(shí)間復(fù)雜度是 logn（n是Object中當(dāng)前屬性的數(shù)量） ，外面有個(gè)for循環(huán)時(shí)間復(fù)雜度為n。而檢索時(shí)的時(shí)間復(fù)雜度是 logn（n是Object中當(dāng)前屬性的數(shù)量）。所以總體時(shí)間復(fù)雜度約為： n*logn/n +logn = 2logn。
雖然我們用 Object 做索引時(shí)，在時(shí)間復(fù)雜度上與“快速排序+二分查找”相同，但是這種方案容易實(shí)現(xiàn)。不用寫復(fù)雜的快排和二分查找算法。
場景二：多級聯(lián)動(dòng)時(shí)查找下一級select元素應(yīng)該需要顯示的option。
簡單點(diǎn)，舉一個(gè)“省、市、縣”三級聯(lián)動(dòng)的例子吧。
場景說明
后端一次性把全國所有的省、市、縣信息及它們之間的所屬關(guān)系都發(fā)送到前端了。后面的事全部交給前端處理。原始數(shù)據(jù)結(jié)構(gòu)如下面的代碼段所示：
// 省
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},……];
當(dāng)我選中一個(gè)省的時(shí)候，在第二級的select上元素需要顯示該省下面所有的市以供選擇。當(dāng)我選擇一個(gè)市時(shí)，在第三級的select元素上需要顯示對應(yīng)市下面所有的縣以供選擇。
一般做法
循環(huán)方式，當(dāng)選中一個(gè)省時(shí)的示例代碼如下：
function getCitysByProvinceId(province_id){
var results = [];
for(var i=0;i<city.length;i++){
if(province_id == city[i].province_id){
results.push(city[i]);
}
}
return results;
}
當(dāng)選中一個(gè)市時(shí)，獲取市下面所有縣的代碼與上面的代碼類似。
用 Object 做索引
首先需要?jiǎng)?chuàng)建索引，代碼如下：
var cityByProvinceId = {};
for(var i=0;i<city.length;i++){
if(!cityByProvinceId["_"+city[i].province_id]){
cityByProvinceId["_"+city[i].province_id] = [];
}
cityByProvinceId["_"+city[i].province_id].push(city[i]);
}
索引完成后，檢索就容易了，并且效率會(huì)非常之高：
function getCityByProvinceId(province_id){
return cityByProvinceId["_"+province_id];
}
選擇市時(shí)對縣的處理方式，與選擇省時(shí)對市的處理方式完全相同，在此不再贅述。
總結(jié)
在Web前端，需要用到快速檢索的地方，用 Object 做索引的方式來完成是一個(gè)非常好的方案。首先，Object 中屬性的檢索效率是由JavaScript引擎優(yōu)化過的，值得信賴。其次，沒有復(fù)雜的算法和邏輯，代碼清晰易讀。即提高了效率又簡化了代碼，何樂而不為呢。
