JS將陣列按格式補全
阿新 • • 發佈：2020-11-25
前言概述：
要求完成以下的目標：統計一週內的騎行距離，如果沒有騎行，顯示距離為零；
我們知道，很多時候資料庫都只記錄有內容的資料，沒有內容的資料是不會被記錄的，比如說某天沒有騎行，系統不會把當天騎行距離為零記錄到資料庫，這樣就產生個問題，前端頁面要顯示的資料格式如下 ↓↓↓
| 週一 | 週二 | 週三 | 週四 | 週五 | 週六 | 週日 | |
| 距離（km） | 20 | 0 | 22 | 25 | 0 | 0 | 40 |
但是從後端查詢到的資料卻是 ↓↓↓
| 週一 | 週三 | 週四 | 週日 | |
| 距離（km） | 20 | 22 | 25 | 40 |
辣麼，現在的問題就是，缺少了那部分距離為0的資料，頁面沒法正常顯示；這時候就需要我們重新組織資料了；
話不多說，直接上程式碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>示例</title> 6 </head> 7 <body> 8 <script> 9 //KEY模板 10 const template = [ "週一", "週二", "週三", "週四", "週五", "週六", "週日"]; 11 12 //後端返回的json 13 let list = [{ 14 "name":"週一","value" : 20 15 }, { 16 "name":"週三","value" : 22 17 }, { 18 "name":"週四","value" : 25 19 }, { 20 "name":"週日","value" : 40 21 }];22 23 //最終結果 24 let _list = []; 25 26 //迴圈模板，確保能夠按照模板的數量組織資料 27 for (var i = 0; i < template.length; i++) { 28 let k = template[i]; 29 30 //建立一個物件模型 31 let entity = {"name":"","value":0}; 32 33 //“倒序”迴圈已有的資料 34 for (let j = 0; j < i+1 ; j++) { 35 let item = list[j]; 36 if (item.name === k) { 37 //如果模板中的KEY跟當前物件的KEY一致，則新增該物件到空集合 38 _list.push(item); 39 list.splice(j,1);//從集合中刪除當前物件 40 }else{ 41 //如果模板中的KEY跟當前物件的KEY不一致，設定物件模型的KEY為模板的KEY，設定值為0，新增到空集合 42 entity.name = k; 43 entity.value = 0; 44 _list.push(entity); 45 } 46 break;//確保迴圈只進行一次 47 } 48 } 49 50 console.log(_list); 51 </script> 52 </body> 53 </html>
複製以上程式碼，儲存為HTML檔案；在瀏覽器開啟，檢視控制檯，可以看到我們想到的資料。