Object方法实践之对象数组转化

一，常用的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方法参考学习

三，其他Object实践：

1.应用场景：判断对象是否相同

实践：Object.keys+some


objEqual(obj1, obj2){const keysArr1 = Object.keys(obj1)const keysArr2 = Object.keys(obj2)if (keysArr1.length !== keysArr2.length) return falseelse 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"><Selectv-model="editForms.newData"filterable@on-change="handleToChannel"><Optionv-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 = 0let failTotal = 0let unknowTotal = 0data.forEach(item => {if (!chartObj[item.channelType]) { /* 按类型聚合数据 */chartObj[item.channelType] = {success: 0,fail: 0,unknow: 0}}chartObj[item.channelType].success += item.successCountchartObj[item.channelType].fail += item.noFeeCountchartObj[item.channelType].unknow += item.timeOutsuccessTotal += item.successCountfailTotal += item.noFeeCountunknowTotal += 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.successCountchartData[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.successCountchartData[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.failobj.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}]})//渲染图表},

简单使用，总结至此，便于下次多次重复使用，欢迎各位工友交流学习。

Object方法实践之对象数组转化相关推荐

jquery 取对象数组下标_JQuery使用index方法获取Jquery对象数组下标的方法
本文实例讲述了JQuery使用index方法获取Jquery对象数组下标的方法.分享给大家供大家参考.具体实现方法如下: /p> "http://www.w3.org/TR/xhtml ...
php返回json数组元素,php生成返回json对象数组（json支持中文）
php生成返回json对象数组注意两种方法生成的对象数组在结构上的区别 $jarr=array( 'total' => 239, 'list' => array( array( 'cod ...
java继承数组实例_【Java】理解封装、继承、多态和对象数组的综合实例（简易的租车系统，附代码）...
一.Drive.java(汽车类 - 父类) package Z_CarManger; import java.io.ObjectInputStream.GetField; public abstra ...
18、Java面向对象——类和对象的关系及应用、对象数组的应用
目录课前先导: 一.什么是类? 二.类的创建三.什么是对象? 四.对象的创建.赋值:方法的调用五.定义类和对象的三种方法六.对象数组七.来了,你们要的对象课前先导: 在刚开始学习java的 ...
js解析java对象数组_js接收并转化Java中的数组对象的方法
在做项目时,要向ocx控件下发命令,就要在js中得到java中的对象,然后拼成一种格式,下发下去...当对象是一个时比较简单,但如果对象是一个数组时,就略显麻烦了. 开始我以为有简单的方式,可以直接进 ...
php 对象object json,PHP对象转数组(Object转Array),Json转数组(Json转Array)的方法_PHP教程...
PHP对象转数组(Object转Array),Json转数组(Json转Array)的方法 (1)php对象转数组的方法(object 转 array): /** * object 转 array * ...
字符串对象转数组对象_js对象转数组的方法 js怎么将数组对象转变成字符串
只需要一句,arr.__proto__=[];但是要注意浏览器支持__proto__才行,最新的浏览器应该都支持. 以下两种都可以解决此问题: function transform(obj){ var ...
将String类型的Json字符串转化对象或对象数组
方法一:jsckson的ObjectMapper类 String jsonString = "";//json类型的字符串ObjectMapper mapper = new Obj ...
php simplexmlelement object 数组,php中将SimpleXMLElement Object数组转化为普通数组
php中将SimpleXMLElement Object数组转化为普通数组在PHP中可以用simplexml_load_file或者simplexml_load_string 方便地进行XML的分析 ...

Object方法实践之对象数组转化

Object方法实践之对象数组转化相关推荐

最新文章

热门文章