uni-app:对数组对象进行以具体某一项的分类处理

news2025/7/19 0:48:01

 一、原始数据

这里定义为五个数组,种类product有aaa,bbb两种

原始数据在data中进行定义

res: {
	"success": true,
	"devices": [{
			no: 0,
			product: 'aaa',
			alias: "设备1",
			assign: [
				["a1", "a2", "a3"],
				["a11", "a22", "a33"],
				["a111", "a222", "a333"]
			]
		},
		{
			no: 1,
			product: 'bbb',
			alias: "设备2",
			assign: [
				["b1", "b2", "b3"],
				["b11", "b22", "b33"],
				["b111", "b222", "b333"],
				["b1111", "b2222", "b3333"]
			]
		},
		{
			no: 2,
			product: 'aaa',
			alias: "设备3",
			assign: [
				["a1", "a2", "a3"],
				["a111", "a222", "a333"],
				["a11", "b22", "c33"]
			]
		},
		{
			no: 3,
			product: 'aaa',
			alias: "设备4",
			assign: [
				["a11", "b22", "c33"],
				["a1", "a2", "a3"],
				["a111", "a222", "a333"]

			]
		},
		{
			no: 4,
			product: 'bbb',
			alias: "设备5",
			assign: [
				["b111", "b222", "b333"],
				["b1", "b2", "b3"],
				["b11", "b22", "b33"],
				["b1111", "b2222", "b3333"]

			]
		},
	]
},

二、分类处理数据

注:使用了数组的 reduce() 方法来对 devices 数组进行循环遍历,并根据每个设备对象中的 product 值将其分类到一个以 product 为名称的数组中。

  • reduce() 方法接收一个回调函数和一个初始值作为参数。在这里,初始值是一个空对象 {}

  • 回调函数有两个参数:累加器(acc)和当前迭代的元素(device)。

  • 在每次迭代中,获取当前设备对象的 product 值并保存在变量 product 中。

  • 接下来,通过检查累加器对象 acc 中是否存在以 product 值为名称的属性,来判断是否已经有与该 product 对应的数组。

  • 如果不存在,则创建一个新的空数组,并将其添加为累加器对象 acc 的属性之一,使用 product 值作为属性名。

  • 然后,将当前的设备对象 device 添加到对应的 product 数组中,使用 push() 方法将设备对象推入数组中。

  • 最后,在每次迭代结束时,返回累加器对象 acc,以便在下一次迭代中使用。

  • 当所有元素都被迭代完毕后,reduce() 方法将返回最终累加器对象 acc,其中包含了以 product 值为名称的数组。

//根据product的名称进行分类处理
const devices = this.res.devices;
const result = devices.reduce((acc, device) => {
	const product = device.product;			
	// 检查结果中是否已存在相同 product 的数组,如果不存在则创建一个新数组
	if (!acc[product]) {
		acc[product] = [];
	}			
	// 将当前设备对象添加到对应的 product 数组中
	acc[product].push(device);			
	return acc;
}, {});		

 

三、完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				res: {
					"success": true,
					"devices": [{
							no: 0,
							product: 'aaa',
							alias: "设备1",
							assign: [
								["a1", "a2", "a3"],
								["a11", "a22", "a33"],
								["a111", "a222", "a333"]
							]
						},
						{
							no: 1,
							product: 'bbb',
							alias: "设备2",
							assign: [
								["b1", "b2", "b3"],
								["b11", "b22", "b33"],
								["b111", "b222", "b333"],
								["b1111", "b2222", "b3333"]
							]
						},
						{
							no: 2,
							product: 'aaa',
							alias: "设备3",
							assign: [
								["a1", "a2", "a3"],
								["a111", "a222", "a333"],
								["a11", "b22", "c33"]
							]
						},
						{
							no: 3,
							product: 'aaa',
							alias: "设备4",
							assign: [
								["a11", "b22", "c33"],
								["a1", "a2", "a3"],
								["a111", "a222", "a333"]

							]
						},
						{
							no: 4,
							product: 'bbb',
							alias: "设备5",
							assign: [
								["b111", "b222", "b333"],
								["b1", "b2", "b3"],
								["b11", "b22", "b33"],
								["b1111", "b2222", "b3333"]

							]
						},
					]
				},
				
			}
		},
		methods: {

		},
		onLoad() {
			console.log('初始数据')
			console.log(this.res.devices)
			//根据product的名称进行分类处理
			const devices = this.res.devices;
			const result = devices.reduce((acc, device) => {
				const product = device.product;			
				// 检查结果中是否已存在相同 product 的数组,如果不存在则创建一个新数组
				if (!acc[product]) {
					acc[product] = [];
				}			
				// 将当前设备对象添加到对应的 product 数组中
				acc[product].push(device);			
				return acc;
			}, {});		
			console.log('分类后的数据')
			console.log(result);
		}
	};
