js方法--数据处理遇到的问题

1.将字符串分割---split()方法

用于把一个字符串分割成字符串数组;

例子：

"www.so.com:8:44.44|sg.yahoo.com:6:33.33|www.baidu.com:4:22.22"

//需要分割两次 分布用|与：分割

var sourceArr = sourceData.split('|')  ---["www.so.com:8:44.44", "sg.yahoo.com:6:33.33", "www.baidu.com:4:22.22"]

const newArr = []
for(var i = 0; i<sourceArr.length;i++){
   newArr.push(sourceArr[i].split(':'))
} 
//得到目标数组
newArr = [
    ["www.so.com", "8", "44.44"]
    ["sg.yahoo.com", "6", "33.33"]    
    ["www.baidu.com", "4", "22.22"]
]

this.setState({sourceWebData:newArr})

//遍历到表格中
<tbody>
   {sourceWebData.map(item => {
       return(
          <tr key={item[0]}>
             <td>{item[0]}</td>
             <td className="rText">{item[1]}</td>
             <td>{item[2] + '%'}</td>
          </tr>
        )
    })}
</tbody>

2.取出字符串特定的值，替换其中符号，数组中某一项值相同，另一个值累加--slice()方法、replace()方法

slice()方法用于切割字符串或数组，有两个参数---slice(start,end)

（1） start - 必填；设定新数组的起始位置；如果是负数，则表示从数组尾部开始算起（-1 
指最后一个元素，-2 指倒数第二个元素，以此类推）。
（2）end - 选填；设定新数组的结束位置；如果不填写该参数，默认到数组结尾；如果是负数，则表示从数组尾部开始算起（-1 指最后一个元素，-2 指倒数第二个元素，以此类推）。

replace()方法  该方法主要用于将字符串中符合匹配条件的字串替换成其他的字符串，返回替换后的字符串，且原字符串不变

var newStr = str.replace(regexp|substr, newSubStr|function)

参数1可以是正则表达式(regexp)或者字符串(substr)

• 如果参数1是字符串的话仅匹配一次。
• 如果参数1是正则表达式的话，全局标志g的情况下可以实现全局多次匹配，没有则匹配一次

 例子：

原始数据格式：{id: 283, detail_id: 2021082709, pv_count: "5", uv_count: "3", count_time: "2021-08-27 09:25:20"}

需要找出每一项的pv、uv、time放入新数组，其中time只需要年月日并替换格式为'2021/08/27'
并将相同日期的pv、uv数合并

方法：

//将需要的数据提取出来并改变格式
const arr = []
detailList.forEach(item=>{
 var data = {
   time: item.count_time.slice(0,10).replace(/-/g,'/'), //取出日期  转换为2021/08/23格式
   pv: item.pv_count,
   uv: item.uv_count,
 }
 arr.push(data)
})

//相同日期的pvuv数量相加
    var temp = {};
    for (var i in arr) {
      var key = arr[i].time; //判断依据
      if (temp[key]) {
        temp[key].time = arr[i].time;
        temp[key].pv  += parseInt(arr[i].pv);//相加值
        temp[key].uv  += parseInt(arr[i].uv);
      } else {
        temp[key] = {};
        temp[key].time = arr[i].time;
        temp[key].pv = parseInt(arr[i].pv);
        temp[key].uv = parseInt(arr[i].uv);
      }
    }
    var newArry = []; //放入新数组中
    for (var k in temp) {
      newArry.push(temp[k]);
    }

3.获得最近7天或30天每天的日期 ---moment（）方法

  得到数组作为echarts图表的横坐标

//dateNum = 7 或 30   得到数组作为echarts图表的横坐标
const dateArr= []
for(var i = 0 ;i<dateNum;i++){
     var a = moment().subtract(i, 'days').format('YYYY/MM/DD')
     dateArr.unshift(a)
}

将上方数据处理后得到echarts的值

首先根据横坐标天数的个数生成对应个数的数组 如果数据中有这一天的数据则放入，没有则为0

//生成一个每天数量为0的数组
var newArr =[]  
   dateArr.map(item=>{
      var a={
          name:item,
          value:0
    }
   newArr.push(a)
})

//遍历数组将相同日期的数据赋值
const seriesArry = []; 
for(var i= 0; i<newArr.length;i++){
    for(var j=0;j<detailArr.length;j++){  //detailArr为上方数据
        if(newArr[i].name==detailArr[j].time){
             newArr[i].value = detailArr[j][dataType]  //dataType 为另一个参数,pv or uv
        }
    }
    seriesArry.push(newArr[i].value)   // [0,0,3,5,68,163,9]
} 

函数返回两个值时

fn(){
   return{
      dateArr,
      seriesArry
    }
}

var a = this.fn()
console.log(a.dateArr)
console.log(a.seriesArry)