ES6 Map数据类型的嵌套使用new Map()

最新推荐文章于 2023-06-07 09:53:00 发布

每一天，每一步

最新推荐文章于 2023-06-07 09:53:00 发布

阅读量586

点赞数 1

分类专栏： javaScript ES6 ES7 ES8 文章标签： es6 前端 ecmascript Map new Map

本文链接：https://blog.csdn.net/u010234868/article/details/130931705

版权

javaScript 同时被 2 个专栏收录

135 篇文章 12 订阅

订阅专栏

ES6 ES7 ES8

38 篇文章 0 订阅

订阅专栏

文章介绍了如何利用ES6的Map数据类型来解决JavaScript中用Number或其他数据类型作为键的问题，具体场景是将一个包含年级、班级和学生的数组对象列表转换为年级→班级→学生的组合结构。通过遍历数据，创建多级Map来存储信息，最终实现了按年级和班级分组的学生列表。

摘要由CSDN通过智能技术生成

为了解决JavaScript的对象使用Number或者其他数据类型作为键这个问题，最新的ES6规范引入了新的数据类型Map。

需求：学校一个年级有很多个班级，每个班级有很多位学生，原始数据是一个数组对象列表，每个对象中包含年级、班级、学生三个属性，想要获取一组：年级=》班级=》学生这样的组合。

代码实现如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    // 想要得到的结果：// {'一年级' => {'一班' => [], '二班' => []}, '二年级' => {'一班' => [], '二班' => []}, ...}
    const datas = [ // 原始数据
      {
        grade: '一年级',
        class: '一班',
        name: 'Jack'
      },
      {
        grade: '一年级',
        class: '一班',
        name: 'Tom'
      },
      {
        grade: '一年级',
        class: '二班',
        name: 'Aaron'
      },
      {
        grade: '一年级',
        class: '三班',
        name: 'Dick'
      },
      {
        grade: '二年级',
        class: '一班',
        name: 'Carl'
      },
      {
        grade: '二年级',
        class: '二班',
        name: 'Bill'
      },
    ];
    
    const gradeMap = new Map();
    datas.map(item => {
      gradeMap.set(item.grade, new Map());
    });
    console.log(gradeMap); //  {'一年级' => Map(0), '二年级' => Map(0)}
    gradeMap.forEach((value, key) => {
      let classMap = new Map();
      datas.map(item => {
        let arr = [];
        if (key == item.grade) { // 从datas中找到当前gradeMap的key对应的年级
          if (classMap.get(item.class)) { // 班级Map中已经存在有当前班级的，追加name到其值中
            arr = [...classMap.get(item.class), item.name];
            classMap.set(item.class, arr);
          } else {
            arr.push(item.name);
            classMap.set(item.class, arr);
          }
        }
      });
      console.log(classMap); // {'一班' => Array(2), '二班' => Array(1), '三班' => Array(1)}   {'一班' => Array(1), '二班' => Array(1)}
      gradeMap.set(key, classMap);
    });
    console.log(gradeMap); // {'一年级' => Map(3), '二年级' => Map(2)}
  </script>
</body>

</html>

最终输出结果：