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

这篇具有很好参考价值的文章主要介绍了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"]

			]
		},
	]
},

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

二、分类处理数据

注：使用了数组的 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;
}, {});

uni-app：对数组对象进行以具体某一项的分类处理,uni-app,uni-app 文章来源地址https://www.toymoban.com/news/detail-723949.html

三、完整代码

<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>

到了这里，关于uni-app：对数组对象进行以具体某一项的分类处理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！