我们先举一个数据例子 以及 最后我们要操作的数据
// 简单的操作数据
let date = ['2023-10','2023-1','2013-8','2023-7'];
// 最终要排序的数据
let dateFinal = {
"2023-10-31": 3366,
"2023-2-28": 2452,
"2023-7-31": 4560,
"2023-9-30": 8674,
"2023-8-31": 3268,
"2023-11-6": 9875,
}
// 要求-排序并将日期和数据对应上
// 二渲染图表需要的格式
- 对于这个问题我的解决思路是取出月份进行对比 再一一拼接年份,这样就能很快实现
// 简单的操作数据
let date = ['2023-10','2023-1','2013-8','2023-7'];
// 对 arr-循环遍历 取出每一个月份
let arr = date.map((item)=>{
// item (每一项的数据)
// 先获取 '-' 的所在位置(索引) 通过 indexOf 可以获得
item.indexOf('-');
// 知道了'-' 所在的位置,就很方便截取到月份了
// "2023-10" 这个格式直接使用 slice 截取
// slice 他有两个参数,(start 起始位置 end 结束位置) 表示从哪里截取和截取到哪里
// 第二个参数不传,默认截取到最后一位
// 所以 可以这样写 item.slice(item.indexOf('-'));
// 注意-由于 slice 截取的机制 他的起始位置是包含在被截取字段里面的
// 2 0 2 3 - 1 0 //字符串 也就是indexOf('-')== 4
// 0 1 2 3 4 5 6// 索引 从4截取包含4 就会截取到 - 1 0
// 因此需要 +1 将'-'排除在外 // 意思是从 5开始截取 取到 1 0
// item.slice(item.indexOf('-')+1);// '10','1'...
// 在加上一道计算 将字符串转换为 数字类型 // 并return 将数据返回
return item.slice(item.indexOf('-')+1) *1;// 这道计算 *1 或者 加 减0 都可以 这个是 vue2弱类型可以隐式转换数据类型的原因
})
console.log(arr);// 这是打印出来的数据 ['10','1','8','7']
// 知识补充
// map 方法会将 return 的数据存在数组里
- 上面的操作结束之后就已经有了可以进行比较的数据了
- 对于 月份这样的数字类型数据 我选择水桶排序来排顺序
// 他们都被转换为了数据类型,且值是唯一的,需要的也是唯一值
// 水桶排序就是将提取出来的数字作为数组的索引,并进行赋值( 我用一般是传true,只要是给当前索引有值都可以 ),赋值结束再进行循环
// 如果遍历的 子项有值 就返回他的索引( 索引 是我们之前取到的值 ),没有值不做处理,这样就能很轻松的得到排好顺序的数据
// 且是唯一值
let arr2 = [];// 声明一个空值用来存放数据
arr.forEach((item)=>{
arr2[item] = true // 为索引为 item 的数据赋值为 true
});// 得到结果为0: ,1:true ,2: ,3: ,4...7:true,8:true...
// 对取出的数据进行循环 比较/取值
arr2.map((item,index)=>{
if(item){// 如果这一项数据为true 就将它的索引返回出去
return index
}
});// 可以得到数据为 [1,7,8,10] 也可以再加工一下
let arr3 = arr2.map((item,index)=>{
if(item){
return `2023-${index}`
}
})// 加上月份我们就能得到完整的数据了!! 2023-1...
