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

js map get方法

在JavaScript中,Map 对象保存键值对,并且能够记住键的原始插入顺序。Mapget 方法用于根据提供的键来检索对应的值。

基础概念

Map.prototype.get(key): 返回键 key 对应的值,如果不存在,则返回 undefined

优势

  1. 键可以是任意类型:与普通对象不同,Map 的键可以是任意数据类型,包括对象、函数等。
  2. 保持插入顺序Map 会按照插入顺序迭代键值对。
  3. 性能:在频繁增删键值对的场景下,Map 的性能通常优于普通对象。

类型

get 方法的参数类型是任意类型,因为它接受任何类型的键。

应用场景

  • 当你需要一个键值对的集合,并且键不仅仅是字符串或符号时。
  • 当你需要保持键值对插入顺序时。
  • 当你需要高效的查找、添加或删除操作时。

示例代码

代码语言:txt
复制
// 创建一个 Map 对象
const myMap = new Map();

// 设置键值对
myMap.set('name', 'Alice');
myMap.set('age', 25);
myMap.set({}, 'empty object'); // 键可以是对象

// 使用 get 方法获取值
console.log(myMap.get('name')); // 输出: Alice
console.log(myMap.get('age')); // 输出: 25
console.log(myMap.get({})); // 输出: undefined,因为对象是引用类型,{} 与 myMap 中的 {} 不是同一个对象
console.log(myMap.get('nonExistentKey')); // 输出: undefined

// 检查一个键是否存在
if (myMap.has('name')) {
  console.log('Name exists in the map');
}

// 删除一个键值对
myMap.delete('age');

// 获取 Map 的大小
console.log(myMap.size); // 输出: 2

遇到的问题及解决方法

问题:为什么 myMap.get({}) 返回 undefined

原因:在JavaScript中,对象是引用类型。每次你使用 {} 创建一个对象时,你实际上是创建了一个新的对象实例。即使两个对象看起来完全相同,它们也是不同的引用。因此,myMap.get({}) 返回 undefined,因为 get 方法在 Map 中查找的是引用,而不是对象的内容。

解决方法:如果你想要根据对象的内容来检索值,你需要使用一个能够表示对象内容的唯一标识符作为键,比如一个字符串或一个序列化后的字符串(例如使用 JSON.stringify)。

代码语言:txt
复制
const objKey = { id: 1 };
myMap.set(JSON.stringify(objKey), 'object value');

// 使用 get 方法获取值
console.log(myMap.get(JSON.stringify(objKey))); // 输出: object value

请注意,使用 JSON.stringify 作为键可能会带来性能问题和安全问题(例如,如果对象包含循环引用或敏感数据),因此这种方法应该谨慎使用。

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

相关·内容

Map 只会 put、get?快来学这几个“新”方法

