数据解构

最新推荐文章于 2023-10-16 11:55:27 发布
最新推荐文章于 2023-10-16 11:55:27 发布
阅读量1.5k 收藏
点赞数
分类专栏： 数据解构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41829196/article/details/83109336
版权

1.将后台返回的两个数组（两个数组的长度相等），对应项依次相加

业务场景：

‘充值金额’  字段 后台没有返回，需要我们前端，将另外返回的数组对应项依次相加！

/**
 * @rechargeAmount {Array}
 * 用于处理 rechargeAmount 求和
 * rechargeAmount 充值金额 = lockRechargeTotal 被锁定的金币充值金额 + unlockRechargeTotal 未锁定的金币充值金额
 *
 */
var rechargeAmount = [];
			for (var i = 0; i < data.dates.length; i++) {
				if (data.lockRechargeTotal[i] === null || data.unlockRechargeTotal[i] === null) {
					data.lockRechargeTotal[i] = 0;
					data.unlockRechargeTotal[i] = 0;
				}
				data.lockRechargeTotal[i] = parseFloat(data.lockRechargeTotal[i]);
				data.unlockRechargeTotal[i] = parseFloat(data.unlockRechargeTotal[i]);
				rechargeAmount[i] = data.unlockRechargeTotal[i] + data.lockRechargeTotal[i];
			}

2.将后台返回的不同的数组，变成平时渲染成表格的数据解构。

<1>tablist期望的数据解构：

特点：campaignInfo是一个后台返回的数组，我们根据此数组进行表格list的渲染，有两个特点：

<1--  数组的 length 等于表格的行数，也就是几条数据

<2--- 数组的每一项是一个对象，对象是无序属性的集合，每个对象里面的属性的个数 等于 表格的列数

{
	"data":{
		"total":6,
		"campaignInfo":[
			{
				"actionTime":"2018-09-04 09:29:11",
				"adsenseCount":1,
				"campaignStatus":1,
				"campaignTitle":"1",
				"endTime":"2018-11-01 00:00:00",
				"id":25,
				"isPutOn":0,
				"startTime":"2018-10-01 09:29:11"
			},
			{
				"actionTime":"2018-08-01 15:00:38",
				"adsenseCount":0,
				"campaignStatus":2,
				"campaignTitle":"搞基了",
				"endTime":"2018-10-08 00:00:00",
				"id":24,
				"isPutOn":0,
				"startTime":"2018-10-01 00:00:00"
			},
			{
				"actionTime":"2018-08-31 14:14:34",
				"adsenseCount":2,
				"campaignStatus":2,
				"campaignTitle":"测试",
				"endTime":"2018-09-15 00:00:00",
				"id":23,
				"isPutOn":0,
				"startTime":"2018-07-31 00:00:00"
			},
			{
				"actionTime":"2018-09-07 00:00:00",
				"adsenseCount":14,
				"campaignStatus":2,
				"campaignTitle":"910活动",
				"endTime":"2018-09-23 00:00:00",
				"id":22,
				"isPutOn":0,
				"startTime":"2018-09-05 00:00:00"
			},
			{
				"actionTime":"2018-05-20 00:00:00",
				"adsenseCount":0,
				"campaignStatus":2,
				"campaignTitle":"520活动",
				"endTime":"2018-09-23 00:00:00",
				"id":21,
				"isPutOn":0,
				"startTime":"2018-05-20 00:00:00"
			},
			{
				"actionTime":"2018-04-23 00:00:00",
				"adsenseCount":0,
				"campaignStatus":2,
				"campaignTitle":"423活动",
				"endTime":"2018-04-23 23:59:59",
				"id":20,
				"isPutOn":0,
				"startTime":"2018-04-23 00:00:00"
			}
		]
	},
	"errorMessage":"",
	"errorCode":""
}

<2>后台给我们的数据解构：

