JS中使用Map数据结构到底有啥好处？

smile97
328 阅读5分钟

本文主要记录学习什么？

  • 什么是Map？
  • Map和Object的区别
  • 有了Map为什么还要有WeakMap呢？
  • Map的实际开发场景问题考虑

什么是Map？

为了方便知道含义，我放置了Map的社区文档链接🔗。通过下面一个简单例子来了解一下：

// test1
// 第一种方式
let map = new Map();
let arr=['123'];
map.set(arr,456);
console.log('map',map,map.get(arr));
//map Map {["123"] => 456} 456

通过以上例子我们知道Map是一个可以通过set(key，value)去设置健值对，然后通过get(key)获取值的的特殊对象。

  • 那么你会问：为什么是种特殊对象呢？这就要从Map和Object的区别说起了。

Map和Object的区别

  • 用法对比

1、首先我们都知道Object是一个以健值对{key: value}形式成对存在的数据结构，Map则是一个以key => value这种形式成对存在的数据结构。

2、通过日常开发发现Object的key只能是字符串、数字和Symbol类型的，并且是以:的形式关联key和value的。而Map的key可以是任何类型（包括Date、Map，或者是自定义对象）,是以=>指向value。

3、Map是可迭代对象，所以其中的键值对是可以通过 for of 循环或 .foreach() 方法来迭代的；而普通的对象键值对则默认是不可迭代的，只能通过 for in 循环来访问（或者使用 Object.keys(o)、Object.values(o)、Object.entries(o) 来取得表示键或值的数字）。

什么是可迭代对象？

可迭代对象（Iterables）是可以使用 for..of 进行迭代的对象。 从技术上讲，可迭代对象必须实现 Symbol.iterator 方法。
迭代器协议定义了如何从一个对象中生成一系列的值。 当一个对象实现了 next() 方法时，它就成为了一个迭代器。
next() 方法必须返回一个带有两个属性的对象：value(迭代器返回的值，即下一个值)、done(如果迭代器已经完成，则返回 true 如果迭代器产生了一个新值，则返回 false)

// 创建对象
myNumbers = {};

// 使其可迭代
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}
  • 性能对比

接下来我们来讨论一下 Object 和 Map 的性能。不知道你有没有听说过 Map 的性能优于 Object 的说法， 我反正是见过不少次。借用哲学和科学观点：存在的事物一定有它的必然性，那么既然有个Object为什么ES6又提出了Map呢？这就来探讨下。 以下对比为查阅资料所得。

1、内存占用 同一个条件下，Map的储存大约比Object多50%的健值对 2、性能 向 Object 和 Map 中插入新键/值对的消耗大致相同，不过插入 Map 一般会稍微快 一点儿。

与Map相比，Object在性能上存在问题，其中删除操作以性能低下而臭名昭著，而Map针对这种情况进行了优化，并且在某下情况下可以显著提高速度。其中在基准测试中，Map比Object快了约5倍

有了Map为什么还要有WeakMap呢？

  • Map 的键可以是任意类型，WeakMap 只接受对象作为键（null除外），不接受其他类型的值作为键
  • Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键； WeakMap 的键是弱引用，键所指向的对象可以被垃圾回收，此时键是无效的
  • Map 可以被遍历， WeakMap 不能被遍历

Map的实际开发场景问题考虑

  1. 缓存管理：Map可以用于实现简单的缓存机制，存储键值对数据。在需要缓存数据的场景下，可以使用Map来快速存取数据，并根据需求设置缓存过期时间等策略。
  2. 事件监听器：Map可以用于存储事件和对应的监听器函数。在开发中，可以使用Map来管理多个事件的监听和处理函数，提高代码的可读性和维护性。
  3. 路由映射：在Web开发中，Map可以用于实现路由映射，将URL路径映射到对应的处理函数或组件。这样可以实现灵活的路由配置和管理。
  4. 数据结构转换：Map可以用于将不同数据结构之间进行转换，例如将数组转换为Map，方便进行数据的快速查找和操作。
  5. 多语言支持：在国际化开发中，Map可以用于存储不同语言版本的文本内容，根据用户的语言偏好动态获取对应的文本内容。
  6. 状态管理：Map可以用于存储应用程序的状态信息，例如用户登录状态、页面状态等。通过Map管理状态信息，可以方便地进行状态更新和访问。
  7. 数据分组：Map可以用于对数据进行分组存储，例如将数据按照某个属性值进行分组，方便后续对数据进行分组操作和统计分析。
  8. 元数据管理：Map可以用于存储元数据信息，例如对象的属性描述、数据来源等，帮助开发人员更好地理解和管理数据。
avatar
文章
阅读
粉丝