1. 程式人生 > >原生JS實現的JSON陣列排序,關鍵字錨點跳轉到指定內容區

原生JS實現的JSON陣列排序,關鍵字錨點跳轉到指定內容區

  1. 原生JS實現的仿點選錨點對應模組跳轉到指定的位置,錨點關鍵字從模組中取出,去除重複值按照由大到小的順序排序
  2. //JSON陣列按指定值進行排序排序,name:排序規則
  3.         function jsonSort(jsonarr,name,snum){
  4.             //如果陣列<=1,則直接返回
  5.             if(jsonarr.length<=1){return jsonarr;}
  6.             var pivotIndex=Math.floor(jsonarr.length/2);
  7.             //找基準,並把基準從原陣列刪除
  8.             var pivot=jsonarr.splice(pivotIndex,1)[0];
  9.             var middleNum=pivot[name];
  10.             // 定義左右陣列
  11.             var leftArr=[];
  12.             var rightArr=[];
  13.             //比基準小的放在left,比基準大的放在right
  14.             if(snum){
  15.                 for(var i=0;i<jsonarr.length;i++){
  16.                     if(Number(jsonarr[i][name])<=Number(middleNum) ){
  17.                         leftArr.push(jsonarr[i]);
  18.                     }else{
  19.                         rightArr.push(jsonarr[i]);
  20.                     }
  21.                 }
  22.             }else{
  23.                 for(var i=0;i<jsonarr.length;i++){
  24.                     if(jsonarr[i][name]<=middleNum){
  25.                         leftArr.push(jsonarr[i]);
  26.                     }else{
  27.                         rightArr.push(jsonarr[i]);
  28.                     }
  29.                 }
  30.             }
  31.             //遞迴,返回所需陣列,從大到小的順序排列
  32.             return jsonSort(rightArr,name,snum).concat([pivot],jsonSort(leftArr,name,snum));
  33.         }
  34.         function Id(id){
  35.             return document.getElementById(id);
  36.         }
  37.         //載入列表資料
  38.         function getData(ListData){
  39.             var detailbox = Id("detailbox");
  40.             var detailHtml = "";
  41.             var dataM = []; //存放當前年月的值
  42.             for(var i=0;i<ListData.length;i++){
  43.                 //ListData[i].expiry.substr(0,7)取出年月,對指定字串從0開始取出7個字元
  44.                 detailHtml+="<li id='"+ListData[i].id+"' data-month='"+ListData[i].datatime.substr(0,7)+"'>"+
  45.                         "<div>"+
  46.                         "<h3>"+ListData[i].detail+"</h3>"+
  47.                         "<p>"+ListData[i].datatime+"</p>"+
  48.                         "</div>"+
  49.                         "</li>";
  50.                 detailbox.innerHTML = detailHtml;
  51.                 dataM.push(ListData[i].datatime.substr(0,7));
  52.             }
  53.             var monthArr = unique(dataM);
  54.             getTimeline(monthArr);
  55.         }
  56.         //陣列去重
  57.         function unique(arr) {
  58.             var result = [], hash = {};
  59.             for (var i = 0, elem; (elem = arr[i]) != null; i++) {
  60.                 if (!hash[elem]) {
  61.                     result.push(elem);
  62.                     hash[elem] = true;
  63.                 }
  64.             }
  65.             return result;
  66.         }
  67.         //載入時間線資料
  68.         function getTimeline(timedata){
  69.             var timeline = Id("timeline");
  70.             var timeHtml="";
  71.             for(var i=0;i<timedata.length;i++){
  72.                 timeHtml+="<li><a href='javascript:;'>"+timedata[i]+"</a></li>";
  73.                 timeline.innerHTML = timeHtml;
  74.             }
  75.         }
  76.         //獲取時間線的值
  77.         function gotoDetail(){
  78.             var timeUl = Id("timeline");
  79.             timeUl.onclick = function(ev){
  80.                 var ev = ev || window.event;
  81.                 var target = ev.target || ev.srcElement;
  82.                 if(target.nodeName.toLowerCase() == 'a'){
  83.                     var timeText = target.innerHTML;
  84.                     getDMonth(timeText);
  85.                 }
  86.             }
  87.         }
  88.         //點選時間線,頁面將跳轉到指定的內容
  89.         function getDMonth(timeText){
  90.             var dmonthArr = [];
  91.             var detailLisArr = [];
  92.             var detailbox = Id("detailbox");
  93.             var detailLis=detailbox.getElementsByTagName("li");
  94.             for (var i=0; i< detailLis.length;i++){
  95.                 if(detailLis[i].getAttribute("data-month")==timeText){
  96.                     detailLisArr.push(detailLis[i]);
  97.                 }
  98.             }         
  99.             document.documentElement.scrollTop = document.body.scrollTop = detailLisArr[0].offsetTop;
  100.         }
  101. window.onload = function(){
  102.             var ListData=[
  103.                 {"id":"1","detail":"JS Array.reverse 將陣列元素顛倒順序","datatime":"2018-01-12 15:20"},
  104.                 {"id":"2","detail":"js for迴圈倒序輸出陣列元素","datatime":"2018-01-26 9:10"},
  105.                 {"id":"3","detail":"使用js實現陣列逆序","datatime":"2018-01-05 11:20"},
  106.                 {"id":"4","detail":"js中陣列的排序","datatime":"2017-10-02 8:20"},
  107.                 {"id":"5","detail":"js中陣列的sort()方法用法,引數以及排序原理","datatime":"2017-10-19 15:45"},
  108.                 {"id":"6","detail":"Javascript 陣列迴圈遍歷之forEach","datatime":"2017-10-23 15:32"},
  109.                 {"id":"7","detail":"js陣列的sort排序詳解","datatime":"2016-09-14 15:20"},
  110.                 {"id":"8","detail":"Js陣列排序函式sort()介紹","datatime":"2016-09-30 15:20"},
  111.                 {"id":"9","detail":"JVM啟動引數的類別及使用","datatime":"2016-06-29 15:12"},
  112.                 {"id":"10","detail":"2018年,該轉行AI工程師嗎","datatime":"2015-12-24 15:20"},
  113.                 {"id":"11","detail":"vue: WebStorm設定快速編譯執行","datatime":"2017-12-12 11:20"},
  114.                 {"id":"12","detail":"程式設計到底難在哪裡?","datatime":"2015-12-09 10:20"},
  115.                 {"id":"13","detail":"android跨程序通訊(IPC):使用AIDL","datatime":"2017-12-05 12:30"},
  116.                 {"id":"14","detail":"想精通 Python 資料探勘?清華博士帶你入門!","datatime":"2016-06-12 09:00"},
  117.                 {"id":"15","detail":"大齡程式設計師都去哪了?","datatime":"2015-07-13 22:15"}
  118.             ];
  119. //按照日期返回的排序陣列
  120.             var arrListData = jsonSort(ListData,"datatime",false);
  121.             getData(arrListData);
  122.             gotoDetail();
  123.         }
  124. <!--HTML -->
  125. <div class="box_l">
  126.     <ul id="detailbox">
  127.         <li data-month="2017-5">
  128.             <div>
  129.                 <h3></h3>
  130.                 <p></p>
  131.             </div>
  132.         </li>
  133.     </ul>
  134. </div>
  135. <div class="box_r">
  136.     <ul id="timeline">
  137.         <li><a href="javascript:;"></a></li>
  138.     </ul>
  139. </div>
  140. <!--效果-->