前端数据处理 - 好文

"any application that can be written in JavaScript, will eventually be written
in JavaScript" -- by Jeff Atwood

事情的起因是这样的，业务中有一个详情比价页面，需要爬虫抓取数据传给前端展示给用户，因为爬虫抓取数据是需要一定的时间的，以往的作法是做ajax的简单的长轮询，每隔2秒就请求一次

后台JAVA的接口，请求6次，最终显示的是第六次的结果。JAVA后台负责接收前端请求，推动python后台爬虫，接收爬虫数据并排序整理，返回给前端接口。此方案效果非常不好，用时久，数据可靠性低

等问题一直阴魂不散。所以才有了这次的推送改版。这次推送改版的方案主要改动是不用ajax进行请求了，新增了一个MQTT通讯服务器。（MQTT简介https://github.com/mcxiaoke/mqtt），前端和爬虫通过MQTT服务器进行通讯，前端做数的排序

整理。我认为对于前端来说本质上是使用webSocket进行了通讯，只不过是套上了MQTT的外衣。对于前端来说，需要做简单的数据处理，例如排序，查重等，非常好！

①背景介绍完毕，前端用什么进行排序或者说查重呢？当然是Js啦（☺），先说去重吧，去重我是跟后台JAVA的哥们聊天得到的启发，要用到es6的Set集合,具体方法如下：
//array表示需要去重的原数组，param表示去重的依据是数组中的一项的属性，info表示需要对比的属性
findSameInfo(array,param,info){
           let _this = this
           let result = true
           let checkSet = new Set()
           array.map((item)=>{
               checkSet.add(item[param])
           })
           let oldLen = checkSet.size
           checkSet.add(info[param])
           let newLen = checkSet.size
           if(oldLen == newLen){//说明加入set中集合有重复的数据源，所以size没变,数据重复
               result = false
           }
           return result
   },
使用方法如下：
假设要对比名字，价格，id,完全相同则为重复数据

let checkName = this.findSameInfo(checkArray,'name',info)
let checkPrice = this.findSameInfo(checkArray,'price',info)
let checkId = this.findSameInfo(checkArray,'id',info)
if(!checkName && !checkPrice && !checkId){
//数据重复,不执行下面的操作
return
}
checkArray.push(info)

②排序的方法网上有挺多，我就不多哔哔了，排序用的是改良版的冒泡排序，具体方法如下：

(算法文章推荐https://juejin.im/post/57dcd394a22b9d00610c5ec8，我只会冒泡和选择排序，所有选了个喜欢的)
//冒泡排序算法
//方法需要传入2个参数，第一个参数是需要排序的数组，第二个参数是排序的依据是数组中的一项的属性
       arrayBubbleSort(array,param){
           if(Object.prototype.toString.call(array).slice(8,-1) !==
'Array'){//若array不是数组则不执行之后的操作
               return
           }
           //原始冒泡排序
           // for (let j = 0; j < array.length - 1; j++) {
           //        // 这里要根据外层for循环的 j，逐渐减少内层 for循环的次数
           //        for (let i = 0; i < array.length - 1 - j; i++) {
           //            if (array[i][param] > array[i + 1][param]) {
           //                let temp = array[i];
           //                array[i] = array[i + 1];
           //                array[i + 1] = temp;
           //            }
           //        }
           // }

           //改进冒泡排序
           console.time(`冒泡排序耗时`)
           let i = array.length - 1//初始化
           let temp = null
           while(i>0){
               let pos = 0 //记录位置，记录位置之后的数据不需要交换位置
               for(let j =0;j<i;j++){
                   if(array[j][param] && array[j+1][param] &&
(array[j][param] > array[j+1][param])||array[j][param] == 0 || array[j][param]
== '' || array[j][param] == null || array[j][param] == 'null'){
                       pos = j //记录交换位置
                       temp = array[j]
                       array[j] = array[j+1]
                       array[j+1] = temp
                   }
               }
               i = pos //下一次排序更新位置
           }
           console.timeEnd(`冒泡排序耗时`)
           return array
       }

热门工具换一换