首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js map引用

在JavaScript中,Map是一种特殊的键值对集合,其中的键和值可以是任意类型(对象、基本类型等)。与其他对象不同,Map的键可以是任意值,包括函数、对象和基本类型。

基础概念

  1. 创建Map
  2. 创建Map
  3. 设置键值对
  4. 设置键值对
  5. 获取值
  6. 获取值
  7. 检查键是否存在
  8. 检查键是否存在
  9. 删除键值对
  10. 删除键值对
  11. 遍历Map
  12. 遍历Map

引用问题

Map中的值是按引用存储的,这意味着如果你存储一个对象到Map中,然后修改这个对象,Map中的值也会随之改变。

示例

代码语言:txt
复制
const obj = { a: 1 };
const myMap = new Map();
myMap.set('objKey', obj);

console.log(myMap.get('objKey')); // { a: 1 }

obj.a = 2;

console.log(myMap.get('objKey')); // { a: 2 }

优势

  1. 键的多样性Map允许任何类型的键,不仅仅是字符串或符号。
  2. 性能:在频繁增删键值对的场景下,Map的性能通常优于普通对象。
  3. 有序性Map中的元素是有序的,遍历时会按照插入顺序返回。

应用场景

  1. 缓存:可以用Map来存储计算结果或数据,以便快速访问。
  2. 数据关联:当需要将复杂对象作为键来关联数据时,Map非常有用。
  3. 去重:可以利用Map的唯一键特性来去除数组中的重复项。

解决问题的方法

如果你不希望Map中的对象引用发生变化,可以在存储前创建对象的副本。

示例

代码语言:txt
复制
const obj = { a: 1 };
const myMap = new Map();
myMap.set('objKey', { ...obj }); // 使用扩展运算符创建副本

obj.a = 2;

console.log(myMap.get('objKey')); // { a: 1 },副本未受原对象修改影响

通过这种方式,即使原对象发生变化,Map中存储的对象副本也不会受到影响。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

js Map用法

ECMAScript 6 以前,在 JavaScript 中实现“键/值”式存储可以使用 Object 来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。...作为 ECMAScript 6 的新增特性,Map 是一种新的集合类型,为这门语言带来了真正的键/值存储机制。Map 的大多数特性都可以通过 Object 类型实现,但二者之间还是存在一些细微的差异。...创建 使用 new 关键字和 Map 构造函数可以创建一个空映射: const m = new Map(); 如果想在创建的同时初始化实例,可以给 Map 构造函数传入一个可迭代对象,需要包含键/值对数组...but,but,如果比较注重性能的话就有必要使用Map了: 选择 Object 还是 Map 对于多数 Web 开发任务来说,选择 Object 还是 Map 只是个人偏好问题,影响不大。...而对大多数浏览器引擎来说,Map 的 delete()操作都比插入和查找更快。 如果代码涉及大量删除操作,那么毫无疑问应该选择 Map。

8.1K30
  • js如何引用同级元素

    具体效果 示例效果 https://coder.itclan.cn/fontend/js/17-yinyong-tongji-elem/ 具体描述 在网页中,同级(兄弟)元素,指的是拥有相同的直接父级元素的元素...并且往往指的是同类的元素,同类元素在实际开发中遇到的比较多 比如:列表li,并列的按钮等,当需要做一些特殊的效果时,可以对其他同级的元素进行一些操作,满足特定的网页要求 比如:隔行填充颜色等 原生方法实现 以下是通过原生js...就是同级元素,同级元素拥有相同的父级元素都是p,那么就可以得到除自身以外的的同级元素,如果还需要排除同一类别的话,那么可以使用节点的nodeType属性来加以区别 Vue版本实现 在Vue里面,就不用类似原生js...margin: 20px 0; } .content { padding: 20px 0 0 0; } 从上面可以看出,使用Vue实现类似同样的效果,就几行代码,相比原生js...实现是比较简单的,但是原生js的操作依旧还是要知道的

    7.9K40

    js forEach和 map 区别

    不对未初始化的值进行任何操作(稀疏数组) 不可以阻止循环,只能用 new Error 来抛出循环 原数组如果全是基本数据类型,不会改变原数组,如果是引用数据类型,会改变原数组 Array.prototype.map...因为 map 生成一个新数组,当你不打算使用返回的新数组却使用 map 是违背设计初衷的,请用 forEach 或者 for-of 替代。...特点: map 不修改调用它的原数组本身(当然可以在 callbackFn 执行时改变原数组), 原数组如果全是基本数据类型,不会改变原数组,如果是引用数据类型,会改变原数组 不可以阻止循环,只能用...调用 map 方法之后追加的数组元素不会被 callbackFn 访问。如果存在的数组元素改变了,那么传给 callbackFn 的值是 map 访问该元素时的值。...map因为返回数组所以可以链式操作,forEach不能

    4.6K30
    领券