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); 
                    }
                }
 },

print

//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 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 反显关联数据

                
                  {{ item.name }}
                
              

    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
        }]
      })//渲染图表
    },

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