</script>
<style>

</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1103095.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

论文解析-moETM

论文解析-moETM 参考亮点动机发展现状现存问题 功能方法Encoder改进Decoder改进 评价指标生物保守性批次效应移除 实验设置结果多组学数据整合cell-topic mixture可解释性组学翻译性能评估RNA转录本、表面蛋白、染色质可及域调控关系研究1. 验证同一主题下&#xff0c;top gene…

Python武器库开发-基础篇(二)

基础篇(二) if 语句 编程时经常需要检查一系列条件&#xff0c;并据此决定采取什么措施。在Python中&#xff0c;if 语句让你能够检查程序的当前状态&#xff0c;并据此采取相应的措施 下面是一个简短的示例&#xff0c;演示了如何使用if 语句来正确地处理特殊情形。假设你有…

cmd进程简单操作指令

dir 查询当前路径和子路径 start空格加自己的exe程序&#xff0c;可运行程序。 taskkill /?可以执行很多&#xff0c;通常用于结束程序。 taskkill /f /im qq.exe 启动nginx.exe 查看运行的进程有哪些 选择结束nginx.exe

手写一个PrattParser基本运算解析器3: 基于Swift的PrattParser的项目概述

点击查看 基于Swift的PrattParser项目 PrattParser项目概述 前段时间一直想着手恶补 编译原理 的相关知识, 一开始打算直接读大学的 编译原理, 虽然内容丰富, 但是着实抽象难懂. 无意间看到B站的熊爷关于普拉特解析器相关内容, 感觉是一个非常好的切入点.所以就写了基于Swift版…

试着写几个opencv的程序

一、认识opencv OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源计算机视觉库&#xff0c;旨在提供丰富的图像处理和计算机视觉功能&#xff0c;以帮助开发者构建视觉应用程序。OpenCV最初由英特尔开发&#xff0c;现在由社区维护和支持。它支持…

【Javascript保姆级教程】显示类型转换和隐式类型转换

文章目录 前言一、显式类型转换1.1 字符串转换1.2 数字转换1.3 布尔值转换 二、隐式类型转换2.1 数字与字符串相加2.2 布尔值与数字相乘 总结 前言 JavaScript是一种灵活的动态类型语言&#xff0c;这意味着变量的数据类型可以在运行时自动转换&#xff0c;或者通过显式类型转…

Vue3使用Vite创建项目

node版本&#xff1a;node -v v18.16.0 npm版本: npm -v 9.5.1 Vite Vite&#xff1a;是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验 脚手架&#xff0c;创建Vue项目&#xff0c;替代 Vue-cli 基于Vite创建vue项目&#xff1a; 1.npm create vitelatest 2.完…

只要封装相同,电容体本身大小就一样吗?

高速先生成员--黄刚 当然这篇文章也还是针对高速信号的交流耦合电容&#xff0c;并不是用于电源的去耦电容&#xff0c;同时文章的灵感也来源于上一篇文章讲不同容值电容对高速信号原理上的效果差异。为什么我们在做高速设计的时候&#xff0c;速率越高&#xff0c;希望电容封装…

硬件小白,如何在有限的预算里选择一款性价比最高的硬盘?

硬件小白&#xff0c;如何在有限的预算里选择一款性价比较高的硬盘 明确使用场景三大种类SSD、HHD、HDDSSD 固态硬盘&#xff08;Solid State Drive&#xff09;HHD 混合硬盘&#xff08;Hybrid Hard Drive)HDD 传统硬盘&#xff08;Hard Disk Drive&#xff09;小结 重要参数机…