引子Map的数据操作,你是不是还只会put、get?Map是我们日常编程中十分常用的数据接口,的在JDK8中,Map引入了几个新方法,可以简化我们对Map中数据的操作。...目前JDK的最新LTS版本已经更新到21了,这几个在JDK8引入的Map”新“方法其实也是”老“方法了,还没熟练使用也太out了,快来看看你都”学废“了吗?.../ 老写法 String oldValue = defaultValue; if (map.containsKey(key)) { oldValue = map.get(key...putIfAbsent也是一个见名知意的方法:不存在key或者值为null时,才将键值对放入Map。跟put方法相比,这个方法不会直接覆盖已有的值,在不允许覆盖旧值的场景使用起来会比较简洁。...replace这个方法的效果是:如果key存在,则更新值如果key不存在,什么也不做总结可以看到,这些JDK8引入的Map的方法,都可以在某些特定场景下简化我们的代码,虽然不嫌麻烦的话,put、get等方法都可以搞定

7810
  • js Map用法

    创建 使用 new 关键字和 Map 构造函数可以创建一个空映射: const m = new Map(); 如果想在创建的同时初始化实例,可以给 Map 构造函数传入一个可迭代对象,需要包含键/值对数组.../值对: // set()方法返回映射实例,因此可以把多个操作连缀起来 const m = new Map(); m.set("小明", 100).set("小红", 100); Array.from(...m); // [["小明", 100], ["小红", 100]] 4. get() get(): 通过键查询值,返回值: const m = new Map(); m.set("小明", 100).set...("小红", 100); m.get("小红"); // 100 m.get("abc"); // 不存在为undefined 5. has() has(): 通过键查询是否存在, 返回布尔值: const...but,but,如果比较注重性能的话就有必要使用Map了: 选择 Object 还是 Map 对于多数 Web 开发任务来说,选择 Object 还是 Map 只是个人偏好问题,影响不大。

    8.1K30

    JS数组遍历方法:forEach、map、filter、reduce、some、every

    map方法返回一个新的数组,该数组由原始数组中的每个元素经过回调函数处理后的结果组成。 filter方法返回一个新的数组,该数组由原始数组中满足指定条件的元素组成。...2:修改原数组: forEach、map、filter、some和every方法不会修改原始数组,它们只是对数组进行遍历或条件判断。...3:使用回调函数参数: forEach、map、filter、reduce、some和every方法都接受一个回调函数作为参数。...回调函数的参数可以包括当前元素、当前索引和数组本身,但在每种方法中使用的参数可能会有所不同。 4:返回新数组: map、filter和reduce方法都会返回一个新的数组,而不会修改原始数组。...map适用于需要对数组中的每个元素进行转换或映射,并返回一个新的数组的情况。 filter适用于根据指定条件筛选出符合条件的元素,并返回一个新的数组的情况。

    2.3K30

    【JS】208-图解 Map、Reduce 和 Filter 数组方法

    数组方法,赋予了开发者四两拨千斤的能力。...我们直接进入正题,看看如何使用(并记住)这些超级好用的方法! Array.map() Array.map() 根据传递的转换函数,更新给定数组中的每个值,并返回一个相同长度的新数组。...let newArray = oldArray.map((value, index, array) => { ... }); 一个帮助记住 map 的方法:Morph Array Piece-by-Piece...(逐个改变数组) 你可以使用 map 代替 for-each 循环,来遍历并对每个值应用转换函数。...这个方法适用于当你想更新数组的同时保留原始值。它不会潜在地删除任何值(filter 方法会),也不会计算出一个新的输出(就像 reduce 那样)。map 允许你逐个改变数组。

    2K30

    【JS】257- 图解 Map、Reduce 和 Filter 数组方法

    map、reduce 和 filter 是三个非常实用的 JavaScript 数组方法,赋予了开发者四两拨千斤的能力。我们直接进入正题,看看如何使用(并记住)这些超级好用的方法!...Array.map() Array.map() 根据传递的转换函数,更新给定数组中的每个值,并返回一个相同长度的新数组。它接受一个回调函数作为参数,用以执行转换过程。...let newArray = oldArray.map((value, index, array) => { ... }); 一个帮助记住 map 的方法:Morph Array Piece-by-Piece...(逐个改变数组) 你可以使用 map 代替 for-each 循环,来遍历并对每个值应用转换函数。...这个方法适用于当你想更新数组的同时保留原始值。它不会潜在地删除任何值(filter 方法会),也不会计算出一个新的输出(就像 reduce 那样)。map 允许你逐个改变数组。

    1.9K20

    HTTP 方法:GET方法 对比 POST方法

    Http请求中的get方法和post方法的异同,算是我们Web开发时候常见的问题吧,这次还是老生常谈,新壶装旧酒,权当复习了。 这是大概的Http请求过程图: ?...(本答案参考自w3schools) 比较 GET 与 POST的异同 下面的表格比较了两种 HTTP 方法:GET 和 POST。...当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。 无限制。 对数据类型的限制 只允许 ASCII 字符。 没有限制。...从网上查找其他资料还发现了很多有趣的东西: GET和POST都是HTTP协议中的两种发送请求的方法,HTTP的底层是TCP/IP。...所以GET和POST的底层也是TCP/IP,也就是说,GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。

    2.3K20
    领券