前端数据处理

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简介，前端和爬虫通过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)

②排序的方法网上有挺多，我就不多哔哔了，排序用的是改良版的冒泡排序，具体方法如下：
算法文章推荐(我只会冒泡和选择排序，所有选了个喜欢的)

//冒泡排序算法
//方法需要传入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
}