Object方法实践之对象数组转化
Object实践：使用Object.keys()和 Object.values()方法；对象数据值的累加统计；获取或检验对象的键或值。（Md5或sha256）
·
一，常用的Object方法有：
Object.assign()
Object.entries()
Object.keys()
Object.values()
1.应用场景：将一个对象的属性和变量变成一个json对象数组
let timeList= [{10%:"10",50%:"50",90%:"90",95%:"95",99%:"99"}]
实践：使用Object.entries()方法
warnByserviceCode =Object.entries(timeList[0]).map((item,index) => {
return {
name:item[0],
value:item[1],
};
});
this.stageTimeList=warnByserviceCode;//耗时
console.log(this.stageTimeList);
效果：
//print：
[
{name:10%,value:10},
{name:50%,value:50},
{name:90%,value:90}
{name:95%,value:95}
]
2.应用场景：复制表单对象属性到新对象
实践：使用Object.assign()方法
editForm:{
enable: "1",
id: 626,
weight: 8,
}
let submitData = Object.assign({}, this.editForm);
//print：
{
enable: "1",
id: 626,
weight: 8,
}
3.应用场景：获取或检验对象的键或值
实践：使用Object.keys()和 Object.values()方法
检测获取对象参数中指定键，或检测指定值的类型（Md5或sha256）。
let testMd5={uuid:"22a921e9f7b142a7890588ab2c699678",certCode:"42c97064ead04b109d03627b855f6ce4",reset:"reset256"}
this.testParam(testMd5);
let sha256={certCode:"83e369c7c2e9c0afee6f754505da85e128545ede909608ee33f3431dac7266dc"}
this.testParam(sha256);
testParam
testParam(param) {
let paramObj = param;
let md5Pattern = /[0-9a-fA-F]{32}/;
let sha256Pattern = /[0-9a-fA-F]{64}/;
for (let k of Object.keys(paramObj)) {
if (k != "uuid") {
let value = paramObj[k];
if (sha256Pattern.test(value)) {
console.log("test-sha256Pattern");
} else {
if (md5Pattern.test(value)) {
console.log("test-md5Pattern");
}
}
}
if (k == "uuid") {
console.log("test-uuid",paramObj[k]);
}
}
for (let val of Object.values(paramObj)) {
if (val == "reset256") {
console.log("test-val",val);
}
}
},
//test-uuid 22a921e9f7b142a7890588ab2c699678
//test-val reset256
//test-md5Pattern
//test-sha256Pattern
二，其他Object方法有：
Object.is()：判断两值是否相同
Object.freeze()：冻结对象，不可增删改查
Object.defineProperty()：定义修改对象属性
Object.defineProperties()： 定义修改对象多个属性
Object.is(a,b) //true或false
三，其他Object实践：
1.应用场景：判断对象是否相同
实践：Object.keys+some
objEqual(obj1, obj2){
const keysArr1 = Object.keys(obj1)
const keysArr2 = Object.keys(obj2)
if (keysArr1.length !== keysArr2.length) return false
else if (keysArr1.length === 0 && keysArr2.length === 0) return true
/* eslint-disable-next-line */
else return !keysArr1.some(key => obj1[key] != obj2[key])
}
//test
let obj1={name:"set",count:"100"};
let obj2={name:"set",count:"100"};
let der= this.objEqual(obj1, obj2);
console.log("test",der); //true
2.应用场景：通过类型筛选接口，select下拉反显数据
ChannelId关联下拉接口数据的id,反显所关联的name。
实践：find+channeObj 反显关联数据
<FormItem label="名称：" prop="newData">
<Select
v-model="editForms.newData"
filterable
@on-change="handleToChannel"
>
<Option
v-for="item in selChannelListByType"
:key="item.id"
:value="item.id"
>{{ item.name }}</Option
>
</Select>
</FormItem>
handleToChannel(value) {
let channeObj = this.selChannelListByType.find(item => {
return item.id == value;
});
if (channeObj) {
this.updateChannelName = channeObj.name;
}
},
3.应用场景：遍历对象，通过键或值过滤筛选统计数据，渲染图表。
实践：数据累计（同属性对象数据值的累加统计）
changeTableData(data) {
let totalObj = {};
let tableArr = [];
data.forEach((item) => {
if (!totalObj[item.channelCode]) {
totalObj[item.channelCode] = {
children: [],
channelName: item.channelName,
successCount: item.successCount,
failCount: item.failCount,
timeOutCount: item.timeOutCount,
date: "-",
};
}
totalObj[item.channelCode].children.push(item);
totalObj[item.channelCode].successCount += item.successCount;
totalObj[item.channelCode].failCount += item.failCount;
totalObj[item.channelCode].timeOutCount += item.timeOutCount;
});
for (let key in totalObj) {
tableArr.push(totalObj[key]);
}
this.tableData = tableArr;
},
实践：成功比例数据（同属性对象数据值的累加统计）
setChartData (data) {
if (data.length) {
let chartObj = {}
let successTotal = 0
let failTotal = 0
let unknowTotal = 0
data.forEach(item => {
if (!chartObj[item.channelType]) { /* 按类型聚合数据 */
chartObj[item.channelType] = {
success: 0,
fail: 0,
unknow: 0
}
}
chartObj[item.channelType].success += item.successCount
chartObj[item.channelType].fail += item.noFeeCount
chartObj[item.channelType].unknow += item.timeOut
successTotal += item.successCount
failTotal += item.noFeeCount
unknowTotal += item.timeOut
})
for (let key in chartObj) {
let obj = chartObj[key]
obj.total = obj.success + obj.fail
}
chartObj.channelTotal = {
success: successTotal,
fail: failTotal,
unknow: unknowTotal,
total: successTotal + failTotal
}
this.chartData = chartObj// 成功比例数据
} else {
this.chartData = {
channelTotal: {success: 0, fail: 0, unknow: 0, total: 0}
}
}
},
实践：通过筛选条件（isNoquery）获取调用量top排名（同属性对象数据值的累加统计）
setChartData(data){
let arr = []
if(data.length){
let chartData = {}
data.forEach(item => {
if(this.isNoquery!=null&&this.isNoquery!=""&&this.isNoquery){
if(!chartData[item.appId]){ /* 按userName聚合数据 */
chartData[item.appId] = {
success: 0,
fail: 0,
unknow: 0
}
}
chartData[item.appId].success += item.successCount
chartData[item.appId].fail += item.noFeeCount
chartData[item.appId].unknow += item.timeOut
}else if(this.isNoquery==null||this.isNoquery==""){
if(!chartData[item.userName]){ /* 按userName聚合数据 */
chartData[item.userName] = {
success: 0,
fail: 0,
unknow: 0
}
}
chartData[item.userName].success += item.successCount
chartData[item.userName].fail += item.noFeeCount
chartData[item.userName].unknow += item.timeOut
}
})
for(let key in chartData){
let obj = chartData[key]
obj.total = obj.success + obj.fail
obj.successRate = Number((obj.success * 100/obj.total).toFixed(2)
if(this.isNoquery==null||this.isNoquery==""||this.isNoquery.length==0){
this.userNameList.forEach((item)=>{
if(key==item.userName){
obj.name=item.companyName
}
})
}else if(this.isNoquery!=null&&this.isNoquery!=""){
this.appNameList.forEach((item)=>{
if(key==item.appId){
obj.name=item.appName
}
})
}
arr.push(obj)
}
arr = arr.map(item => ({
name: item.name,
value: item.total,
success: item.success,
successRate: item.successRate
}))
arr.sort((item1, item2) => {
return item1.value > item2.value ? -1 : 1
})
}
this.chartObj.setOption({
series: [{
name: '销量',
type: 'bar',
data: arr
}]
})//渲染图表
},
简单使用，总结至此，便于下次多次重复使用，欢迎各位工友交流学习。
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)