常用数据处理Api
# 常用数据处理Api
# 1.Js对象数组求和
const Arr = [
{ id: '2', zj: '东升镇', rhpwk: '6134' },
{ id: '3', zj: '东凤镇', rhpwk: '5810' },
{ id: '1', zj: '三角镇', rhpwk: '4038' }
]
const sums = Arr.reduce((pre, cur) => {
return pre + Number(cur.rhpwk)
}, 0)
console.log(sums)
// 15982
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.按照数组对象的某一个属性，升序或者降序排序
const Arr = [
{ id: '2', zj: '东升镇', rhpwk: '6134' },
{ id: '3', zj: '东凤镇', rhpwk: '5810' },
{ id: '1', zj: '三角镇', rhpwk: '4038' }
]
// 根据id升序列排序
const Arr1Sort = Arr.sort((a, b) => {
return a.id > b.id ? 1 : -1
})
console.log(Arr1Sort)
// [
// {id: '1', zj: '三角镇', rhpwk: '4038'}
// {id: '2', zj: '东升镇', rhpwk: '6134'}
// {id: '3', zj: '东凤镇', rhpwk: '5810'}
// ]
import { OrderBy2 } from '@/myutils'
// 数组对象，从大到小排序
export function OrderBy2 (arr, type) {
const newArrs = arr.sort((a, b) => {
return a[type] < b[type] ? 1 : -1
})
return newArrs
}
// 按照最大值，从大到小排序
const newArr = OrderBy2(currentArr, 'pfksl')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
扩展1：按照时间段如何排序
- 注意：此处时间数组中时间，必须为字符串
const maxTime = ['2021-4-2', '2021-4-1', '2021-4-6']
const newTime = maxTime.sort((a, b) => {
return new Date(b.replace('/-/g', '/')).getTime() - new Date(a.replace('/-/g', '/')).getTime()
})
console.log(newTime)
// ['2021-4-6', '2021-4-2', '2021-4-1']
1
2
3
4
5
6
2
3
4
5
6
扩展2：对时间排序时，超出10的字符串不能 排序
- 解决：将字符串转parseInt比较
// 从一月开始排序
// 根据yf时间升序列排序
const res2 = res.sort((a, b) => {
return parseInt(a.yf.split('-')[1]) > parseInt(b.yf.split('-')[1]) ? 1 : -1
})
1
2
3
4
5
2
3
4
5
# 3.前端实现输入框，搜索值
const CarArr = ["豫K32282", "豫K32289"]
// 输入框的值this.value与车牌数组里面的车牌字符串相等
const value = '82'
const newArr = CarArr.filter(item => item.indexOf(value) > -1)
console.log(newArr)
// ['豫K32282']
1
2
3
4
5
6
2
3
4
5
6
# 4.封装接口，不传参数的处理
async PromiseOneB (boid, param2, param3, param4 = null) {
const res = await this.$http.zhongshanApi4(boid, {
param1: this.wasteTypeLeft,
param2: param2,
param3: param3,
pram4: param4
})
return res
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 5.将数组对象转为对象
const AllCityArr = [
{
type: '澳门',
roadPoint: '1'
},
{
type: '珠海市',
roadPoint: '2'
}
]
// 转为：
const Result = {
澳门: '/asserts-allcity-overview/common/green.png',
珠海市: '/asserts-allcity-overview/common/green.png',
}
// 法一：左边是key,右边是值
const list1 = {}
AllCityArr.map(({ type }) => {
list1[type] = '/asserts-allcity-overview/common/green.png'
})
// console.log(list1)
// 法二：for in
const newObj ={}
for (const key in AllCityArr) {
newObj[AllCityArr[key].type] = '/asserts-allcity-overview/common/green.png'
}
// console.log(newObj)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 6.数组去重
// 数组去重
const Arr = [
{ id: '2', zj: '东升镇', rhpwk: '6134' },
{ id: '3', zj: '东凤镇', rhpwk: '5810' },
{ id: '1', zj: '三角镇', rhpwk: '4038' },
{ id: '1', zj: '三角镇', rhpwk: '4038' }
]
uniqueObj (arr, type) {
const res = new Map()
return arr.filter((a) => !res.has(a[type]) && res.set(a[type], 1))
}
console.log(uniqueObj(Arr, 'zj'))
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 7.对数组对象随机排序
var arr = [
{name: '头不动', id: '1'},
{name: '2', id: '2'},
{name: '不动', id: '3'},
{name: '4', id: '4'},
{name: '5', id: '5'},
{name: '尾巴不动', id: '6'
}]
const randomSort = (arr) => {
let i = arr.length
while (i) {
let j = Math.floor(Math.random() * i--);
[arr[j], arr[i]] = [arr[i], arr[j]]
}
return arr
}
console.log(randomSort(arr))
// [
// {name: '头不动', id: '1'},
// {name: '5', id: '5'},
// {name: '2', id: '2'},
// {name: '4', id: '4'},
// {name: '不动', id: '3'},
// {name: '尾巴不动', id: '6'}
// ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 8.将月份数字字符串，转为汉字月份
d.xAxis.data = ['2020-10', '2020-11', '2020-12', '2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9']
// 定义月份
const arr = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
d.xAxis.data = d.xAxis.data.map((item) => this.toMonthChinese(arr, item.split('-')[1]))
d.xAxis.data = d.xAxis.data.map((item) => item.split('-')[1])
// 将数字月转为汉字月
toMonthChinese (arr, nums) {
const newMonth = arr[parseInt(nums, 10) - 1] + '月'
// console.log(newMonth, 'newMonth111')
return newMonth
}
console.log(d.xAxis.data)
// ['十月', '十一月', '十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月']
// [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月','十月', '十一月', '十二月']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 9.将接口数据转为数组对象中的数组对象
- 场景：带下拉框控制图标的变化
const res = [
{
dw: "us/cm"
gsmc: "中山市宝来电子有限公司"
hylx: "纺织"
id: "3"
jcbz: "1200"
jcsj: "2021-3-15 09:00:00"
jcz: "125"
pwlx: "固体"
tyshxydm: "etet356916gf6d54g16"
yzmc: "氨氮"
},
{
dw: "us/cm"
gsmc: "中山市利龙科贸有限公司"
hylx: "印刷"
id: "6"
jcbz: "1200"
jcsj: "2021-3-15 09:00:00"
jcz: "125"
pwlx: "废水"
tyshxydm: "etet3569sfdg13"
yzmc: "PH"
},
{
dw: "us/cm"
gsmc: "中山市科创电子制造有限公司"
hylx: "印刷"
id: "1"
jcbz: "1200"
jcsj: "2021-3-15 09:00:00"
jcz: "125"
pwlx: "废水"
tyshxydm: "etet3569fds11x651"
yzmc: "PH"
},
{
dw: "us/cm"
gsmc: "中山市显顺塑料扣具有限公司"
hylx: "计算机制造"
id: "2"
jcbz: "1200"
jcsj: "2021-3-15 09:00:00"
jcz: "125"
pwlx: "废气"
tyshxydm: "etet35691g4s1f65x1v"
yzmc: "电导率"
}
]
// 通过pwlx，分类下拉框的键值对
const a = {}
res.map(val => {
const { pwlx } = val
if (!a[pwlx]) {
a[pwlx] = []
}
a[pwlx].push(val)
})
console.log(a, 'aaa')
const b = []
for (const i in a) {
b.push({
label: i,
data: [
{
// id: a[i][0].id,
id: 1632216583642,
rows: a[i].map((item) => ({
x: item.jcsj,
type: '',
unit: '',
value: item.jcz
}))
}
]
})
}
this.mock = b
this.curTab = b[0]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# 10.js去除%
// 97%
const newStr = result.datarow[0].jsydwrdkaqlyl.replace(/%/g, '')
console.log(newStr, 555)
// 97
1
2
3
4
2
3
4
# 11.通过数组对象，通过接口数据和下拉框属性，返回键值对数据
// 获取下拉框，以及对应值的数组
const objkeyArr = this.toKeyArr(res.datarow, 'pwlx')
// 通过res返回值，获取下拉框的属性labelProps，获取对应的对象，键值对数组
toKeyArr (res, labelProps) {
const a = {}
res.map((item) => {
if (!a[item[labelProps]]) {
a[item[labelProps]] = []
}
a[item[labelProps]].push(item)
})
return a
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 12.通过键值对，赋值改卡片内容
const mockArr = this.KeytoMock(objkeyArr, 1632278106152, 'jcsj', 'jcz')
// 通过得到的键值对，转换为mock需要的数据
KeytoMock (a, ids, xs, values) {
const b = []
for (const i in a) {
b.push({
label: i,
data: [
{
// id: a[i][0].id,
id: ids,
rows: a[i].map((item) => ({
x: item[xs],
type: '',
unit: '',
value: item[values]
}))
}
]
})
}
return b
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 13.通过数组对象，求对象属性的最大值
import { MaxValue } from '@/myutils'
const Max = MaxValue(currentArr, 'pfksl')
// 求数据对象的最大值
export function MaxValue (arr, type) {
return Math.max.apply(Math, arr.map((item) => { return item[type] }))
}
1
2
3
4
5
6
2
3
4
5
6
# 14.接口封装提效
- 对象的key，可以是全称，也可以是字符串
const obj = {
'危废(不含医废)': 'ioc_pa_sthb_frelswm_gzwfcssl',
医疗废物: 'ioc_pa_sthb_frelswm_gzqylfwcsl',
一般工业固废: 'ioc_pa_sthb_frelswm_gzqybgygfcsl',
生活垃圾: 'ioc_pa_sthb_frelswm_shljcsl',
市政污泥: 'ioc_pa_sthb_frelswm_gwsclcszwncsl',
建筑垃圾: 'ioc_pa_sthb_frelswm_gzqjzljcsl'
}
const res = await myFetch.zhongshanApi(obj[this.curTab.label])
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9