动态访问对象属性
有俩方式获取对象的属性：1、点语法，例：user.name，2、中括号语法，例：user['name']。
let name1 = stateData.userList[0].name; console.log("访问对象的属性:", name1); let name2 = stateData.userList[0]['name']; console.log("动态访问对象的属性:", name2); let dynamicName = 'name'; let name3 = stateData.userList[0][dynamicName]; console.log("动态访问对象的属性:", name3);
对象数组与对象数组分组
Set（***）
Set（***），成员的值都是唯一的，ES6，Set（***）。
// =========================================// // 从数组中获取属性的唯一*** // =========================================// function groupSet(dataList, groupBy) { let dataGroupSet = new Set(); if (dataList) { dataList.forEach((element, index) => { dataGroupSet.add(element[groupBy]); }); } return dataGroupSet; }
Array（数组），分组
对象数组，按照属性分组。
// =========================================// // 将数组按照属性进行分组，返回数组 // =========================================// function groupArray(dataList, groupBy) { let dataGroupArray = new Array(); if (dataList) { dataList.forEach((element, index) => { dataGroupArray[element[groupBy]] = element; }); } return dataGroupArray; }
注：长度为0，且不可遍历。
Map（***），分组
Map（***），键值对的***，ES6，Map（***）。
// =========================================// // 将数组按照属性进行分组，返回Map // =========================================// function groupMap(dataList, groupBy) { let dataGroupMap = new Map(); if (dataList) { dataList.forEach((element, index) => { //动态访问对象的属性 dataGroupMap.set(element[groupBy], element); }); } return dataGroupMap; }
案例代码
<template> <div id="demo09Manage"></div> </template> <script setup> import { reactive } from "vue"; // 数据 const stateData = reactive({ userList: [ { id: "220228163630595", username: "lisi", status: 1, type: "2", name: "李四", orgId: "1497055230288723968", deptId: "1497055360492503040", }, { id: "220228161849172", username: "zhangsan", status: 1, type: "2", name: "张三", orgId: "1497055230288723968", deptId: "1497055360492503040", }, { id: "220228161301526", username: "business", status: 1, type: "1", name: "业务管理员", orgId: "1497055230288723968", deptId: "1497055472115515392", }, { id: "220228161213286", username: "system", status: 1, type: "1", name: "系统管理员", orgId: "1497055230288723968", deptId: "1497055472115515392", }, { id: "220228161133578", username: "warehouse", status: 0, type: "1", name: "仓库管理员", orgId: "1497055230288723968", deptId: "1497055472115515392", }, { id: "220228161016997", username: "finance", status: 1, type: "2", name: "财务人员", orgId: "1497055230288723968", deptId: "1497055472115515392", }, { id: "220228160919274", username: "dispensing", status: 1, type: "1", name: "发药员", orgId: "1497055230288723968", deptId: "1497055472115515392", }, { id: "220228160719861", username: "deptWarehouse", status: 1, type: "1", name: "库管", orgId: "1497055230288723968", deptId: "1497055472115515392", }, { id: "220228160623257", username: "dieteticDirector", status: 1, type: "1", name: "责任人", orgId: "1497055230288723968", deptId: "1497055472115515392", }, { id: "220228160523845", username: "dieteticTechnician", status: 1, type: "3", name: "主任", orgId: "1497055230288723968", deptId: "1497055472115515392", }, ], typeList: [ { id: "1", name: "类型一" }, { id: "2", name: "类型二" }, { id: "3", name: "类型三" }, ], }); // ====================================================================// // 动态访问对象的属性 // ====================================================================// let name1 = stateData.userList[0].name; console.log("访问对象的属性:", name1); let name2 = stateData.userList[0]['name']; console.log("动态访问对象的属性:", name2); let dynamicName = 'name'; let name3 = stateData.userList[0][dynamicName]; console.log("动态访问对象的属性:", name3); console.log("........................................."); // ====================================================================// // 从数组中获取属性的唯一*** // ====================================================================// function groupSet(dataList, groupBy) { let dataGroupSet = new Set(); if (dataList) { dataList.forEach((element, index) => { dataGroupSet.add(element[groupBy]); }); } return dataGroupSet; } // ====================================================================// // 将数组按照属性进行分组，返回数组 // ====================================================================// function groupArray(dataList, groupBy) { let dataGroupArray = new Array(); if (dataList) { dataList.forEach((element, index) => { dataGroupArray[element[groupBy]] = element; }); } return dataGroupArray; } // ====================================================================// // 将数组按照属性进行分组，返回Map // ====================================================================// function groupMap(dataList, groupBy) { let dataGroupMap = new Map(); if (dataList) { dataList.forEach((element, index) => { //动态访问对象的属性 dataGroupMap.set(element[groupBy], element); }); } return dataGroupMap; } // ====================================================================// // 代码案例1 // ====================================================================// // 从数组中获取type的*** let userTypeSet = groupSet(stateData.userList, "type"); console.log("userTypeSet = ", userTypeSet); console.log("是否包含 = ", userTypeSet.has("1")); //遍历 for (let v of userTypeSet) { console.log("userType:", v); } console.log("长度：", userTypeSet.size); console.log([...userTypeSet]); // ['2', '1', '3'] console.log("........................................."); // ====================================================================// // 代码案例2 // ====================================================================// // 按username分组（username唯一） let userGroupList = groupArray(stateData.userList, "username"); console.log("userGroupList = ", userGroupList); // 访问单个 console.log("getObject = ", *** ON.stringify(userGroupList["business"])); // 长度为0，不可遍历 console.log("长度：", userGroupList.length); console.log("........................................."); // 按username分组（username唯一） let userGroupMap = groupMap(stateData.userList, "username"); console.log("userGroupMap = ", userGroupMap); // 访问单个 console.log("getObject = ", *** ON.stringify(userGroupMap.get("business"))); // 遍历 for (let item of userGroupMap) { console.log("item:", item); } for (let k of userGroupMap.keys()) { console.log("key:", k + "=" + userGroupMap.get(k)); } for (let v of userGroupMap.values()) { console.log("value:", v); } console.log("........................................."); // ====================================================================// // 代码案例3 // ====================================================================// let typeGroupList = groupArray(stateData.typeList, "id"); // 输出 stateData.userList.forEach((element, index) => { console.log(element.name, "用户类型为", typeGroupList[element.type].name); }); </script>
输出内容
访问对象的属性: 李四 动态访问对象的属性: 李四 动态访问对象的属性: 李四 ......................................... userTypeSet = Set(3) {'2', '1', '3'}[[Entries]]0: "2"1: "1"2: "3"size: 3[[Prototype]]: Set 是否包含 = true userType: 2 userType: 1 userType: 3 长度： 3 (3) ['2', '1', '3']0: "2"1: "1"2: "3"length: 3[[Prototype]]: Array(0) ......................................... userGroupList = [lisi: Proxy, zhangsan: Proxy, business: Proxy, system: Proxy, warehouse: Proxy, …] getObject = {"id":"220228161301526","username":"business","status":1,"type":"1","name":"业务管理员","orgId":"1497055230288723968","deptId":"1497055472115515392"} 长度： 0 ......................................... userGroupMap = Map(10) {'lisi' => Proxy, 'zhangsan' => Proxy, 'business' => Proxy, 'system' => Proxy, 'warehouse' => Proxy, …} getObject = {"id":"220228161301526","username":"business","status":1,"type":"1","name":"业务管理员","orgId":"1497055230288723968","deptId":"1497055472115515392"} item: (2) ['lisi', Proxy] item: (2) ['zhangsan', Proxy] item: (2) ['business', Proxy] item: (2) ['system', Proxy] item: (2) ['warehouse', Proxy] item: (2) ['finance', Proxy] item: (2) ['dispensing', Proxy] item: (2) ['deptWarehouse', Proxy] item: (2) ['dieteticDirector', Proxy] item: (2) ['dieteticTechnician', Proxy] key: lisi=[object Object] key: zhangsan=[object Object] key: business=[object Object] key: system=[object Object] key: warehouse=[object Object] key: finance=[object Object] key: dispensing=[object Object] key: deptWarehouse=[object Object] key: dieteticDirector=[object Object] key: dieteticTechnician=[object Object] value: Proxy {id: '220228163630595', username: 'lisi', status: 1, type: '2', name: '李四', …} value: Proxy {id: '220228161849172', username: 'zhangsan', status: 1, type: '2', name: '张三', …} value: Proxy {id: '220228161301526', username: 'business', status: 1, type: '1', name: '业务管理员', …} value: Proxy {id: '220228161213286', username: 'system', status: 1, type: '1', name: '系统管理员', …} value: Proxy {id: '220228161133578', username: 'warehouse', status: 0, type: '1', name: '仓库管理员', …} value: Proxy {id: '220228161016997', username: 'finance', status: 1, type: '2', name: '财务人员', …} value: Proxy {id: '220228160919274', username: 'dispensing', status: 1, type: '1', name: '发药员', …} value: Proxy {id: '220228160719861', username: 'deptWarehouse', status: 1, type: '1', name: '库管', …} value: Proxy {id: '220228160623257', username: 'dieteticDirector', status: 1, type: '1', name: '责任人', …} value: Proxy {id: '220228160523845', username: 'dieteticTechnician', status: 1, type: '3', name: '主任', …} ......................................... 李四 用户类型为 类型二 张三 用户类型为 类型二 业务管理员 用户类型为 类型一 系统管理员 用户类型为 类型一 仓库管理员 用户类型为 类型一 财务人员 用户类型为 类型二 发药员 用户类型为 类型一 库管 用户类型为 类型一 责任人 用户类型为 类型一 主任 用户类型为 类型三
