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

最新推荐文章于 2024-04-23 13:57:03 发布

25号底片~

最新推荐文章于 2024-04-23 13:57:03 发布

阅读量603

点赞数

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_46001736/article/details/133888834

版权

uni-app 专栏收录该内容

89 篇文章 2 订阅

订阅专栏

一、原始数据

这里定义为五个数组，种类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>