3分钟了解 egg.js

Eggjs是什么&#xff1f; Eggjs是一个基于Koajs的框架&#xff0c;所以它应当属于框架之上的框架&#xff0c;它继承了Koajs的高性能优点&#xff0c;同时又加入了一些约束与开发规范&#xff0c;来规避Koajs框架本身的开发自由度太高的问题。 Koajs是一个nodejs中比较基层的…

MFC-列表控件

目录 1、更改列表控件的属性&#xff1a; 2、代码设置表头&#xff1a; 3、设置正文内容&#xff1a; 4、设置属性&#xff0c;显示成表格形式 &#xff1a; 5、代码实现&#xff1a; 1、更改列表控件的属性&#xff1a; VIEW设置为Report模式会出现表格形状 2、代码设置…

C++对象模型(14)-- 构造函数语义学:拷贝构造函数和赋值运算赋

1、拷贝构造函数 1.1 什么是拷贝构造函数 拷贝构造函数是一种构造函数&#xff0c;它的功能是创建新对象。也就是说对象还没生成&#xff0c;这时利用另一个对象的拷贝来生成新的对象。 class MyDemo { public:// 默认构造函数MyDemo(){}// 拷贝构造函数MyDemo(const MyDemo…

【Java 进阶篇】JavaScript DOM Document对象详解

在前端开发中&#xff0c;DOM&#xff08;文档对象模型&#xff09;扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互&#xff0c;实现动态的网页效果。DOM的核心部分之一就是Document对象&#xff0c;它代表了整个HTML文档。在本篇博客中&#xff0c;我们将深…

A1S65B-S1 A1S61PN A1SJ51T64 机器人的优点和缺点

A1S65B-S1 A1S61PN A1SJ51T64 机器人的优点和缺点 像今天的任何创新一样&#xff0c;机器人有其优缺点。以下是机器人的优缺点和机器人未来的分析。 优势 他们在危险的环境中工作:当你可以派一个机器人去做这项工作时&#xff0c;为什么要拿人命冒险呢&#xff1f;想想看&a…

电平转换器IC

一、前言 使用多款电平转换器&#xff0c;记录和分享使用心得 目录 1.TXB0104(非国产) 2.RS0104(国产) 二、环境 非隔离电平转换&#xff0c;1.8~5V 三、正文 1.TXB0104(非国产) 芯片简介&#xff1a;A 端口支持 1.2V 至 3.6V 的电压&#xff0c;B 端口支持 1.65V 至 5…

法国数字医疗公司Tilak Healthcare完成1000万欧元融资

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于法国巴黎的治疗眼科的数字医疗公司Tilak Healthcare今日宣布已完成1000万欧元融资。 本轮融资完成后&#xff0c;Tilak Healthcare的融资总额已达到2200万欧元&#xff0c;本轮融资由Elai…

【软件测试】高频常问自动化测试面试题+答案(汇总)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、你有没有做过自…

linux文件权限与目录配置

用户与用户组 linux一般将文件可读写的身份分为三个类别&#xff1a;拥有者&#xff08;owner&#xff09;、所属群组&#xff08;group&#xff09;、其他人&#xff08;other&#xff09; 三种身份都有读、写、执行等权限 文件拥有者 linux是个多人多任务的系统&#xff0c…

Edge侧实用【AI插件合集】

废话不多说&#xff0c;直接开始正文&#x1f447; 1.ChatsNow ChatsNow是人工智能助手&#xff0c;支持GPT-3.5 和 GPT-4 模型&#xff0c;写作&#xff0c;AI绘画统统不在话下&#xff0c;并且可以增强搜索引擎结果等。 免费使用&#xff0c;提供30次问答次数&#xff0c;…

智慧公厕:打造清新无臭的舒适空间

近年来&#xff0c;智慧公厕成为城市建设中备受关注的一个热点话题。而对于公共厕所最让人头痛的臭味问题&#xff0c;一直困扰着管理单位。为了解决公厕臭味问题&#xff0c;科技力量发挥了重要作用&#xff0c;中期科技「智慧公厕-智慧厕所」推出了一系列公厕除臭设备&#x…