vue随笔9-关于对象遍历 Object.keys(obj).forEach(item=> {})的用法

该博客探讨了如何利用JavaScript的Object.keys方法与forEach结合,实现对象数组的数据处理,提升代码性能和简洁性。文章通过代码示例展示了如何针对'label'和'value'等属性进行数据操作,并将处理后的数据存储到新的数组中,以此提高编码效率。
摘要由CSDN通过智能技术生成

前言:

Object.keys()是用于获得由对象属性名组成的数组,可以与forEach数组遍历相结合使用,这种函数式编程风格比单纯的使用for性能更强,而且相比较来说也简洁,可以有效的提高编码效率。forEach还是非常好用的
注:1.Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值。
2.Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值对数组。


描述:

代码示例:

    getLabeldata(data){
         //data就是对象数组
         data.forEach((item) => {
              let dataObj = {}
              Object.keys(item).forEach((item2) => {
                switch (item2) {
                  case 'label':
                    //数据处理方法
                   break;
                  case 'value':
                    //数据处理方法
                   break;
                  default:
                   dataObj[item2] = item[item2]
                }
              })
              this.Labeldata.push(dataObj)
              //Labeldata是自己在data(){}中定义的数组数据
            })
       }
转换vue3 const option = JSON.parse(JSON.stringify(bcAttr)) let chartOption = {} let chartDimension = [] // 存放组织好的dimensions if (this._.has(option, '基础配置')) { chartOption = this._.merge(this.initialOption, option.基础配置) } if (this._.has(option, '数据')) { chartDimension = data.dimensions.map((item) => { return item }) // console.log('我是组织好的chartDimension', chartDimension) } chartOption.legend.data = bcDataset.yDimensions.map((item) => item) const maxarr = [] const valueArr = [[], [], [], [], []] option.数据.source.map((item) => { const arr = [] Object.values(item).forEach((ele) => { if (typeof ele === 'number') { arr.push(ele) } }) arr.sort((old, New) => { return old - New }) const obj = {} obj.name = item[bcDataset.xDimensions[0]] obj.max = arr[arr.length - 1] maxarr.push(obj) }) option.数据.source.map((item) => { const Array1 = [] Object.values(item).forEach((ele) => { if (typeof ele === 'number') { Array1.push(ele) } }) Array1.forEach((ele, index) => { valueArr.forEach((item, key) => { if (index == key) { valueArr[key].push(ele) } }) }) }) // console.log(maxarr) chartOption.radar.indicator = maxarr const optData = chartOption.legend.data const count = chartDimension.length - 1 for (let i = 0; i < count; i++) { // console.log(valueArr[i % valueArr.length]) const seriesObj = { type: 'radar', name: optData[i], areaStyle: { normal: { color: COLORLIST[i % COLORLIST.length], fontSize: 12 } }, symbolSize: 0, lineStyle: { normal: { color: COLORLIST[i % COLORLIST.length], width: 1, fontSize: 12 } }, data: [valueArr[i % valueArr.length]] } if (chartOption.series.length && chartOption.series[i]) { chartOption.series[i] = this._.merge(seriesObj, chartOption.series[i]) } else { chartOption.series.push(seriesObj) } }
06-13
Vue3中,您可以按如下方式进行转换: ```javascript const option = JSON.parse(JSON.stringify(bcAttr)); let chartOption = {}; let chartDimension = []; // 存放组织好的dimensions if (Object.prototype.hasOwnProperty.call(option, '基础配置')) { chartOption = this._.merge(this.initialOption, option.基础配置); } if (Object.prototype.hasOwnProperty.call(option, '数据')) { chartDimension = data.dimensions.map((item) => { return item; }); // console.log('我是组织好的chartDimension', chartDimension) } chartOption.legend.data = bcDataset.yDimensions.map((item) => item); const maxarr = []; const valueArr = [[], [], [], [], []]; option.数据.source.map((item) => { const arr = []; Object.values(item).forEach((ele) => { if (typeof ele === 'number') { arr.push(ele); } }); arr.sort((old, New) => { return old - New; }); const obj = {}; obj.name = item[bcDataset.xDimensions[0]]; obj.max = arr[arr.length - 1]; maxarr.push(obj); }); option.数据.source.map((item) => { const Array1 = []; Object.values(item).forEach((ele) => { if (typeof ele === 'number') { Array1.push(ele); } }); Array1.forEach((ele, index) => { valueArr.forEach((item, key) => { if (index == key) { valueArr[key].push(ele); } }); }); }); // console.log(maxarr) chartOption.radar.indicator = maxarr; const optData = chartOption.legend.data; const count = chartDimension.length - 1; for (let i = 0; i < count; i++) { // console.log(valueArr[i % valueArr.length]) const seriesObj = { type: 'radar', name: optData[i], areaStyle: { normal: { color: COLORLIST[i % COLORLIST.length], fontSize: 12 } }, symbolSize: 0, lineStyle: { normal: { color: COLORLIST[i % COLORLIST.length], width: 1, fontSize: 12 } }, data: [valueArr[i % valueArr.length]] }; if (chartOption.series.length && chartOption.series[i]) { chartOption.series[i] = this._.merge(seriesObj, chartOption.series[i]); } else { chartOption.series.push(seriesObj); } } ``` 需要注意的是,Vue3中的对象方法都在`Object.prototype`中定义,因此您需要使用`Object.prototype.hasOwnProperty`来检查属性是否存在。此外,您还需要注意箭头函数的写法和模板字符串的写法在Vue3中是否有所不同。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值