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>