玖叶教程网

前端编程开发入门

2024年04月24日

JavaScript，动态访问对象属性，Array，Set，Map，对象数组分组

动态访问对象属性

有俩方式获取对象的属性：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 = ", JSON.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 = ", JSON.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: '主任', …}
.........................................
李四 用户类型为 类型二
张三 用户类型为 类型二
业务管理员 用户类型为 类型一
系统管理员 用户类型为 类型一
仓库管理员 用户类型为 类型一
财务人员 用户类型为 类型二
发药员 用户类型为 类型一
库管 用户类型为 类型一
责任人 用户类型为 类型一
主任 用户类型为 类型三

标签：数组转set 

作者:gojiuye , 分类:技术精选 , 浏览:17 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言