隨著Web前端技術(shù)的不斷發(fā)展滤蝠，技術(shù)團隊的不斷壯大，越來越多的數(shù)據(jù)需要放在前端用JavaScript做處理锣险。本篇我就來介紹一下，如何使用 Object 對象做索引夯接，從而實現(xiàn)信息的快速檢索纷妆。
場景一：根據(jù)ID找到學生信息
拿學生信息管理舉例說明吧，其實公司里的員工管理逊拍，藥店里的藥品管理及分類管理都是類似的际邻。
場景說明
在學生列表頁面世曾，后端把20名學生（每頁20條數(shù)據(jù)）的所有信息都給到了Web前端；前端根據(jù)情況選擇比較重要的信息在列表中顯示轮听。如果需要查看學生的詳細信息血巍，則需要點擊“學生名”，或該點擊對應列的“查看詳情”按鈕柿隙。
一般情況下在列表中鲫凶，可點擊部分都會綁定該第信息的“唯一標識碼”（ID）。所以前端需要根據(jù)這個“唯一標識碼”檢索出對應學生的信息并顯示出來波附。
在列表頁面學生信息的結(jié)構(gòu)如下面的代碼段所示：
var students = [
{id:1,name:"仵士杰",gender:"男",birthday:"1990-02-03",……},
{id:2,name:"張珍珍",gender:"女",birthday:"1989-02-08",……},
……
];
需要強調(diào)以下幾點：
- 在列表頁面不恭，學生的所有信息都已經(jīng)加載到Web前端财饥；
- 在列表頁面僅顯示了比較重要的學生信息，如：姓名钥星、性別，班級贯莺；
- 詳細信息頁面包含列表頁面所沒有的信息缕探，如：入學時間，年齡耙考，證件照潭兽、學費金額、學費繳納狀態(tài)等鞋邑；
一般做法
可能有人會想到账蓉，每次“查看詳細信息”時就向后端發(fā)起一次請求剔猿。如果在列表頁面僅是加載了學生的部分信息，而詳情頁面中顯示的很多信息在列表頁面中沒有加載的情況下酷含，只能用這種方式汪茧。當然我們例舉的這個場景下這種做法也可以，但是對于一個在程序優(yōu)化方面有強迫癥且有些偏執(zhí)的人來說呀舔，是絕對不會這么做的扩灯。
還有人想到了可以使用循環(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ù)組排序捻撑，然后用二分查找。這是一個好的想法番捂，但必須保證所選擇的排序算法有較高的效率设预。否則還不如使用上面的循環(huán)。
以上這些方法中鲁沥，最優(yōu)的應該是二分查找耕魄；但門檻較高，需要寫一個高效率的排序允扇，然后還需要寫二分查找的算法则奥。
用 Object 做索引
在JavaScript中，Object 對象可以動態(tài)增加屬性糊治，對屬性的訪問速度是非撤２眨快的（可暫且認為與平衡二叉樹的葉子結(jié)點的訪問速度相同）管闷。所以可以利用Object對象的這一特點構(gòu)造快速檢索的數(shù)據(jù)結(jié)構(gòu)。
針對此場景生成 可快速檢索的 Object 對象的代碼如下：
var stuObj = {};
for(var i=0; i<students.length;i++){
stuObj["_"+students[i].id] = students[i];
}
上面的代碼生成了一個 stuObj 對象刷允，這個對象中的屬性與 students 數(shù)組中元素的id一一對應碧囊。可使用如下代碼完成快速檢索：
function getStudentById(id){
return stuObj["_"+id];
}
小結(jié)
每次“查看詳細信息”都向服務端發(fā)起一次請求的方案是最差的天通，這一點應該不會有異議。
使用循環(huán)的方式進行查找的時間復雜度是 O(n)歧蒋。
排序后進行二分查找時土砂，假設(shè)使用了效率較高的排序算法（如快排，n*logn）谜洽。二分查找的時間復雜度是 logn 萝映。則總體時間復雜度為：n*logn /n+logn = 2logn。但這種方式需要我們寫復雜的排序和二分查找算法阐虚，有些得不嘗失序臂。
最后分析用Object 做索引的方案。每次向Object中增加屬性的時間復雜度是 logn（n是Object中當前屬性的數(shù)量） 实束，外面有個for循環(huán)時間復雜度為n奥秆。而檢索時的時間復雜度是 logn（n是Object中當前屬性的數(shù)量）。所以總體時間復雜度約為： n*logn/n +logn = 2logn构订。
雖然我們用 Object 做索引時，在時間復雜度上與“快速排序+二分查找”相同避矢，但是這種方案容易實現(xiàn)悼瘾。不用寫復雜的快排和二分查找算法。
場景二：多級聯(lián)動時查找下一級select元素應該需要顯示的option审胸。
簡單點亥宿，舉一個“省、市砂沛、縣”三級聯(lián)動的例子吧烫扼。
場景說明
后端一次性把全國所有的省、市碍庵、縣信息及它們之間的所屬關(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},……];
當我選中一個省的時候静浴，在第二級的select上元素需要顯示該省下面所有的市以供選擇卑吭。當我選擇一個市時，在第三級的select元素上需要顯示對應市下面所有的縣以供選擇马绝。
一般做法
循環(huán)方式豆赏，當選中一個省時的示例代碼如下：
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;
}
當選中一個市時，獲取市下面所有縣的代碼與上面的代碼類似富稻。
用 Object 做索引
首先需要創(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]);
}
索引完成后，檢索就容易了椭赋，并且效率會非常之高：
function getCityByProvinceId(province_id){
return cityByProvinceId["_"+province_id];
}
選擇市時對縣的處理方式抚岗，與選擇省時對市的處理方式完全相同，在此不再贅述哪怔。
總結(jié)
在Web前端宣蔚，需要用到快速檢索的地方向抢，用 Object 做索引的方式來完成是一個非常好的方案。首先胚委，Object 中屬性的檢索效率是由JavaScript引擎優(yōu)化過的挟鸠，值得信賴。其次亩冬，沒有復雜的算法和邏輯艘希，代碼清晰易讀。即提高了效率又簡化了代碼硅急，何樂而不為呢覆享。
