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>