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

 一、原始数据

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