{
	"data":{
		"customerNumber":3,
		"customerNumberTotal":86,
		"customers":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,0,0],
		"dates":["2018-09-16","2018-09-17","2018-09-18","2018-09-19","2018-09-20","2018-09-21","2018-09-22","2018-09-23","2018-09-24","2018-09-25","2018-09-26","2018-09-27","2018-09-28","2018-09-29","2018-09-30","2018-10-01","2018-10-02","2018-10-03","2018-10-04","2018-10-05","2018-10-06","2018-10-07","2018-10-08","2018-10-09","2018-10-10","2018-10-11","2018-10-12","2018-10-13","2018-10-14","2018-10-15","2018-10-16","2018-10-17"],
		"lockRechargeNumber":"2002.80",
		"lockRechargeTotal":["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","6.80","0","0","0","1996.00","0","0","0","0","0"],
		"officialNumber":0,
		"rechargeTimes":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,5,0,0,0,0,0],
		"rechargeTotalPayment":"20994.97",
		"registerCommunityCustomer":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,3,0,2,0,0,0],
		"registerCustomerAmount":["0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.01","0.00","0.10","0.00","398.04","0.00","0.00","0.00"],
		"registerCustomerMonthAmount":["0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","45.00","45.10","0.00","0.00","0.00","0.00","0.00"],
		"registerCustomerMonthTimes":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,0,0,0,0],
		"registerCustomerTimes":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,2,0,0,0],
		"registerMemberTotalPayment":"",
		"registerMonthAmount":"90.10",
		"registerMonthNumber":3,
		"registerYearAmount":"398.15",
		"registerYearNumber":4,
		"renewCommunityCustomer":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,1,2,0,0,0],
		"renewCustomerAmount":["0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.10","418.10","0.00","0.00","0.00"],
		"renewCustomerMonthAmount":["0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","0.00","45.00","45.10","0.00","0.00","0.00","0.00","0.00"],
		"renewCustomerMonthTimes":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,0,0,0,0],
		"renewCustomerTimes":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,0,0],
		"renewMonthAmount":"90.10",
		"renewMonthNumber":3,
		"renewTimes":null,
		"renewTimesTotal":0,
		"renewTotalPayment":"",
		"renewYearAmount":"418.20",
		"renewYearNumber":3,
		"renewYears":null,
		"renewYearsTotal":0,
		"timeNumber":6,
		"totalOfficialNumber":0,
		"totalRegisterAmount":48825,
		"totalRegisterCommunityCustomer":7,
		"totalRenewAmount":50830,
		"totalRenewCommunityCustomer":6,
		"trialNumber":0,
		"unlockRechargeNumber":"2994.00",
		"unlockRechargeTotal":["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","2994.00","0","0","0","0","0"]
	},
	"errorMessage":"",
	"errorCode":""
}

处理逻辑：

----   声明一个数组

----   遍历数组，把数组的每一项都变成一个对象

----   为对象添加新属性，对应tab列

//tablist
		
        var list = [];
		
		for (var i = 0; i < data.dates.length; i++) {
			var k = data.dates.length - i - 1;//倒序
			list[k] = {};//将数组的每一项都变成一个对象
			list[k].dates = response.data.data.dates[i];//对象添加属性
				                    
            list[k].officialCommunityCustomer=response.data.data.rechargeTimes[i];
			list[k].trialCommunityCustomer = response.data.data.rechargeTimes[i];
				list[k].renewTimes = response.data.data.rechargeTimes[i];
				list[k].renewYears = response.data.data.rechargeTimes[i];
			}

		context.list = list;

 

