来自后端的数据处理

　　前端的工作除了要处理一些页面的排布和效果外，还有一个也是近年来最需要前端做的，就是与后端的交互，就是要处理来自后端的数据。

　　今天来说一下数据的处理。说数据处理之前，先说一下几个js的原生js方法。

　　1.m    array1.map(callbackfn[, thisArg]) ,对数组的每个元素调用定义的回调函数并返回结果的数组。

　2.filter
　　 该filter()方法创建一个新的匹配过滤条件的数组

 3、new Date（）
    函数中如果没有传入参数，就默认为当前的时间  ，这是每个玩过js的同学都会知道的，如果要创建一个自定义的时间对象，可以传入一些参数，
   但这个参数必须是以毫秒数的时间参数，（UTC时间1970年1月1日午夜起至自定义时间为止的毫秒数）。可以用Date.parse()和Date.UTC()来获得自定义时间的毫秒数。
　　看下面的截图，便知分晓。
     
    注意，如果是直接向new Date（），传入一个时间参数，月份就是从1开始计算，默认调用了Date.parse的方法，如果，要使用Date.utc的方法，月份就是0开始，其他的跟平常我们见到的
   时间参数一样。下面就是这个霸道的new Date()的“霸道之处”，能够自己处理好里面的字符串，显示都是对的，如图： 

        
  好了，切入正题，接下来就是数据的处理了。因为我们这次采用了EchartJs这个图表库，因此我们需要对它进行传入参数，这个参数就是我们从后端获取的数据。
 我们一般用ajax获取数据，比如这样: 
  $.get("data.php",{data},function(result){
　　。。。。
  });通过ajax获取，然后回调函数获得返回值，这里的result的就是请求data.php的一个返回值，假设我们这里的result的是这样数组，

  ["1992-03-16", "1992-11-10", "1994-04-29", "1991-06-20", "1995-06-16", "1994-09-22", "1996-02-18", "1985-12-02", "1989-06-01", "1981-11-30", "1990-01-30", false, "1995-10-11", "1991-01-31", 
"1992-09-09", "1988-02-29", "1987-02-12", "1994-11-11", "1991-03-08", "1994-07-19", "1995-02-11", "1985-11-02", "1990-09-12", "1991-10-02", "1983-06-30", "1989-11-18", "1994-11-10",
 "1977-08-18",
 "1991-01-06"]
 嗯 就是这样的一个数据。这里是一些人的出生年龄，现在我们需要把这些人的年龄进行分类。所以就需要我们对这些数据进行处理，好了，怎么处理呢，怎么按照把年龄进行分类的呢？看下文：

            var a =0,b=0,c=0,d=0,e=0,f=0;
            for(var i=0;i<result.length;i++) {
                var getAgeArr = getAge(result[i]);
                if(getAgeArr<20){
                    a++;
                }else if(getAgeArr<30&&getAgeArr>20) {
                    b++;
                }else if(getAgeArr<40&&getAgeArr>30) {
                    c++;
                }else if(getAgeArr<50&&getAgeArr>40) {
                    d++;
                }else if(getAgeArr<60&&getAgeArr>50) {
                    e++;
                }else if(getAgeArr>60) {
                    f++;
                }else if(getAgeArr==undefined) {
                    continue;
                }
             }   

　　　　　　　　function getAge(birthday){
　　　　　　　　　　if(birthday==false) {
　　　　　　　　　　　　　　return;
　　　　　　　　　　}else {
　　　　　　　　　　　　　var newDate = (new Date()-new Date(birthday))/1000/3600/24/365;
　　　　　　　　　　}
　　　　　　　　　　return newDate;
　　　　　　　　};

  　　原理简单，就是循环result的数组，然后对个循环的元素进行处理，调用getAge的方法，getAge方法里面有个new Date()的方法，就是我们最之前讲的话题，然后获取每个元素的年龄，再进行判断，如果是第一种情况就a++，第二种情况就b++,...，最后就获取到了所有年龄区间的数据，a，b，c，d，e，f就是我们最后需要的数据，然后就是我们前端处理数据。比如我们现在调用echart的数据接口，就是传入这样的一个数组[a,b,c,d,e,f]。当然，还有一些自带的原生js的方法，比如这样：

       

getAge:function(birthday){

        var ageArray = new Array(),rangData;

        if(birthday==false) {

            return false;

        }else {
            rangData = birthday.map(function(val){
   　　　　　　//val 是数组的每个元素
                return (new Date()-new Date(val))/1000/3600/24/365;
            });
            ageArray=[
            rangData.filter(function(val){
                return val<20;
            }).length,
            rangData.filter(function(val){
                return val>=20 && val<30;
            }).length,
            rangData.filter(function(val){
                return val>=30 && val<40;
            }).length,
            rangData.filter(function(val){
                return val>=40 && val<50;
            }).length,
            rangData.filter(function(val){
                return val>=60;
            }).length
            ]

        }

        return  ageArray;
    }

　　这个方法就是直接传入我们的数组，然后用上map的方法，也即是我们之前写的map的方法，自带循环方法，然后对每个元素进行自定义函数处理，然后我们需要的数据。

也就是我们需要的年龄数组；有了我们需要的年龄数组，再就是对这个年龄数组，分类处理，就用到了fliter的方法，过滤数组的元素，其原理跟for循环中的if else的判断是一样的。好了，我们需要的数据有了，接下来就是将数组塞进接口了。

   结束语：看看为啥这样处理数组，主要是需要什么样就处理什么样的，没有固定的样子，下面的图就是，echart的图表：

                       

每日一句：坚持只是为了梦想。

翻译： JUST TO DREAM.

 

如有不妥，敬请批评！