关于曲线组数据时候作用域问题

在组曲线的数据的时候出现了一个奇怪的问题

原始数据为

var rowData=[
  {name:'cr_1',data:11,date:1,year:2015},
  {name:'cr_2',data:10,date:1,year:2016},
  {name:'cr_2',data:12,date:1,year:2017},
  {name:'cr_3',data:17,date:1,year:2016},
  {name:'cr_3',data:1,date:1,year:2015},
]

需要得到的数据

result=[
  {
    name:"cr_1",
    type:"line",
    data:[
      2017:[12个月的数组],
      2016:[12个月的数组],
      2015:[12个月的数组]
    ]
  },{
    name:"cr_2",
    type:"line",
    data:[
      2017:[12个月的数组],
      2016:[12个月的数组],
      2015:[12个月的数组]
    ]
  },{
    name:"cr_3",
    type:"line",
    data:[
      2017:[12个月的数组],
      2016:[12个月的数组],
      2015:[12个月的数组]
    ]
  },
]
View Code

那么代码开始

window.onload=function(){
  yearArr=[2017,2016,2015]
  var newAry=[];
  for(var i=0;i<rowData.length;i++){
    var result=fun_inexst(newAry,rowData[i].name)
    if(result.flag){
      //替换
      var _date=rowData[i].date;
      var _year=rowData[i].year;
      newAry[result.index].data[_year][_date-1]=rowData[i].data;
    }else{
      //补空值
      var obj={};
      var arr=new Array(12);
      for(var m=0;m<12;m++){
        arr[m]="-";
      }
      for(var n=0;n<yearArr.length;n++){
        obj[yearArr[n]]=arr;
      }
      newAry.push({
        name:rowData[i].name,
        data:obj
      })
    }
  }
  console.log(newAry);
}
function fun_inexst(arr,name){
  var index=-1;
  var flag=false;
  for(var i=0;i<arr.length;i++){
    if(arr[i].name==name){
      flag=true;
      index=i
    }
  }
  return {
    flag:flag,
    index:index
  }
}
View Code

这样一来,从逻辑上看是没有问题的,但是最终组成的数据就不是我想要的数据,而且奇怪的,在替换“-”的时候,明明是替换2016年某一个月份的值,跑完代码之后就变成将2015.2016.2017三年都替换了,一直没有找到原因, 后来发现两个重要的错误问题,现总结

其一、作用域问题

  因为var 申明的变量 数组都已经提前了,后面所有的代码都是在重复操作之前的,

其二、逻辑问题,存在和不存在的时候都进行了替换,所以只需要进行判断需不需要进行补值就行了

下面是更改后的代码,已经测试

window.onload=function(){
  yearArr=[2017,2016,2015]
  var newAry=[];
  for(var i=0;i<rowData.length;i++){
    var result=fun_inexst(newAry,rowData[i].name)
    if(!result.flag){
      //补空值
      var obj={};
      var arr=new Array(12).join("-;");
      /*for(var m=0;m<12;m++){
        arr[m]="-";
      }*/
      for(var n=0;n<yearArr.length;n++){
        //obj[yearArr[n]]=arr;
        obj[yearArr[n]]=arr.split(";");
      }
      newAry.push({
        name:rowData[i].name,
        data:obj
      })
    }
    //替换
    var _date=rowData[i].date;
    var _year=rowData[i].year;
    if(result.index>-1){
        newAry[result.index].data[_year][_date-1]=rowData[i].data;
    }else{
      //说明是没有,找到最后一个元素进行补值
      newAry[newAry.length-1].data[_year][_date-1]=rowData[i].data;
    }
  }
  console.log(newAry);
}
function fun_inexst(arr,name){
  var index=-1;
  var flag=false;
  for(var i=0;i<arr.length;i++){
    if(arr[i].name==name){
      flag=true;
      index=i
    }
  }
  return {
    flag:flag,
    index:index
  }
}
原文地址:https://www.cnblogs.com/pengfei25/p/8068321.html