HainesFreeman
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础实践1-胡子语法展现到页面
云端-公子清
05-29 696
vue基础实践1-胡子语法展现到页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2.数据解构
w210825的博客
11-13 1036
数组解构 根据数据位置、从前到后、简化取值赋值 剩余操作符（…）只能放在最后，它只有展开、剩余两个作用 只要数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值 从当前位置的所有成员组成的数组，用剩余操作符 变量 < 数组，多余数组舍掉 变量 > 数组，多余变量为undefined 变量设置默认值，直接在变量后面赋值，当变量为undefined时才会使用默认值 const arr = [100, 200, 300]; const [foo, bar, baz] = ar
数据解构(一)
qq_45591898的博客
01-22 1170
提示：本文章讲解 线性表 与 顺序表 大概内容提示：以下是本篇文章正文内容，下面案例可供参考 今天只是浅浅的谈论一下数据解构的顺序表与线性表明天回跟新顺序表的使用案例。
ES6 解构数据
qq_34579060的博客
06-20 797
/** * 解构: 使数据访问更健康 * * 对象和数组字面量是Javascript中最为常见的数据结构，由于JSON数据格式的普及 * * 一、为何使用解构功能： * 开发者早期为了从对象和数组中获得特定的数据并赋值给变量，编写了很多同质化的代码 */ ...
前端数据解构
Gblfy_Blog
01-02 1053
案例： 数据如下： {success: true, code: 10000, data: {…}, message: "执行成功"} code: 10000 data: list: Array(7) 0: {_id: "608b70ecf9d99a7594662466", id: "0", label: "热榜"} 1: {_id: "608b70ecf9d99a7594662467", id: "1", label: "前端"} 2: {_id: "608b70ecf9d99a7594.
深入理解ES6之数据解构的用法
11-29
在JavaScript的ES6标准中，数据解构是一种强大的语法特性，允许我们更简洁、高效地从数组或对象中提取值并赋值给变量。这里我们将深入探讨对象解构和数组解构的用法。 **对象解构** 对象解构允许我们在赋值语句的...
JavaScript-Data-Structures-and-Algorithms:js数据解构和算法学习笔记
03-22
数据结构和算法是计算机科学的基础，它们对于编写高效、可维护的代码至关重要。本篇将详细探讨JavaScript中的数据结构和算法，帮助你深化对JavaScript编程的理解，并提升你的编程能力。 1. **数组（Array）** - ...
北京邮电大学历年数据结构期末试题
12-06
数据结构是计算机科学中的核心课程之一，主要研究如何在计算机中高效地组织和管理数据，以便进行快速查找、插入和删除等操作。本资源集合包含了北京邮电大学历年来的数据结构期末试题，对于正在学习或准备相关考试的...
ES6解构赋值实例详解
08-28
* 提取json数据：`({ needServicePwd: this.needServicePwd, needImgCode: this.needImgCode, needSmsCode: this.needSmsCode} = data)` * 函数参数的默认值：`const foo = config.foo || ”` * 遍历Map结构：`for ...
解构原始数据
勤勇的博客
07-05 306
有时候一个对象包含很多属性，而我们只需要其中的几个，这里可以使用解构方式来提取我们需要的属性。如一个用户对象内容如下： const rawUser = { name: 'John', surname: 'Doe', email: 'john@doe.com', displayName: 'SuperCoolJohn', joined: '2016-05-05', ...
ES6学习02---数据解构
weixin_53027472的博客
09-17 195
ES6 基础语法学习之数据解构
素材管理（二）-图片列表渲染-ES6提供解构赋值语法：{data：{data}} & 分页功能实现-el-pagination 组件属性或事件
weixin_44867717的博客
02-16 694
02-素材管理-图片列表渲染 当组件初始化完毕 发获取素材列表请求 得到数据后赋值 images 渲染列表 <!-- 图片列表 --> <div class="img_list"> <div class="img_item" v-for="item in images" :key="item.id"> &...
数据结构：八种数据结构大全
热门推荐
緑水長流*z
07-29 20万+
数据结构 1.1 数据结构概述 数据结构是计算机存储、组织数据的方式；通常情况下，精心选择的数据结构可以带来更高的运行或者存储效率。数据结构的优良将直接影响着我们程序的性能；常用的数据结构有：数组（Array）、栈（Stack）、队列（Queue）、链表（Linked List）、树（Tree）、图（Graph）、堆（Heap）、散列表（Hash）等； 1.2 数据结构的分类 1.2.1 排列方式 1）集合 集合：数据结构中的元素之间除了“同属一个集合” 的相互关系外，别无其他关系； 2）线性结构 线性
数据结构(全)
s6664的博客
06-21 5万+
线性结构, 树形结构, 图结构, 排序, 查找, 数据结构, 算法
深入解析ES6之数据结构的用法
weixin_33781606的博客
12-17 161
本文介绍了深入理解ES6之数据解构的用法，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。 一 对象解构 对象解构语法在赋值语句的左侧使用了对象字面量 let node = { type: true, name: false } //既声明又赋值 let { type,...
Kotlin学习（五）之----集合 + 数组类型 + 解构写法 list，set，map.....
XJ200012的博客
01-16 2945
对kotlin的几个集合使用以及解构写法
使用解构赋值简化axios返回对象属性元素的提取
最新发布
jiaohuizhuang6019的博客
10-16 234
使用解构赋值简化axios返回对象属性元素的提取
ES6---数据解构
赳赳万里鲲
01-16 2065
1、数组的解构赋值 let c = [b,a,e] = [1,2,3]; 若解构不成立则值为undifiend 2、对象的解构赋值 a、变量名和属性名一样 let { name,gender } = {name: 'jwl',gender: 'man'}; b、变量名和属性名不一样，借助第三方的变量 let city = {name: 'bj',co
数据结构
xfyangle的博客
03-27 1万+
数据结构 一些概念 数据结构就是研究数据的逻辑结构和物理结构以及它们之间相互关系，并对这种结构定义相应的运算，而且确保经过这些运算后所得到的新结构仍然是原来的结构类型。 数据：所有能被输入到计算机中，且能被计算机处理的符号的集合。是计算机操作的对象的总称。 数据元素：数据（集合）中的一个“个体”，数据及结构中讨论的基本单位 数据项：数据的不可分割的最小单位。一
java中有哪些一对一的数据解构
07-14
在Java中，有许多一对一的数据解构，其中一些常见的包括： 1. Map（映射）：Map是一种键值对的数据结构，它将键映射到值。Java中常用的Map实现类有HashMap、TreeMap和LinkedHashMap等。 2. Set（集合）：Set是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值